Wie verwende ich eine Formulareingabe als 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

Sie könnten eine Pseudo-Klasse in Ihrem Eingangselement befestigen und dann den Wert wie unten eingefügt erhalten:

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

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

Answer 2

Sie können document.getElementById('input_id').value versuchen und dann parseInt verwenden Sie es als eine ganze Zahl zu erhalten, wie unten :

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

Außerdem muss die html wie folgt aussehen:

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

Optional können Sie statt document.getElementsByName()document.getElementById() oder document.getElementsByClassName() verwenden.

Answer 3

Update: Wenn ich nicht falsch bin

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

Es scheint, wie Sie auf das DOM innerhalb einer for-Schleife schreiben, das nicht tun, dass Ihre ANS berechnen und dann auf das DOM zu schreiben.

Lesen Sie auch nicht die Daten von der Eingabe innerhalb der Schleife. (Sie werden wiederholt das Lesen und Schreiben der Daten, das ist nicht gut.)

Ihre for-Schleife for(i = 6000; i>=10; i = i * (1+0.2/26)-x) wird mit einigen Ausdruck Inkrementieren i = i * (1+0.2/26)-x (sicherzustellen, dass es an die Bedingung gebunden ist, und es ist nicht so dass die Schleife unendlich)

Sie können den Wert aus dem Eingabefeld wählen Sie den folgenden Code

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

document.querySelector es verwendet CSS-stil~~POS=TRUNC verwenden. Also, um das Eingabefeld in Ihrem Formular auszuwählen. Ich habe einen Namen in das Formular als name="my_number"

hinzugefügt <input type="text" name="my_number" value="">

jetzt den CSS-Selektor form input[name="my_number"] es das Eingabefeld "my_number"

Die ganze Abfrage Wähler in einem Formular mit dem Namen auswählen, der das Eingangselement zurückkehren dies ist,

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

nun den Wert des Eingabefeldes bekommen Sie denlesenEigenschaft des Eingabefeldes.

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

Dies wird Ihren Eingabewert als String zurück.

Jetzt müssen wir diesen Zeichenfolgenwert zu einem Integer-Format analysieren.

Wir tun das wie folgt aus (mit parseInt)

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

Ich habe Sie Code in eine Funktion hinzugefügt namens 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/>"); 
} 

Ich habe die Antwort von einer Funktion namens get geholt berechnete Antwort und es ist gut, diesen Weg zu gehen.

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 
} 

Es wird aufgerufen, wenn Sie das Formular absenden.

Dazu habe ich onsubmit='calc()' auf Ihrem Formular-Tag hinzugefügt.

<form onsubmit='calc()'>

Zusätzlich habe ich diese Funktion hinzugefügt, die das Formular ausfüllt, wenn Sie zu gedrückt haben, melden Sie (Just for fun) :)

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

es nur für Schlüssel nach unten drücken hört und prüfen, ob es ist eine Eingabetaste (Schlüsselcode ist 13)

und ruft die gleiche calc Funktion auf.

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>