点击按钮修改变量值时出现Unhandled Runtime Error求助

根据你描述的场景和常见的Unhandled Runtime Error情况，分两种场景给出解决方法：

普通JavaScript场景 #

如果是原生JS编写，错误大概率是变量声明方式不对，或者DOM操作逻辑问题：

• 若用const声明marks，直接赋值会报错，改成let声明，同时更新DOM显示：

// 正确代码示例
let marks = 343;
const scoreElement = document.querySelector('h1');
const updateBtn = document.querySelector('button');

updateBtn.addEventListener('click', () => {
  marks = 373;
  scoreElement.textContent = marks;
});

• 额外注意：如果脚本在DOM加载前执行，需要包裹在DOMContentLoaded事件里，避免获取不到元素：

document.addEventListener('DOMContentLoaded', () => {
  let marks = 343;
  const scoreElement = document.querySelector('h1');
  const updateBtn = document.querySelector('button');

  updateBtn.addEventListener('click', () => {
    marks = 373;
    scoreElement.textContent = marks;
  });
});

React框架场景 #

React中状态变量不可直接修改，必须用状态更新函数，这是最常见的报错原因：
错误写法（直接修改state）：

// 错误示例，会触发Runtime Error
const [marks, setMarks] = useState(343);

const handleUpdate = () => {
  marks = 373; // 禁止直接修改state变量
}

正确写法：

import { useState } from 'react';

function ScoreComponent() {
  const [marks, setMarks] = useState(343);

  const handleUpdate = () => {
    setMarks(373); // 使用useState提供的更新函数修改状态
  }

  return (
    <div>
      <h1>{marks}</h1>
      <button onClick={handleUpdate}>更新分数</button>
    </div>
  );
}

export default ScoreComponent;

另外注意：按钮点击事件不要写成onClick={handleUpdate()}，这会导致组件渲染时立即执行函数，应该传函数引用onClick={handleUpdate}。

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