JavaScript按钮点击跳转页面问题：背景色校验后无法跳转

你的跳转功能失效主要是几个细节问题导致的，我给你逐一拆解并提供修复方案：

1. 最致命的拼写错误 #

你在submit()函数里把颜色名chartreuse拼成了charteuse（少了一个字母r）！这个低级错误直接让条件判断永远不成立，自然不会执行跳转逻辑，先把这个拼写修正过来。

2. getComputedStyle的颜色格式坑 #

当你用getComputedStyle(btn).backgroundColor获取颜色时，浏览器返回的不是颜色名称，而是RGB格式的字符串（比如rgb(127, 255, 0)，这是chartreuse对应的标准RGB值），所以直接和"chartreuse"对比肯定不相等。如果坚持用这个方法判断，需要对比对应的RGB值：

if (getComputedStyle(btn).backgroundColor === "rgb(127, 255, 0)") {
  window.location.href = "page_2.html";
}

3. btn.style.backgroundColor的局限性 #

btn.style.backgroundColor只能读取通过JS或内联样式直接设置的颜色值，如果按钮样式来自CSS类，这个方法就拿不到值。不过你的代码里是通过JS设置的内联样式，修复拼写后这个判断能生效，但更推荐用更可靠的方式——用CSS类标记按钮状态。

更健壮的优化方案：用类管理按钮状态 #

对比颜色值容易受浏览器格式、拼写影响，更好的方式是给按钮添加/移除类来标记是否可跳转，同时完善checkbox的交互逻辑（你原来的输入框默认隐藏，用户没法输入手机号）：

修改后的back_end.js代码： #

// 绑定checkbox事件，控制手机号输入框的显示/隐藏
document.getElementById("cb2").addEventListener("change", function() {
  const phInput = document.getElementById("ph_number");
  phInput.style.visibility = this.checked ? "visible" : "hidden";
});

function hovar() {
  const phone = document.getElementById("ph_number").value;
  const btn = document.getElementById("button");
  
  if (phone.length !== 10) {
    btn.style.backgroundColor = "lightsalmon";
    btn.classList.remove("can-submit"); // 移除可提交标记
  } else {
    btn.style.backgroundColor = "chartreuse";
    btn.style.color = "black";
    btn.classList.add("can-submit"); // 添加可提交标记
  }
}

function submit() {
  const btn = document.getElementById("button");
  // 通过类判断是否允许跳转，比颜色判断更可靠
  if (btn.classList.contains("can-submit")) {
    window.location.href = "page_2.html";
  }
}

测试验证步骤 #

1. 先修正拼写错误（如果用原颜色判断方式）
2. 刷新页面后勾选"Mobile No"的checkbox，让手机号输入框显示
3. 输入10位手机号，鼠标移开按钮触发hovar()，确认按钮变为chartreuse色
4. 点击按钮，就能正常跳转到page_2.html了

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