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还未显示

回答

相关问题