[英]How can i use corretly Latex notation via forEach function in vanilla JS?
我有數組示例,其中有示例 (ax^2 + 5x +1 = 0)、示例 (ax^2 + 9x +9 = 0) 等。
我有以下邏輯
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;
});
不知何故不起作用我只得到帶有數組值的字符串,沒有別的。 <p>(ax^2 + 5x +1 = 0)</p>
效果很好
不是用每個示例更新container.innerHTML
,而是首先編寫所有示例的 html,並將其添加到容器中:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.