JS乘法应用问题：事件监听器内console.log及scoreEl更新失效

问题1：点击事件内console.log无输出 #

核心原因是你的按钮在<form>标签里，默认是type="submit"类型，点击后会触发表单的默认提交行为，页面瞬间刷新——这就导致console.log的内容还没来得及在控制台显示，页面就重新加载了，自然看不到调试信息。

解决办法二选一：

• 在点击事件函数里加一行event.preventDefault()，阻止表单默认提交：

  btnEl.addEventListener("click", function(event){
      event.preventDefault(); // 阻止表单提交刷新页面
      // 后续代码不变
  });
  

• 给按钮添加type="button"属性，明确它是普通按钮，不会触发表单提交：

  <button class="btn" type="button">提交</button>
  

问题2：scoreEl无法实时更新 #

现在的问题有两个层面：

1. 页面刷新会重置所有DOM状态，就算你在事件里更新了scoreEl，刷新后也会回到初始化时的状态；
2. 你把更新scoreEl的代码注释掉并移到了函数外，函数外的代码只会在页面加载时执行一次，点击按钮后不会自动重新运行。

解决步骤：

1. 先解决上面的表单刷新问题；
2. 把注释掉的scoreEl.textContent = "Score : " + score放回点击事件函数内，放在更新score和存储到localStorage之后，确保每次点击都能实时更新DOM。

修改后的完整代码 #

const scoreEl = document.querySelector(".score");
const questionEl = document.querySelector(".question");
const inputEl = document.querySelector("input");
const formEl = document.getElementById("form");
const btnEl = document.querySelector(".btn");

let score = JSON.parse(localStorage.getItem("score")) || 0;

let num1 = Math.floor(Math.random()*10);
let num2 = Math.floor(Math.random()*10);
let correctAnswer = num1 * num2;

questionEl.textContent = `What is ${num1} multiply by ${num2}?`; // 修正拼写错误：mutiply → multiply

btnEl.addEventListener("click", function(event){
    event.preventDefault(); // 阻止表单提交刷新页面

    const userAnswer = inputEl.value;
    console.log(userAnswer); // 现在能正常输出调试内容

    if (correctAnswer === parseInt(userAnswer)){
        score += 1;
    } else {
        score -= 1;
    }

    localStorage.setItem("score", JSON.stringify(score));
    scoreEl.textContent = "Score : " + score; // 实时更新分数显示

    // 可选优化：答对或答错后生成新题目
    num1 = Math.floor(Math.random()*10);
    num2 = Math.floor(Math.random()*10);
    correctAnswer = num1 * num2;
    questionEl.textContent = `What is ${num1} multiply by ${num2}?`;
    inputEl.value = ""; // 清空输入框，方便下一次答题
});

scoreEl.textContent = "Score : " + score;

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