时间戳

首页 > 解决方案 > Javascript 函数无法更新 html 中的值（跨度 id）

javascript - Javascript 函数无法更新 html 中的值（跨度 id）

问题描述

我正在尝试遵循关于 javascript 的一个非常基本的教程，并且我知道我过去曾有过与这项工作类似的代码，但由于某种原因，以下函数无法更新 html 中调用的部分<span id="current-result">，见下文：

在 app.js 中：

let currentResult = 1;
currentResult = currentResult + 10;

outputResult(currentResult,'');
alert(currentResult);

const currentResultOutput = document.getElementById('current-result');
const currentCalculationOutput = document.getElementById('current-calculation');

function outputResult(result, text) {
  currentResultOutput.textContent = result;
  currentCalculationOutput.textContent = text;
}

在 index.html 中：

<body>

<script src="assets/scripts/vendor.js"></script>
<script src="assets/scripts/app.js"></script>

<section id="results">
  <h2 id="current-calculation">0</h2>
  <h2>Result: <span id="current-result">0</span></h2>
</section>

</body>

我还注意到，在进行更改后，保存所有各种 .js 和 .html 文件并在浏览器上刷新，它只是在本地打开 .html 文件，并非所有内容都会更新。例如，如果我直接在 html 中将 0 更改为 10。我在visual studio中这样做并使用firefox作为浏览器打开html文件，尽管我也检查了chrome。

标签： javascripthtml

解决方案

您甚至在 javascript 初始化常量之前就尝试访问该元素。查看javascript中提升的概念。此外，脚本标签应该在末尾，或者您可以使用 window.onload 事件处理程序来初始化您的 JavaScript 代码。

let currentResult = 1;
currentResult = currentResult + 10;

const currentResultOutput = document.getElementById('current-result');
const currentCalculationOutput = document.getElementById('current-calculation');

function outputResult(result, text) {
  currentResultOutput.textContent = result;
  currentCalculationOutput.textContent = text;
}

outputResult(currentResult, '');
alert(currentResult);
<section id="results">
  <h2 id="current-calculation">0</h2>
  <h2>Result: <span id="current-result">0</span></h2>
</section>

<script src="assets/scripts/vendor.js"></script>
<script src="assets/scripts/app.js"></script>

推荐阅读