小编典典

在 html 中显示 javascript 中数组中的元素

javascript

我创建了一个在 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>

阅读 160

收藏
2022-07-26

共1个答案

小编典典

我同意@David。另外,即使您可以(可怕地)编写soluzioni[0]解析<p>标签时的实际内容,一旦您执行该功能,它也不会自动更新calcolo,您最终也会得到意大利面条代码。

我强烈建议使用Svelte,因为它完全是“反应式”的;但是@David 提到的框架是一个很好的解决方案。

否则,在 vanilla JS 中,正确的方法是使用对节点的引用(使用方法,例如getElementByIdor 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>
2022-07-26