Javascript wird nicht angezeigt

Question

Ich bin neu in JavaScript. Ich habe dieses HTML-Formular erstellt, das eine JS-Funktion aufruft. Die Funktion sollte eine einfache Berechnung durchführen und den Gesamtwert mithilfe von innerHTML an den HTML-Code zurückgeben, aber aus irgendeinem Grund funktioniert sie nicht. Kann jemand bitte helfen, zu finden, was mit ihm falsch ist? Tks!

<form id="inputInfo" name="inputInfo"> 

    <span> Insert a value </span><br/> 
    <input type="number" id="value"> <br/> 
    <button id="send" type="submit" class="button" onclick="calculate()"> <span> Send </span></button> 

    <!--output from javascript--> 
    <p id="output1"> </p> 
    <p id="output2"> </p> 
    <p id="output3"> </p> 

</form> 

    //** Function below is into a .js file **// 

function calculate() { 

var value = document.getElementById("value"); 
var commission; 
var finalValue; 
var message; 

if(value <= 0){ 
    commission = 0; 
    finalValue = 0; 
    message = "* Value is wrong! *"; 

} else { 
    commission = value < 250 ? 25 : (value * 0.1); 
    finalValue = value + commission; 
    message = ""; 

    } 

document.getElementById("output1").value.innerHTML = finalValue; 
document.getElementById("output2").value.innerHTML = commission; 
document.getElementById("output3").innerHTML = message; 
} 

Answer 1

Die Linie var value = document.getElementById("value");, die Sie zugreifen, nur das DOM des Eingangs. Sie müssen .value tun, um tatsächlich den "Wert" des Eingangs zu erhalten:

var value = document.getElementById("value").value;

Was die Ausgangsteile:

document.getElementById("output1").value.innerHTML = finalValue; document.getElementById("output2").value.innerHTML = commission; document.getElementById("output3").innerHTML = message;

Entfernen Sie die .value und verwenden Sie nur .innerHTML für diese.

Wie oben, greifen Sie auf das DIM mit document.getElementById("output1") zu, und Sie legen den innerHTML Wert fest.

Vollcodebeispiel: https://jsfiddle.net/u87a7e6b/

<form id="inputInfo" name="inputInfo"> 

    <span> Insert a value </span> 
    <br/> 
    <input type="number" id="value"> 
    <br/> 
    <button id="send" type="button" class="button" onclick="calculate()"> <span> Send </span></button> 

    <!--output from javascript--> 
    <p id="output1"> </p> 
    <p id="output2"> </p> 
    <p id="output3"> </p> 

</form> 

<script> 
function calculate() { 
    var value = document.getElementById("value").value; 
    var commission; 
    var finalValue; 
    var message; 

    if (value <= 0) { 
    commission = 0; 
    finalValue = 0; 
    message = "* Value is wrong! *"; 

    } else { 
    commission = value < 250 ? 25 : (value * 0.1); 
    finalValue = value + commission; 
    message = ""; 
    } 

    document.getElementById("output1").innerHTML = finalValue; 
    document.getElementById("output2").innerHTML = commission; 
    document.getElementById("output3").innerHTML = message; 
} 
</script> 

Answer 2

anzumerken, dass DOM Zugriff nach der Korrektur, die Variable value den String-Wert von Text enthält, in das Eingangselement eingegeben. Es muss in eine Zahl für Addition konvertiert werden, um Zahlen zusammenzufügen, anstatt sie als Strings zu verketten. Eine Lösung ist die Linie

if (value <= 0) { 

mit diesen beiden

value = parseFloat(value); 
    if(value <= 0 || isNaN(value) { 

Answer 3

Sie ersetzen müssen eine Zeile hinzufügen:

value = parseInt(value); 

Andernfalls kann JavaScript behandeln den „Wert“ als eine Art Zeichenfolge.

Hier ist der vollständige Code

function calculate() { 
 
    var value = document.getElementById("value").value; 
 

 
    value = parseInt(value); 
 
    var commission; 
 
    var finalValue; 
 
    var message; 
 

 
    if (value <= 0) { 
 
    commission = 0; 
 
    finalValue = 0; 
 
    message = "* Value is wrong! *"; 
 

 
    } else { 
 
    commission = value < 250 ? 25 : (value * 0.1); 
 
    finalValue = value + commission; 
 
    message = ""; 
 
    } 
 

 
    document.getElementById("output1").innerHTML = finalValue; 
 
    document.getElementById("output2").innerHTML = commission; 
 
    document.getElementById("output3").innerHTML = message; 
 
}

<form id="inputInfo" name="inputInfo"> 
 

 
    <span> Insert a value </span> 
 
    <br> 
 
    <input type="number" id="value"> 
 
    <br> 
 
    <button id="send" type="button" class="button" onclick="calculate()"> <span> Send </span></button> 
 

 
    <!--output from javascript--> 
 
    <p id="output1"> </p> 
 
    <p id="output2"> </p> 
 
    <p id="output3"> </p> 
 

 
</form>