JavaScript if and else if statement not working properly

Question

I have an input type='number' and a button to indicate function testfun() and an if statement in the function that is supposed to validate that the number is within range and provide clear instructions.

when I enter a number within the range of 1-1000 it works fine.

when I enter a number that is <1 or >1000 the <div><p> does not populate.

HTML:

<div class="preT" id="preT">
  <form>
    <label for="voipLines">VoIP Lines</label>
    <input type="number" id="voipLines" name="voipLines" requiered min="1" max="1000" value="1">
  </form>
  <div class="voipbutton" id="voipbutton">
    <button class="button" onclick="testfun()">Test Clicker</button>
  </div>
</div>
<div id="duringT">
  <p Id="clickerTest"></p>
  <div Id="prBar" data-label=""></div>
  <div id="canvascon"></div>
</div>

JS:

function testfun() { //used in HTML
  var voip = document.getElementById("voipLines").value;
  if (voip < 1) { //voiplines verification 
    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  } else if (voip > 1000) {
    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  } else {
    var voipGuide = document.getElementById("clickerTest").innerHTML = '<h2>Clicker Successful!!!</h2>\
    <p>Please click the link below to start <b>' + voip + ' test</b></p>\
    <p>To change the amount of tests to run <a href= "">Click Here</a></p>';
  document.getElementById('preT').style.display = 'none';
    document.getElementById("canvascon").innerHTML = '<div id="canvas-container"><canvas id="canvs3" style="background-color:#F0F0F0; ">Your browser does not support the HTML5 canvas tag.</canvas><br><br></div>';
    voipsims();
    bootfun();
  }
}

You also have an error with your parenthesis that's evident in F12 console tab. Quick fix would be to change <a href= ``> to <a href= ""> — devlin carnate
– devlin carnate, Commented Jun 10, 2020 at 21:12
And there is no element with id = canvascon (also evident from F12 console tab) — devlin carnate
– devlin carnate, Commented Jun 10, 2020 at 21:13
thanks, @devlin I was working on that and got restricted and forgot about that part of the syntax completely lol — mastaSabin
– mastaSabin, Commented Jun 10, 2020 at 21:15

siralexsir88 · Accepted Answer · 2020-06-10 21:07:41Z

2

In the else body, you use innerHTML, but in the if and else if you use innerhtml. It should be innerHTML

answered Jun 10, 2020 at 21:07

siralexsir88

4181 gold badge4 silver badges14 bronze badges

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

Comments

Riza Khan · Accepted Answer · 2020-06-10 21:28:00Z

2

Here is a working version in Codepen. https://codepen.io/riza-khan/pen/YzwwRLQ?editors=1011

There were some bad practices in your code. Namely, it is better to use eventListeners then to call a function via a onclick in the HTML tags.

Secondly, there were some spelling mistakes, which are corrected in the codepen version.

With the corrections, the IF/ELSEIF block wouldn't even be required but I left it there anyway.

<div class="preT" id="preT">
    <form>
        <label for="voipLines">VoIP Lines</label>
        <input type="number" id="voipLines" name="voipLines" required min="1" max="1000" value="1">
    </form>
    <div class="voipbutton" id="voipbutton">
        <button class="button">Test Clicker</button>
    </div>
</div>
<div id="duringT">
    <p Id="clickerTest"></p>
</div>

document.querySelector(".button").addEventListener("click", () => {
    let voip = document.querySelector("#voipLines").value;
    if (voip < 1) {
        document.querySelector("#clickerTest").innerHTML =
            "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
    } else if (voip > 1000) {
        document.querySelector("#clickerTest").innerHTML =
            "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
    } else {
        var voipGuide = (document.getElementById("clickerTest").innerHTML =
            "<h2>Clicker Successful!!!</h2>\
    <p>Please click the link below to start <b>" +
            voip +
            ' test</b></p>\
    <p>To change the amount of tests to run <a href= "">Click Here</a></p>');
        document.getElementById("preT").style.display = "none";
        document.getElementById("canvascon").innerHTML =
            '<div id="canvas-container"><canvas id="canvs3" style="background-color:#F0F0F0; ">Your browser does not support the HTML5 canvas tag.</canvas><br><br></div>';
        voipsims();
        bootfun();
    }
});

answered Jun 10, 2020 at 21:28

Riza Khan

3,2385 gold badges30 silver badges63 bronze badges

2 Comments

mastaSabin Over a year ago

currently the webpage that this bit of code is a part of is a training project. I have not played with eventListeners yet would you explain the basic idea of how they work or provide a link to inform me. OR ill just figure it out on my own I guess but a little bit of guidance from a different perspective would be nice.

Riza Khan Over a year ago

Last response but if all else fails visit MDN. For example: developer.mozilla.org/en-US/docs/Web/Events

Lewis · Accepted Answer · 2020-06-10 21:33:56Z

There was a typo: the property is .innerHTML, not .innerhtml. Working example:

function testfun() { //used in HTML
  var voip = document.getElementById("voipLines").value,
      clickerTest = document.getElementById("clickerTest");
        
  if (voip < 1) //voiplines verification 
    return clickerTest.innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";
  
  else if (voip > 1000)
    return clickerTest.innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>"; 
  
  else {
    
    var voipGuide = clickerTest.innerHTML = '<h2>Clicker Successful!!!</h2>\
    <p>Please click the link below to start <b>' + voip + ' test</b></p>\
    <p>To change the amount of tests to run <a href= '
    '>Click Here</a></p>';
    document.getElementById('preT').style.display = 'none';
    document.getElementById("canvascon").innerHTML = '<div id="canvas-container"><canvas id="canvs3" style="background-color:#F0F0F0; ">Your browser does not support the HTML5 canvas tag.</canvas><br><br></div>';
    
  }
}

<div class="preT" id="preT">
  <form>
    <label for="voipLines">VoIP Lines</label>
    <input type="number" id="voipLines" name="voipLines" min="1" max="1000" value="1" required>
  </form>
  <div class="voipbutton" id="voipbutton">
    <button class="button" onclick="testfun()">Test Clicker</button>
  </div>
</div>
<div id="duringT">
  <p id="clickerTest"></p>
  <div id="prBar" data-label=""></div>
  <div id="canvascon"></div>
</div>

ry kim · Accepted Answer · 2020-06-10 21:14:43Z

0

I am not sure of this answer, but I think innerhtml should be innerHTML and there shouldn't be spaces between 'if', 'else if', 'else' and "{" and "}". So it should be "

if (voip<1){

...

}else if (voip>1000){

...

}else{

...

} "

There is also a \ after the paragraph ending after the Please click the link... which I think is incorrect.

answered Jun 10, 2020 at 21:14

ry kim

1131 silver badge10 bronze badges

1 Comment

mastaSabin Over a year ago

ill try to remove the spaces but I think iv had statements work under my conditions before. The backslash is something I found out about a few days ago. im still trying to figure it out completely but it basically continues to the next line, organizes the syntax is the purpose I think

Collectives™ on Stack Overflow

JavaScript if and else if statement not working properly

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related