javascript - 从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 工作吗？

标签： javascriptformsfunction

Answer 1

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

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

不要忘记onclick从 HTML 中删除。

您当前的代码不起作用可能是因为在呈现 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>