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

【问题标题】：Display in html an element from an array in javascript在 html 中显示 javascript 中数组中的元素
【发布时间】：2022-07-26 01:28:00
【问题描述】：

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

【问题讨论】：

听起来您正在寻找更高级的 JavaScript 框架，例如 React、Angular 或 Vue。您可以开始学习任何介绍性教程。如果您想自己构建一些东西，则需要构建该功能，因为您建议的功能本身并不可用。

标签： javascript html arrays function

【解决方案1】：

我同意@David。另外，即使你可以（可怕地）在解析<p>标签时编写soluzioni[0]的实际内容，一旦你执行函数calcolo，它也不会自动更新，你也会得到意大利面条代码.

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

否则，在 vanilla JS 中，正确的方法是使用对节点的引用（使用诸如 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>

【讨论】：