JS onclick event is not triggered

Question

Trying to make a question and answer program which shows question 2 once user presses "next question" button. I have provided the HTML, javascript and style.css file to show my work. The problem isn't with the code going visible but clicking button does nothing

My code:

function question2() {
  document.getElementById("Question2_visible").style.visibility =
    "visible";
}

#Question2_visible {
  visibility: hidden;
}

<!DOCTYPE html>
<html>

<head>

  <title>Welcome!</title>
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <script src="main.js"></script>

</head>


<body>
  <h1>Answer these questions:</h1>


  <form id="quiz" name="quiz">


    <p class="questions">What is your name?</p>
    <input id="textbox" type="text" name="question1">
    <input id="button" type="button" value="Next Question pls!" onclick=" question2();">

    <div id="Question2_visible">
      <p class="questions">What is your age??</p>
      <input type="radio" id="mc" name="question2" value="<18"> more
      <br>
      <input type="radio" id="mc" name="question2" value=">18"> less
      <br>
    </div>

  </form>

</body>

</html>

Jan Turoň · Accepted Answer · 2019-05-05 13:50:10Z

2

Your name="question2" interferes with the question2 function.

If you have name conflict, call the function on window object:

onclick="window.question2()"

edited May 5, 2019 at 13:50

answered May 5, 2019 at 13:44

Jan Turoň

33.1k24 gold badges139 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS onclick event is not triggered

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related