如何将变量从 Javascript 输出到 html？答案

【问题标题】：How do I output a variable from Javascript to html?如何将变量从 Javascript 输出到 html？
【发布时间】：2018-10-25 20:37:06
【问题描述】：

我想使用变量将文本注入 div。这是我的代码的堆栈片段：

tDNA() {
  var dna = prompt("Enter the DNA: ");
}
document.getElementById("dna").innerHTML = "DNA: " + dna;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <src="main.js">
    <div id="dna"></div>
</body>

</html>


function promp

【问题讨论】：

"src" 不是一个元素。您想使用来加载您的 main.js 文件。您需要做一些事情来实际触发 promptDNA 函数，并且还需要将 document.getElementById.... 移动到该函数中。
您的 dna 被超出范围使用
见stackoverflow.com/questions/40858456/…
此外，您应该使用element.textContent 而不是innerHTML。使用innerHTML 进行用户输入是一个 XSS 漏洞。
how to display a javascript var in html body的可能重复

【解决方案1】：

像这样，您必须将数据添加到变量dna在范围内的HTML中，然后实际调用该函数

function promptDNA(){
    var dna = prompt("Enter the DNA: ");
    document.getElementById("dna").textContent = "DNA: " + dna;
}

promptDNA()

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="dna"></div>
    <script src="main.js"></script>
</body>
</html>

另外，您的脚本导入不正确。

【讨论】：

【解决方案2】：

你可以试试这个。

HTML

<html>
<head>
</head>
<body>
<script defer src = "main.js"></script>
    <div id = "dna">
      <p></p>
    </div>
</body>
</html>

JavaScript

function promptDNA(){
    var dna = prompt("Enter the DNA: ");
    d1 = document.querySelector("p");   
    d1.textContent = dna;
}

promptDNA();

【讨论】：

【解决方案3】：

你需要像这样导入你的脚本

<script type="text/javascript" src="main.js"></script>

【讨论】：