How do I use a form input number as a Javascript variable?

Question

<form>
  <input type="text" name="" value="">
</form>
//for loop used to calculate balance after payment(x) and interest
// the variable I want defined from the form input box
for(i = 6000; i>=10; i = i * (1+0.2/26)-x){
    var x = 155;
    document.write("Balance " + " $" + i + "<br/><br/>");
}

Answer 1

You could attach a pseudo class in your input element and then get the value inserted like below:

<input type="text" name="" value="" class="js-interest">

<script>
    var ele = document.getElementsByClassName("js-interest")[0];
    var value = parseFloat(ele.value);
</script>

Answer 2

You can try document.getElementById('input_id').value and then use parseInt to get it as an integer, as below:

var x = parseFloat(document.getElementsByName('number_box').value);

Also, the html must look something like this:

<form>
    <input type="text" name="number_box" value="">
</form>

Optionally, instead of document.getElementsByName() you can use document.getElementById() or document.getElementsByClassName() .

Answer 3

Update: If I am not wrong

    for(i = 6000; i>=10; i = i * (1+0.2/26)-x){
       var x = 155;
       document.write("Balance " + " $" + i + "<br/><br/>");
    }

It seems like you are writing to the DOM inside a for loop don't do that calculate your ANS and then write to the DOM.

Also, don't read the data from input inside the loop. (You will be repeatedly reading and writing the data thats not good.)

Your for loop for(i = 6000; i>=10; i = i * (1+0.2/26)-x) is incrementing using some expression i = i * (1+0.2/26)-x (make sure it is bound to the condition and its not making the loop infinite)

You can select the value from the input field using the following code

x = parseInt(document.querySelector('form input[name="my_number"]').value);

document.querySelector it uses CSS style selector. So, to select the input field inside your form. I have added a name to the form as name="my_number"

<input type="text" name="my_number" value="">

now using the css selector form input[name="my_number"] it select the input field inside a form with name "my_number"

The whole Query selector that will return the input element is this,

document.querySelector('form input[name="my_number"]')

now to get the value of the input field you have to read the value property of the input field.

document.querySelector('form input[name="my_number"]').value

This will return your input value as string.

Now, we need to parse that string value to a Integer format.

We do that like this, (using parseInt )

parseInt(document.querySelector('form input[name="my_number"]').value)

I have added you code in a function named calc

  function calc() {
     var x = parseInt(document.querySelector('form input[name="my_number"]').value);

    var ans= calculate_your_value(x);


    document.write("Balance " + " $" + ans + "<br/><br/>");
}

I have fetched the answer from a function named get calculated answer and its good to do this way.

function calculate_your_value(x){
  // calculate the ans the for loop seems buggy
  //for (i = 6000; i >= 10; i = i * (1 + 0.2 / 26) - x) {}

  return x; //dummy ans
}

It is called when you submit the form.

To do that I have added onsubmit='calc()' on your form tag.

<form onsubmit='calc()'>

Additionally, I have added this function that submits the form when you have pressed enter too (Just for fun) :)

document.onkeydown=function(){
    if(window.event.keyCode=='13'){
        calc();
    }
}

It just listens for key down press and check if it is a enter key (keycode is 13)

and calls the same calc function.

 function calc() { var x = parseInt(document.querySelector('form input[name="my_number"]').value); var ans= calculate_your_value(x); document.write("Balance " + " $" + ans + "<br/><br/>"); } document.onkeydown = function() { if (window.event.keyCode == '13') { calc(); } } function calculate_your_value(x){ // calculate the ans the for loop seems buggy //for (i = 6000; i >= 10; i = i * (1 + 0.2 / 26) - x) {} return x; //dummy ans } 

 <form onsubmit='calc()'> <input type="text" name="my_number" value=""> <input type="submit" id="submitbtn" /> </form>