如何将JavaScript中的变量输出到HTML页面中？

我看到你想通过弹窗获取DNA序列，再把内容注入到指定的div元素里，现在你的代码有几个小问题，我帮你一一修正：

先修正HTML部分的错误 #

你的脚本引用标签写错了，应该用<script>标签而非<src>，另外建议把脚本放在</body>标签前，确保DOM元素加载完成后再执行JS代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="dna"></div>
  <!-- 修正脚本标签的写法与位置 -->
  <script src="main.js"></script>
</body>
</html>

再解决JavaScript的问题 #

你的JS代码有两个核心问题：

1. 定义了tDNA()函数但没有调用，导致弹窗根本不会触发；
2. dna是函数内部的局部变量，外部代码无法访问，直接在函数外赋值会报错dna is not defined。

推荐的修正方案（模块化写法，减少全局变量） #

function tDNA() {
  var dna = prompt("Enter the DNA: ");
  // 在函数内部直接完成赋值，确保能访问到局部变量dna
  document.getElementById("dna").innerHTML = "DNA: " + dna;
}

// 调用函数，触发弹窗获取输入
tDNA();

可选方案（使用全局变量） #

如果你需要在函数外部也能使用dna变量，可以把它声明为全局变量：

var dna; // 声明全局变量
function tDNA() {
  dna = prompt("Enter the DNA: ");
}

tDNA(); // 先调用函数获取输入
document.getElementById("dna").innerHTML = "DNA: " + dna;

优化体验：处理用户取消输入的情况 #

如果用户点击弹窗的“取消”按钮，prompt会返回null，可以添加判断处理这种场景：

function tDNA() {
  var dna = prompt("Enter the DNA: ");
  if (dna !== null) {
    document.getElementById("dna").innerHTML = "DNA: " + dna;
  } else {
    document.getElementById("dna").innerHTML = "你取消了DNA序列输入";
  }
}

tDNA();

内容的提问来源于stack exchange，提问作者AhPawLow