While Loop Input Issue

Question

I am trying to make a program that takes numbers from the user until they input a 0, the output how many positive and negative numbers were input, while also telling the user whether the number they input was positive, negative, or zero, however, when I use it, it crashes the webpage immediately if anything but a 0 is input. So I was wondering where this issue would be coming from and how I could resolve it.

JS:

var pos = 0;
var neg = 0;
var inp = 1;

function interpreter() {

  while (inp != 0) {

    inp = (document.getElementById("number"));

    if (inp < 0) {
      document.getElementById("output1").innerHTML = "Input is: negative";
      neg += 1;
    } else if (inp > 0) {
      document.getElementById("output1").innerHTML = "Input is: positive";
      pos += 1;
    } else {
      document.getElementById("output1").innerHTML = "Input is: zero";
      document.getElementById("output2").innerHTML = pos + " positive numbers were inputted";
      document.getElementById("output3").innerHTML = neg + " negative numbers were inputted";
    }

  }
}

Where "number" is a text field for input, and the function is called upon the press of a button. Thanks in advance!

how are you calling this code? what is the HTML, can you give a working example snippet reproducing the issue? — Gianmarco
– Gianmarco, Commented Nov 2, 2020 at 22:10
The variable inp will be equal to an HTTMLElement object. I think you want to this to be the value of and HTMLInputElement Object since your conditional tests for in Integer value. — Randy Casburn
– Randy Casburn, Commented Nov 2, 2020 at 22:15
@Gianmarco I am calling it with a button that initiates the function with a number in the text field. The code used for it is as follow: <div class="input"> Input: <input id="number" type="number" min="-32768" max="32768"/> </div> <div class="input"> <button onclick=interpreter()> enter </button> </div> Sorry I do not know how to give a snippet as you asked, I just made an account for stackoverflow today. — Drago5987
– Drago5987, Commented Nov 2, 2020 at 22:30
@MisterJojo any suggestions on how I would go about having that not happen? — Drago5987
– Drago5987, Commented Nov 2, 2020 at 22:33

AKX · Accepted Answer · 2020-11-02 22:22:35Z

You're misunderstanding the event-processing nature of JavaScript.

If you have a while loop like that, you'll never yield control back to the browser itself, to handle user input, etc. You may be looking for something like this -- in addition to the removal of the explicit loop, note how the handling of inp has changed; previously you were comparing strings to numbers.

var pos = 0;
var neg = 0;

function interpret() {
  var inp = parseInt(document.getElementById("number").value);

  if (inp < 0) {
    document.getElementById("output1").innerHTML = "Input is: negative";
    neg += 1;
  } else if (inp > 0) {
    document.getElementById("output1").innerHTML = "Input is: positive";
    pos += 1;
  } else {
    document.getElementById("output1").innerHTML = "Input is: zero";
    document.getElementById("output2").innerHTML =
      pos + " positive numbers were inputted";
    document.getElementById("output3").innerHTML =
      neg + " negative numbers were inputted";
  }
}

<form onsubmit="interpret();event.preventDefault()">
<input id="number">
<input type="submit" value="Interpret value">
</form>
<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>

Mister Jojo · Accepted Answer · 2020-11-02 22:58:58Z

If you really want my suggest:

var pos = 0
  , neg = 0
  ;
document.forms['my-form'].addEventListener('submit',function(evt)
  {
  evt.preventDefault()
  let inp = this.number.valueAsNumber
    {
    if (inp < 0)
      {
      this.out_1.textContent = 'Input is: negative'
      neg++
      } 
    else if (inp > 0)
      {
      this.out_1.textContent = 'Input is: positive'
      pos++
      }
    else
      {
      this.out_1.textContent = 'Input is: zero';
      this.out_2.textContent = pos + ' positive numbers were inputted'
      this.out_3.textContent = neg + ' negative numbers were inputted'
      }
    }
  })

label, button, output { display: block; margin:.4em; }

<form name="my-form">
  <label>
    Input:
    <input name="number" type="number" min="-32768" max="32768" value="1">
  </label>
  <button type="submit"> enter </button>
  <output name="out_1"></output>
  <output name="out_2"></output>
  <output name="out_3"></output>
</form>

Collectives™ on Stack Overflow

While Loop Input Issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related