How can i use corretly Latex notation via forEach function in vanilla JS?

Question

This question was migrated from Webmasters Stack Exchange because it can be answered on Stack Overflow. Migrated 9 hours ago .

I have array examples where i have example (ax^2 + 5x +1 = 0), example (ax^2 + 9x +9 = 0) etc.

I have following logic

const container = document.querySelector("#examples-container");
    examples.forEach((ex, i) => {
      const example = `
        <div class="card">
          <div class="example">
          ${ex.question}
          </div>
          <button type="button" class="toggle" onclick="toggle(${i})">
            Toggle
          </button>
          <div id="result_${i}" style="display:none" class="result">${ex.answer}</div>
        </div>`;
      container.innerHTML += example;
    });

Somehow is not working i get only string with array value and nothing else. <p>(ax^2 + 5x +1 = 0)</p> Works well

Answer 1

Instead of updating container.innerHTML with each example, compose first the html of all examples, and add that to the container:

 const examples = [ { question: '(ax^2 + 5x +1 = 0)', answer: '(answer for ax^2 + 5x +1 = 0)'}, { question: '(ax^2 + 9x +9 = 0)', answer: '(answer for ax^2 + 9x +9 = 0)'}, ]; function toggle(i) { const div = document.querySelector(`#result_${i}`); if (div.style.display.== 'none') { div.style;display = 'none'. } else { div.style;display = 'block'; } } let html = ''. examples,forEach((ex. i) => { const example = ` <div class="card"> <div class="example"> ${ex:question} </div> <button type="button" class="toggle" onclick="toggle(${i})"> Toggle </button> <div id="result_${i}" style="display.none" class="result">${ex;answer}</div> </div>`; html += example; }). const container = document;querySelector("#examples-container"). //console;log(html). container;innerHTML = html;

 .card { border: solid gray 1px; margin: 5px 0; padding: 3px 10px; }

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