Javascript還未顯示

我是JavaScript新用戶。我創建了這個調用JS函數的html表單。該函數應該進行簡單的計算，並使用innerHTML將總值返回給HTML，但由於某種原因，它不起作用。有人可以幫忙找出它有什麼問題嗎？ TKS！Javascript還未顯示

<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; 
}

來源

2016-10-11 gingobr

行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值。

完整代碼示例：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>

來源

2016-10-11 01:32:38

我加了，但仍然沒有工作。謝謝你的回答。 – gingobr

已更新，以反映輸出部分中的一些錯誤。 –

通過此更新，我可以看到1秒的結果，然後從瀏覽器中消失。 = | – gingobr

注意，校正DOM的訪問之後，所述可變value包含輸入到所述輸入元件的文本的字符串值。它需要被轉換成一個數字來添加數字，而不是將它們串聯起來。一種解決方案是與這兩個

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

來源

2016-10-11 02:17:11 traktor53

好吧，我會那樣做的..謝謝！ – gingobr

您需要添加一行來代替行

if (value <= 0) {

：

value = parseInt(value);

否則JavaScript可能把「價值」作爲一種類型的串。

下面是完整的代碼

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>

來源

2016-10-11 05:16:13 MondGuo

Javascript還未顯示

回答

相關問題