如何通过外部JavaScript文件修改HTML页面元素内容？

云上老周

2026-8-4

解决方案

1. 修正JavaScript错误并实现动态说明文本功能

先修复原代码中的无效逻辑，再添加动态更新页面说明的代码：

修改后的JavaScript代码

let num_max;
let valid_input = false;

while(!valid_input) {
    let input = window.prompt("What should the maximum number be?");
    num_max = Number(input);
    // 对输入的小数取整，同时验证有效性
    num_max = Math.round(num_max);
    if(!isNaN(num_max) && num_max > 0) {
        valid_input = true;
    }
}

// 动态更新页面的说明文本
const instructionsEl = document.getElementById("instructions");
instructionsEl.textContent = `Guess a number between 1 and ${num_max}`;

let num = Math.floor(Math.random() * num_max) + 1;
console.log(num);

function do_guess() {
    let guess = Number(document.getElementById("guess").value);
    let message = document.getElementById("message");

    // 调整判断顺序，优先验证输入合法性
    if(isNaN(guess)) {
        message.innerHTML = "That is not a number!";
    } else if(guess < 1 || guess > num_max) {
        message.innerHTML = "That number is not in range, try again.";
    } else if(guess == num) {
        message.innerHTML = "You got it!";
    } else if (guess > num) {
        message.innerHTML = "No, try a lower number.";
    } else {
        message.innerHTML = "No, try a higher number.";
    }
}

2. 关键修改说明

删掉原代码中无效的let val = Math.round(Math.num_max);，修正了Math.num_max的错误写法，且该变量未被使用。
合并重复的prompt逻辑，避免初始时弹出两次提示框。
通过document.getElementById("instructions")获取页面说明元素，使用模板字符串${num_max}插入用户设定的最大值，用textContent修改文本（比innerHTML更安全，适合纯文本场景）。
调整do_guess函数的判断顺序，优先验证输入是否合法，避免后续条件覆盖前面的提示信息。