Question

我正在尝试在javaascript中使用一些简单的数学，但我不能让它工作，我是js的真正初学者。

基本上我只是尝试使用'result1'作为第二个简单数学的变量，但似乎无法接受id'结果'。

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input id="value1" type="text" onchange="output();" />
<span> + </span>
<input id="value2" type="text" onchange="output();" />
<span> * </span>
<input id="value3" type="text" onchange="output();" />
<p id="result1"> </p>


<span> + </span>
<input id="value5" type="text" onchange="output();" />
<p id="result2"> </p>

<script type="text/javascript" language="javascript" charset="utf-8">


function output(){
    var value1 = document.getElementById('value1').value;
    var value2 = document.getElementById('value2').value;
    var value3 = document.getElementById('value3').value;
    document.getElementById('result1').innerHTML = (parseInt(value1) + parseInt(value2)) * parseInt(value3);
    var value4 = document.getElementById('result1').value;
    var value5 = document.getElementById('value5').value;
    document.getElementById('result2').innerHTML = parseInt(value4) + parseInt(value5);
     
}

</script>
</body>
</html>

小提琴here

Answer 1

p有textContent而不是value属性（value元素上使用input）。

//var value4 = document.getElementById('result1').value; //Wrong property
var value4 = document.getElementById('result1').textContent; //Correct property

http://jsfiddle.net/8x7oq4o2/2/

Answer 2

使用innerHTML获取p代码的值，并在该值上使用parseInt将其作为整数获取，然后它将按预期工作：

＆＃13;

function output(){
    var value1 = document.getElementById('value1').value;
    var value2 = document.getElementById('value2').value;
    var value3 = document.getElementById('value3').value;
    document.getElementById('result1').innerHTML = (parseInt(value1) + parseInt(value2)) * parseInt(value3);
    var value4 = document.getElementById('result1').innerHTML;
    var value5 = document.getElementById('value5').value;
    document.getElementById('result2').innerHTML = parseInt(value4) + parseInt(value5);
     
}

＆＃13;

<input id="value1" type="text" onchange="output();" />
<span> + </span>
<input id="value2" type="text" onchange="output();" />
<span> * </span>
<input id="value3" type="text" onchange="output();" />
<p id="result1"> </p>


<span> + </span>
<input id="value5" type="text" onchange="output();" />
<p id="result2"> </p>

＆＃13;

Answer 3

你应该在“value4”上使用textContent

function output(){
    var value1 = document.getElementById('value1').value;
    var value2 = document.getElementById('value2').value;
    var value3 = document.getElementById('value3').value;
    document.getElementById('result1').innerHTML = (parseInt(value1) + parseInt(value2)) * parseInt(value3);
    var value4 = document.getElementById('result1').textContent;
    var value5 = document.getElementById('value5').value;
    document.getElementById('result2').innerHTML = parseInt(value4) + parseInt(value5);
     
}

<input id="value1" type="text" onchange="output();" />
<span> + </span>
<input id="value2" type="text" onchange="output();" />
<span> * </span>
<input id="value3" type="text" onchange="output();" />
<p id="result1"> </p>


<span> + </span>
<input id="value5" type="text" onchange="output();" />
<p id="result2"> </p>

Answer 4

在将value4设置为result1之前计算value4：

var value4 = (parseInt(value1) + parseInt(value2)) * parseInt(value3);
document.getElementById('result1').innerHTML = value4;

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input id="value1" type="text" onchange="output();" />
<span> + </span>
<input id="value2" type="text" onchange="output();" />
<span> * </span>
<input id="value3" type="text" onchange="output();" />
<p id="result1"> </p>


<span> + </span>
<input id="value5" type="text" onchange="output();" />
<p id="result2"> </p>

<script type="text/javascript" language="javascript" charset="utf-8">


function output(){
    var value1 = document.getElementById('value1').value;
    var value2 = document.getElementById('value2').value;
    var value3 = document.getElementById('value3').value;
    
    // changes are in below 2 lines
    var value4 = (parseInt(value1) + parseInt(value2)) * parseInt(value3);
    document.getElementById('result1').innerHTML = value4;
    
    var value5 = document.getElementById('value5').value;
    document.getElementById('result2').innerHTML = parseInt(value4) + parseInt(value5);
     
}

</script>
</body>
</html>

Javascript数学文本字段

4 个答案: