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

一尘不染

在 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>

阅读 113

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