将脚本放入其他函数后按钮文字颜色无法更改的问题

你的代码没法正常工作主要有两个核心问题：

• 函数里硬编码了ID，没用到传入的参数
  比如correct(x)函数里写的是document.getElementById("x")，这里的"x"是固定字符串，不管你传什么参数进去，它都会去找id是x的元素，完全没用到你传入的按钮相关值。

• 调用函数时传的变量未定义
  你写的correct(bt1)里的bt1根本没定义，现代浏览器不会把HTML元素的id自动转为全局变量，所以这里会直接报错。

修复方案（两种可选） #

方案1：直接传按钮的ID字符串 #

把函数改成接收ID字符串，然后用这个字符串去获取目标元素：

function correct(id) {
  document.getElementById(id).style.color = "green";
}

function wrong(id) {
  document.getElementById(id).style.color = "red";
}

function answer() {
  const questionText = document.getElementById("p").innerHTML;
  if (questionText === "question 1") {
    correct("bt1");
    wrong("bt2");
  } else if (questionText === "question 2") {
    correct("bt2");
    wrong("bt1");
  }
}

HTML部分保持不变：

<p id="p">question 1</p>

<button id="bt1" onclick="answer()"> option 1</button>
<button id="bt2" onclick="answer()"> option 2</button>

方案2：直接传按钮元素本身 #

先在函数里获取按钮元素，再直接传给操作函数，函数直接修改元素样式：

function correct(element) {
  element.style.color = "green";
}

function wrong(element) {
  element.style.color = "red";
}

function answer() {
  const bt1 = document.getElementById("bt1");
  const bt2 = document.getElementById("bt2");
  const questionText = document.getElementById("p").innerHTML;
  
  if (questionText === "question 1") {
    correct(bt1);
    wrong(bt2);
  } else if (questionText === "question 2") {
    correct(bt2);
    wrong(bt1);
  }
}

HTML部分无需修改。

额外小提示：判断文本内容时用===严格相等运算符，比==更严谨，能避免一些因类型转换导致的意外问题。

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