Adding JavaScript calculation function to HTML form

Question

I am trying to link a basic calculation in an external JavaScript The form is pretty simple and the function just checks to make sure the step number is even. I have reviewed the code many times, but when I enter the numbers and hit submit nothing happens. Any suggestions? Its seems like I just don't have the function and input elements linked correctly. here is the code:

function evenNumbers() {
var evenNumberBtn = document.querySelector("button");
evenNumberBtn.addEventListener("click", evenNumbers);
    var startNumber = parseInt(document.getElementById("startNumber").value);
    var endNumber = parseInt(document.getElementById("endNumber").value);
    var stepNumber = parseInt(document.getElementById("stepNumber").value);
        while (startNumber + stepNumber <= endNumber) {  
            if (startNumber <= endNumber){
                if (startNumber % 2 === 0 && stepNumber % 2 === 0) {
                    startNumber += stepNumber;
                    alert(startNumber);
                } else if (startNumber % 2 !== 0 && stepNumber % 2 === 0) {
                     startNumber += 1 + (stepNumber);
                     alert(startNumber);
                } else {
                     alert("Please enter a positive number for the step value.");
                } 

             } else {
                  alert("Please enter an ending number greater than the start number.");
             }
        }
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <form>
  <label>Start: </label>
  <input type="number" id="startNumber"/><br/>
  <label>End: </label>
  <input type="number" id="endNumber"/><br/>
  <label>Step by:</label>
    <input type="number" id="stepNumber"/><br/>
  <button onclick="evenNumbers();">Submit</button>
    <p></p>
  </form>

<!-- End your code here -->
</body>
</html>

MagicArrowx3 · Accepted Answer · 2017-05-26 22:21:38Z

1

Try this: In .js file

var evenNumberBtn = document.querySelector("button");
evenNumberBtn.addEventListener("click", evenNumbers);

answered May 26, 2017 at 22:21

MagicArrowx3

113 bronze badges

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

1 Comment

Student Over a year ago

I added that, but still does nothing when submit is pressed

varbrad · Accepted Answer · 2017-05-26 22:27:39Z

I have removed your actual code for now, because it has some issues whereby you can end up in an infinite loop (I definitely did and it crashed Chrome 😊).

Your issue was in your HTML

Before

<button onclick("evenNumbers();")>Submit</button>

After

<button onclick="evenNumbers();">Submit</button>

        function evenNumbers() {
        var startNumber = parseInt(document.getElementById("startNumber").value);
        var endNumber = parseInt(document.getElementById("endNumber").value);
        var stepNumber = parseInt(document.getElementById("stepNumber").value);
        alert(startNumber + ',' + endNumber + ',' + stepNumber);
    }

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML5, CSS3 and JavaScript demo</title>
    </head>
    <body>
      <form>
      <label>Start: </label>
      <input type="text" id="startNumber"/><br/>
      <label>End: </label>
      <input type="text" id="endNumber"/><br/>
      <label>Step by:</label>
        <input type="text" id="stepNumber"/><br/>
      <button onclick="evenNumbers();">Submit</button>
        <p></p>
      </form>

    <!-- End your code here -->
    </body>
    </html>

Ananth A · Accepted Answer · 2017-05-26 22:30:54Z

function evenNumbers() {
//var evenNumberBtn = document.querySelector("button");
//evenNumberBtn.addEventListener("click", evenNumbers);
    var startNumber = parseInt(document.getElementById("startNumber").value);
    var endNumber = parseInt(document.getElementById("endNumber").value);
    var stepNumber = parseInt(document.getElementById("stepNumber").value);
        while (startNumber + stepNumber <= endNumber) {  
            if (startNumber <= endNumber){
                if (startNumber % 2 === 0 && stepNumber % 2 === 0) {
                    startNumber += stepNumber;
                    alert(startNumber);
                } else if (startNumber % 2 !== 0 && stepNumber % 2 === 0) {
                     startNumber += 1 + (stepNumber);
                     alert(startNumber);
                } else {
                     alert("Please enter a positive number for the step value.");
                } 

             } else {
                  alert("Please enter an ending number greater than the start number.");
             }
        }
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <form>
  <label>Start: </label>
  <input type="text" id="startNumber"/><br/>
  <label>End: </label>
  <input type="text" id="endNumber"/><br/>
  <label>Step by:</label>
    <input type="text" id="stepNumber"/><br/>
  <button onclick="evenNumbers()">Submit</button>
    <p></p>
  </form>

<!-- End your code here -->
</body>
</html>

Soheil · Accepted Answer · 2017-05-26 22:43:44Z

0

The first two lines inside evenNumber function need to be outside the function, Otherwise your code never reaches inside that block.

$( document ).ready(function() {

  var evenNumberBtn = document.querySelector("button");
  evenNumberBtn.addEventListener("click", evenNumbers);
  function evenNumbers() {
    /*

       your code here

    */
  }    

});

Also the logic inside the evenNumbers seems wrong. You might need to change that too.

answered May 26, 2017 at 22:43

Soheil

1011 silver badge5 bronze badges

Collectives™ on Stack Overflow

Adding JavaScript calculation function to HTML form

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related