html Javascript submit button wont work on first click

Question

I created a page with a yes or no question. If you answer yes and hit the submit button it will direct you to enter.html if you hit no and hit the submit button it will direct you to donotenter.html.

For some reason the submit button does not work on a single click. The user has to double click it in order to work. I was not able to find an answer on anyone else's question.

function check() {
  var c = 0
  var q1 = document.quiz.question1.value;
  if (q1 == "Yes") {

    document.getElementById("myButton").onclick = function() {
      window.location = 'enter.html';
    };
  } else {
    document.getElementById("myButton").onclick = function() {
      window.location = 'donotenter.html';
    };

  }
}

<form name="quiz" id="quiz">
  <div>
    <p> 1. What is the answer to this question:</p>
    <P><input type="radio" name="question1" value="Yes">A. Yes</P>
    <P><input type="radio" name="question1" value="No">B. NO</P>
  </div>
  <input type="button" name="" value="Submit" id="myButton" onclick="check()">
</form>

Your first click calls your function which then sets up the other event hanlders, which you don't even need. — j08691
– j08691, Commented Jul 20, 2020 at 15:23

David · Accepted Answer · 2020-07-20 15:22:58Z

Because the first click doesn't actually redirect the user. The first click does this:

document.getElementById("myButton").onclick = function () {
    window.location = 'enter.html';
};

It attaches a new click handler, which will (on the next click) redirect the user.

Instead of attaching the click handler, just perform the redirect:

function check(){
    var q1 = document.quiz.question1.value;
    if(q1 == "Yes") {
        window.location = 'enter.html';
    } else {
        window.location = 'donotenter.html';
    }
}

Alternatively, you can attach the click handler in this way, but put all of your logic within that handler and remove the onclick attribute from the button:

<input type="button" name="" value="Submit" id="myButton">

and:

document.getElementById("myButton").onclick = function () {
    var q1 = document.quiz.question1.value;
    if(q1 == "Yes") {
        window.location = 'enter.html';
    } else {
        window.location = 'donotenter.html';
    }
};

This has the benefit of separating the JavaScript from the HTML. The HTML is just the markup of the display and doesn't indicate what JavaScript logic to invoke, it becomes the job of the JavaScript to target the HTML and apply its logic. (Which makes the HTML more easily re-usable.)

Kamil Z · Accepted Answer · 2020-07-20 15:46:11Z

0

In your case, the redirection is triggered only after the second click, because you set the check function on the first call.

<input type="button" name="" value="Submit" id="myButton" onclick="check()">

In this call, you replace the click handler with a new function that is only called on the second press.

To make your code work as intended by you, you should replace your check function with this one:

function check() {
  var q1 = document.quiz.question1.value;
  if (q1 == "Yes") {
      window.location = 'enter.html';   
  } else {   
      window.location = 'donotenter.html'; 
  }
}

edited Jul 20, 2020 at 15:46

answered Jul 20, 2020 at 15:30

Kamil Z

2011 silver badge13 bronze badges

1 Comment

klajdiziaj930 Over a year ago

Thank yoy for your help!

Tnc Andrei · Accepted Answer · 2020-07-20 16:46:54Z

You can use this

    <!Doctype  html>
    <html>
    <head>
    <title>Quiz</title>
    <link rel="stylesheet" type="text/css" href="quiz.css">
    <script type="text/javascript" src="quiz.js"></script>
    </head>
    <body>
        <form name="quiz" id="quiz">
            <div>
              <p> 1. What is the answer to this question:</p> 
              <p><input type="radio"name="question1" value="Yes">A. Yes</p>
              <p><input type="radio"name="question1" value="No">B. NO</p>
            </div>
            <input type="button" name="" value="Submit" id="myButton" onclick="check()">
        </form>
        <script>
            function check(){
                var c = 0; 
                var q1 = document.quiz.question1.value;
    
                if(q1 === "Yes") {
                   window.location = 'enter.html';
                } else if(q1 === ""){
                  alert('Please Choose Select Input First!');
                } else {
                   window.location = 'donotenter.html';
                }
            }
        </script>
    </body>
    </html

Collectives™ on Stack Overflow

html Javascript submit button wont work on first click

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related