JavaScriptが表示されません

Question

JavaScriptを初めて使っています。 JS関数を呼び出すhtmlフォームを作成しました。この関数は単純な計算を行い、innerHTMLを使ってHTMLに合計値を返すべきですが、何らかの理由でそれが機能しません。 誰かが間違っているものを見つけるのを助けることができますか？ 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

行var value = document.getElementById("value");は、入力のDOMにのみアクセスしています。あなたは、実際には入力の "価値" を得るために.valueを実行する必要があります。

出力部については

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

：

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

.valueを削除しますこれには.innerHTMLを使用してください。

上記と同様に、document.getElementById("output1")でDIMにアクセスし、innerHTMLの値を設定します。

完全なコードサンプル：DOMアクセスを補正した後、変数value入力要素に入力されたテキストの文字列の値が含まれていることを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

注意。文字列として連結するのではなく、数字を一緒に追加するためには、加算のための数値に変換する必要があります。そうでない場合はJavaScriptがの種類として「価値」を扱うこと

value = parseInt(value); 

：一つの解決策は、ラインにあなたが行を追加する必要があり、これらの2

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

Answer 3

と

if (value <= 0) { 

を交換することです文字列。

はここで完全なコード

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>