CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
Student
Student

Reputation: 13

Adding JavaScript calculation function to HTML form

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>

Upvotes: 0

Views: 119

Answers (4)

Soheil
Soheil

Reputation: 101

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.

Upvotes: 0

Ananth A
Ananth A

Reputation: 331

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>

Upvotes: 0

varbrad
varbrad

Reputation: 474

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>

Upvotes: 0

MagicArrowx3
MagicArrowx3

Reputation: 11

Try this: In .js file

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

Upvotes: 1

Related Questions