从js调用函数，但不起作用

Question

我在表单标签中编写了代码，当用户单击单选按钮时，课程应该出现，并且这些课程与其专业相关， 它工作正常，但是当我放置表单标签时，它不再起作用。 由于PHP，我使用了表单标签。

JavaScript：

<script>
  function cs() {
    if (document.getElementById("cs").checked == true) {
      document.getElementById("isco").style.display = "none";
      document.getElementById("cnco").style.display = "none";
    }
    document.getElementById("csco").style.display = "initial";
  }

  function is() {
    if (document.getElementById("is").checked == true) {
      document.getElementById("csco").style.display = "none";
      document.getElementById("cnco").style.display = "none";
    }
    document.getElementById("isco").style.display = "initial";
  }

  function cn() {
    if (document.getElementById("cn").checked == true) {
      document.getElementById("isco").style.display = "none";
      document.getElementById("csco").style.display = "none";
    }
    document.getElementById("cnco").style.display = "initial";
  }
</script>

div style="background-color: white; text-align: left; padding-left:100px; padding-bottom: 10px">
<br><br><br>
<h3>Sign up</h3>

<form id="sign" name="sign" method="POST" action="sign.php">

  <label for="major">Major:</label>
  <input type="radio" name="major" id="cs" value="cs" onclick="cs()">CS
  <input type="radio" name="major" id="is" value="is" onclick="is()">IS
  <input type="radio" name="major" id="cn" value="cn" onclick="cn()">CN

  <div style="display:  none;" id="csco">
    <label for="courses">Select the courses you finished or takes currently: </label>
    <br><br>
    <input type="checkbox" name="courses" value="pr">Professional Responsibility
    <input type="checkbox" name="courses" value="se">Software Engineering
    <input type="checkbox" name="courses" value="alg">Analysis and Design of Algorithms
    <input type="checkbox" name="courses" value="web">Web-based Systems
    <br>
  </div>
  <div style="display: none;" id="isco">
    <label for="courses">Select the courses you finished or takes currently: </label>
    <br><br>
    <input type="checkbox" name="courses" value="web">Web-based Systems
    <input type="checkbox" name="courses" value="sad">System Analysis and Design(2)
    <br>
  </div>
  <div style="display: none;" id="cnco">
    <label for="courses">Select the courses you finished or takes currently: </label>
    <br><br>
    <input type="checkbox" name="courses" value="np">Introduction to Network Programming.
    <input type="checkbox" name="courses" value="nd">Network Design or Network Simulation and Modeling.
    <br>
  </div>
  <br>

  <button name="sig" id="sig" style="padding: 10px">Sign up</button>

</form>
</div>

有什么办法可以使JavaScript正常工作？

Answer 1

是的，避免直接在html中添加侦听器。始终尝试通过脚本添加它们。

以下代码有效。看起来我是使用
onclick
（在这种情况下，函数名称不带括号）在JS脚本中添加了document.getElementById("elementId").onclick = functionToAssign侦听器。

别忘了从HTML中删除onclick。

您当前的代码不起作用，可能是因为在渲染HTML时，尚未定义函数。

function cs() {
  if (document.getElementById("cs").checked == true) {
    document.getElementById("isco").style.display = "none";
    document.getElementById("cnco").style.display = "none";
  }
  document.getElementById("csco").style.display = "initial";
}
document.getElementById("cs").onclick = cs

function is() {
  if (document.getElementById("is").checked == true) {
    document.getElementById("csco").style.display = "none";
    document.getElementById("cnco").style.display = "none";
  }
  document.getElementById("isco").style.display = "initial";
}
document.getElementById("is").onclick = is

function cn() {
  if (document.getElementById("cn").checked == true) {
    document.getElementById("isco").style.display = "none";
    document.getElementById("csco").style.display = "none";
  }
  document.getElementById("cnco").style.display = "initial";
}
document.getElementById("cn").onclick = cn

<div style="background-color: white; text-align: left; padding-left:100px; padding-bottom: 10px">
<br><br><br>
<h3>Sign up</h3>

<form id="sign" name="sign" method="POST" action="sign.php">

  <label for="major">Major:</label>
  <input type="radio" name="major" id="cs" value="cs">CS
  <input type="radio" name="major" id="is" value="is">IS
  <input type="radio" name="major" id="cn" value="cn">CN


  <div style="display:  none;" id="csco">
    <label for="courses">Select the courses you finished or takes currently: </label>
    <br><br>
    <input type="checkbox" name="courses" value="pr">Professional Responsibility
    <input type="checkbox" name="courses" value="se">Software Engineering
    <input type="checkbox" name="courses" value="alg">Analysis and Design of Algorithms
    <input type="checkbox" name="courses" value="web">Web-based Systems
    <br>
  </div>
  <div style="display: none;" id="isco">
    <label for="courses">Select the courses you finished or takes currently: </label>
    <br><br>
    <input type="checkbox" name="courses" value="web">Web-based Systems
    <input type="checkbox" name="courses" value="sad">System Analysis and Design(2)
    <br>
  </div>
  <div style="display: none;" id="cnco">
    <label for="courses">Select the courses you finished or takes currently: </label>
    <br><br>
    <input type="checkbox" name="courses" value="np">Introduction to Network Programming.
    <input type="checkbox" name="courses" value="nd">Network Design or Network Simulation and Modeling.
    <br>
  </div>
  <br>

  <button name="sig" id="sig" style="padding: 10px">Sign up</button>

</form>
</div>