复刻Google Forms时，if语句执行后drop变量返回值异常求助

问题场景 #

正在复刻Google Forms，期望通过下拉选择框选择对应选项后创建新元素，但发现drop变量在执行if语句后返回值与预期不符。

原代码 #

JavaScript代码

function button() {
  var drop = document.getElementById("drop").value;
  console.log(drop);

  if (drop = "radio") {
    const para = document.createElement("button");
    para.innerHTML = "button";
    document.body.appendChild(para);
  } else if (drop = "button") {


  } else {

  }

};

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <title>hi</title>
</head>

<body>
  <h1>Jayesh forms</h1>
  <select id="drop">
    <option>radio</option>
    <option>checkbox</option>
    <option>button</option>
  </select>
  <button id="button" onclick="button()">+</button>
  <p>1</p>
  <script src="js.js"></script>
</body>

</html>

问题根源 #

核心问题是条件判断里误用了赋值运算符=，而非相等比较运算符：

• drop = "radio"是赋值操作，会把"radio"赋值给drop变量，这个表达式的返回值就是"radio"，会被JS视为布尔值true，所以无论下拉选择什么选项，第一个if分支都会执行。
• 第二个else if里的drop = "button"同样是赋值操作，无法起到判断当前选中值的作用。

修正方案 #

将条件判断中的=替换为严格相等运算符===（推荐使用，可避免隐式类型转换带来的意外问题），同时补充各选项对应的创建逻辑：

修正后的JavaScript代码 #

function button() {
  var drop = document.getElementById("drop").value;
  console.log(drop);

  if (drop === "radio") {
    const radioBtn = document.createElement("input");
    radioBtn.type = "radio";
    radioBtn.name = "form-radio";
    radioBtn.id = "new-radio";
    const label = document.createElement("label");
    label.htmlFor = "new-radio";
    label.textContent = "单选框选项";
    document.body.appendChild(radioBtn);
    document.body.appendChild(label);
  } else if (drop === "button") {
    const btn = document.createElement("button");
    btn.innerHTML = "新增按钮";
    document.body.appendChild(btn);
  } else if (drop === "checkbox") {
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = "new-checkbox";
    const label = document.createElement("label");
    label.htmlFor = "new-checkbox";
    label.textContent = "复选框选项";
    document.body.appendChild(checkbox);
    document.body.appendChild(label);
  }
};

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