How to reduce multiple buttons, for multiple same functions-CodePudding

I work on little app for my students. On the page will be math example to solve and under the example is always button which after click shows you result if u were correct or not. This is code for first to examples to solve on the first line. Ofc i dont plan have only 2 examples but around 10-20. So id like to ask you if there is any option how to reduce duplication, make it smater, cleaver, cleaner. I use pure HTML/CSS/JS. I don't know if it is possible but i'd like to avoid have multiple hardcoded buttons with multiple examples on the 1 page.

<div >
        <div >
          $${{ - b \pm \sqrt {{b^2} - 4ac} } \over {2a}}$$
        </div>
        <button type="button"  onClick="toggle()">
          Toggle
        </button>
        <div id="result" >this is result</div>
      </div>
      <!--NEW EXAMPLE -->
      <div >
        <div >
          $${{ - b \pm \sqrt {{b^2} - 8ac} } \over {2a}}$$
        </div>
        <button type="button"  onClick="toggle()">
          Toggle
        </button>
        <div id="result" >this is result</div>
      </div>

<script>
    function toggle() {
      let x = document.getElementById("result");

      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>

Idk what to expect. In React i'd use .map function and in the and i'd fill up only diferent examples. Is it possible something "similar" in HTML/JS only?

CodePudding user response：

It'd be cleaner if you did it only using js as dudung recommended. But here's something else you can do, this answer is similar to Dhana D's, but it has the toggle functionality that you wanted. You can simply create arrays of object to store questions, answers and toggle states and Iterate through them and create "html string" and append to the container hardcoded in our html using innerHTML property.

Toggle functionality: As you can see we're creating unique ids for result tags using index and we're also passing the same index while calling the toggle function, the toggle function uses the index "param" to form the id of the result tag and changes the result tag's display property.

const examples = [
{
 que: "Question - 1",
 show: false,
 ans: "this is the result 1",
},
{
 que: "Question - 2",
 show: false,
 ans: "this is the result 2",
},
{
 que: "Question 3",
 show: false,
 ans: "this is the result 3",
}
]

const container = document.querySelector("#examples-container")

examples.forEach((ex, i) => {
    const example = 
  `<div >
      <div >
          ${ex.que}
      </div>
      <button type="button"  onclick="toggle(${i})">
          Toggle
       </button>
       <div id="result_${i}" style="display:${ex.show? 'block': 'none'}" >${ex.ans}</div>
      </div>
   </div>`
      container.innerHTML  = example
})

function toggle(i) {
  const result = document.querySelector("#result_" i)
  result.style.display = examples[i].show? "none": "block"
  examples[i].show = !examples[i].show
}

<div id="examples-container"></div>

CodePudding user response：

In plain JavaScript, you can create a container and utilize innerHTML. For example:

var cont = document.querySelector('.container');

cont.innerHTML = "";

arr = [4, 8, 16, 32, 64];

arr.forEach(e => {
  cont.innerHTML  = `<div >
        <div >
          $$ - b \pm \sqrt {{b^2} - ${e}ac} } \over 2a$$
        </div>
        <button type="button"  onClick="toggle()">
          Toggle
        </button>
        <div id="result" >this is result</div>
      </div>`
});

.card {
  border: 1px solid #000;
  padding: 10px 20px;
}

<body>
  <div ></div>
</body>

What if you want to add element in the middle of existing elements hardcoded on HTML? You can use insertAdjacentHTML. Reference: https://www.delftstack.com/howto/javascript/javascript-append-html/