CODEWITHSUNDEEP
javascript
Drago5987
Drago5987

Reputation: 23

While Loop Input Issue

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!

Upvotes: 2

Views: 61

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22431

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>

Upvotes: 0

AKX
AKX

Reputation: 169416

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>

Upvotes: 1

Related Questions