HTML+JavaScript就业推荐表单alert不生效及逻辑优化咨询

现有代码问题梳理 #

• 表单内的按钮默认点击会触发表单提交刷新页面，alert还没执行页面就重载了，所以看不到任何提示
• JavaScript逻辑存在流程中断：只要选中Coding就直接return，后续判断完全不会执行，也无法检测到两个选项同时选中的情况
• 变量声明混乱：重复用var声明add变量，值计算逻辑错误，Coding值为1、Dancing值为2，两个都选的话总和是3，和现有代码判断的add==2完全不匹配
• 语法不完整：末尾的else分支、函数本身都缺少闭合大括号
• 不存在id为error的DOM元素，未选中任何选项时赋值会直接报错

修复实现方案 #

1. HTML部分修改 #

在提交按钮前添加错误提示容器，同时给按钮设置type="button"避免默认提交行为：

<div id="error" style="color:red;text-align:left;margin-bottom:15px"></div>
<button type="button" onclick="checkCheckbox()">
Submit
</button>

同时可以删掉冗余的</input>闭合标签，input是单标签不需要额外闭合。

2. JavaScript逻辑重写 #

优先使用技能列表收集的写法，后续新增技能选项时只需要加少量代码即可，扩展性更强：

function checkCheckbox() {  
  const c = document.getElementById("c");  
  const d = document.getElementById("d");  
  const errorDom = document.getElementById("error");
  // 先清空上次的错误提示
  errorDom.innerText = "";
  // 收集所有选中的技能
  const checkedSkills = [];
  if(c.checked) checkedSkills.push("coding");
  if(d.checked) checkedSkills.push("dancing");
  
  // 未选任何选项的提示
  if(checkedSkills.length === 0) {
    errorDom.innerText = "*请至少选择一项技能";
    return;
  }

  // 根据选中结果输出对应提示
  let tip = "";
  if(checkedSkills.length === 2) {
    tip = "你多才多艺！可以考虑做程序员或者舞蹈从业者";
  } else if (checkedSkills.includes("coding")) {
    tip = "可以考虑从事编程相关的开发岗位";
  } else if (checkedSkills.includes("dancing")) {
    tip = "可以考虑从事舞蹈教学、演出相关的文化行业岗位";
  }
  alert(tip);
}

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