我创建了一个在 javascript 中生成数组的函数。一旦创建了数组,我想在 html 中显示它的一些项目,但是不使用 javascript 中的 document.getElementById()。有没有办法直接在html中从数组中选择一个项目?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Distance calculator</title> <script> let myArray = [5, 7, 9] var soluzioni =[] function calcolo(){ for(let i=0; i<myArray.length; i++){ var y = myArray[i]; var risultato = y*y; soluzioni.push(risultato); document.getElementById('Calcolo').innerHTML =+ soluzioni[0] + "<br>"; } } </script> </head> <body> <div id="posizione"> <button onclick="calcolo();"> calcola</button> </div> <br> <div id="Calcolo"> </div> </body> </html>
我想要类似的东西:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Distance calculator</title> <script> let myArray = [5, 7, 9] var soluzioni =[] function calcolo(){ for(let i=0; i<myArray.length; i++){ var y = myArray[i]; var risultato = y*y; soluzioni.push(risultato); } } </script> </head> <body> <div id="posizione"> <button onclick="calcolo();"> calcola</button> </div> <br> <div id="Calcolo"> <p> soluzioni[0] </p> </div> </body> </html>
我同意@David。另外,即使您可以(可怕地)编写soluzioni[0]解析<p>标签时的实际内容,一旦您执行该功能,它也不会自动更新calcolo,您最终也会得到意大利面条代码。
soluzioni[0]
<p>
calcolo
我强烈建议使用Svelte,因为它完全是“反应式”的;但是@David 提到的框架是一个很好的解决方案。
否则,在 vanilla JS 中,正确的方法是使用对节点的引用(使用方法,例如getElementByIdor querySelector*),并且可能类似于以下代码:
getElementById
querySelector*
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Distance calculator</title> </head> <body> <div id="posizione"> <button> calcola</button> </div> <br> <div id="Calcolo"> <p></p> </div> <script> let myArray = [5, 7, 9]; const calcolo = (arr) => arr.map(y => y * y); let button = document.querySelector("#posizione > button"); let output = document.querySelector("#Calcolo > p"); button.addEventListener("click", () => { let soluzioni = calcolo(myArray); output.textContent = soluzioni[0]; }); </script> </body> </html>