Вызов функций из 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
(имя функции без скобок в этом случае).

Не забудьте удалить 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>