JavaScript函数startClicked执行后立即终止，添加event.preventDefault()遇新问题

看起来你的问题出在两个核心点上：按钮默认的表单提交行为和未定义变量导致函数报错，我来一步步帮你梳理解决：

问题根源拆解 #

1. 函数执行后立即终止：如果你的按钮嵌套在<form>标签里，浏览器会默认将其识别为表单提交按钮，点击后触发页面刷新——这就导致startClicked刚执行完，页面就被重置了，看起来像是函数“突然终止”。
2. 添加event.preventDefault()后文本无法修改：你在toonVraag函数里用到了vraagTeller.value，但这个变量完全没有定义！浏览器执行到这里会直接抛出错误，中断后续代码执行，所以vraag.innerHTML = "Hello World"根本没机会生效。

修正后的完整代码实现 #

HTML部分（优化元素选择与结构） #

<div>
  <label for="naam">Code: </label>
  <input type="text" id="naam" />
  <!-- 给按钮添加id，方便JS精准定位，同时设置type避免默认提交行为 -->
  <button id="startKnop" disabled>Start</button>
</div>
<div>
  <p id="vraag">Een vraag</p>
  <button id="keuze1" disabled>Keuze1</button>
  <button id="keuze2" disabled>Keuze2</button>
</div>

JavaScript部分（修复变量与事件逻辑） #

// 初始化计数器变量（根据实际需求调整，这里先模拟一个基础结构）
let vraagTeller = { value: 0 };

function init() {
  // 通过id获取按钮，比getElementsByTagName更可靠，避免其他按钮干扰
  let startKnop = document.getElementById("startKnop");
  startKnop.addEventListener("click", startClicked, false);
}

function startClicked(event) {
  // 若按钮在form内，必须阻止默认提交行为；不在form内可省略此行
  event.preventDefault();

  // 启用两个目标按钮
  let knop2 = document.getElementById("keuze1");
  knop2.removeAttribute("disabled");
  let knop3 = document.getElementById("keuze2");
  knop3.removeAttribute("disabled");

  // 调用显示问题的函数
  toonVraag();
}

function toonVraag() {
  let i = vraagTeller.value;
  let vraag = document.getElementById('vraag');
  // 这里可以根据计数动态调整文本，先以Hello World演示
  vraag.innerHTML = `Hello World (当前计数: ${i})`;
}

// 确保页面DOM加载完成后再初始化事件绑定
window.addEventListener('load', init);

关键修改说明 #

• 按钮行为优化：给Start按钮添加id="startKnop"，用getElementById获取元素更精准；如果按钮在<form>内，要么设置type="button"，要么保留event.preventDefault()，彻底避免页面刷新。
• 补全缺失变量：添加vraagTeller的定义，你可以根据实际场景改成输入框引用、数字计数器等，保证函数执行时不会报错。
• DOM加载时机：用window.addEventListener('load', init)触发初始化，确保所有DOM元素加载完成后再绑定事件，避免出现“找不到元素”的问题。

这样修改后，点击Start按钮就能正常启用两个按钮，同时vraag元素的文本也会成功更新为Hello World了！

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