html 用javascript输入文本进行计算

ghhaqwfi  于 2023-03-27  发布在  Java
关注(0)|答案(2)|浏览(135)

你好
我只是想知道如何将输入文本中的一个值乘以输入文本中的另一个值。
我试过这样做:

<div id="b" name="b">
<p id="bouz" name="bouz">Diameter (mm):</p> <p><input type="text" id="test" name="test" onblur="calculvente()"></p>
<p id="wtf" name="wtf">Width (mm):</p> <p><input type="text" id="zoubi" name="zoubi" onblur="calculvente()"></p>
</div>
</body>
<div id="c" name="c"><input type="text" id="c" name="c" onblur="calculvente()"></div>
<script>
let abc = document.getElementsById("test").value
let bac = document.getElementsById("zoubi").value
let cab = abc * bac
var select=document.getElementsById('cab')[0];
var input=document.getElementById('c');
select.onchange=function(){
  input.value=select.value[select.selectedId].text;
}
</script>

但是它不工作,我不知道为什么...如果有人能解释我如何用javascript做到这一点,这将对我有很大的帮助。提前感谢你:D

zbsbpyhn

zbsbpyhn1#

您可以使用oninput侦听输入并更新c输入字段:

function calculvente() {
  let abc = parseInt(document.getElementById("test").value);
  let bac = parseInt(document.getElementById("zoubi").value);
  let cab = abc * bac;
  document.getElementById('result').value = cab;
}
<div id="b" name="b">
  <p id="bouz" name="bouz">Diameter (mm):</p>
  <p><input oninput="calculvente()" type="number" id="test" name="test"></p>
  <p id="wtf" name="wtf">Width (mm):</p>
  <p><input oninput="calculvente()" type="number" id="zoubi" name="zoubi"></p>
</div>
<div id="c" name="c"><input type="text" id="result" name="result" readonly></div>
iyfamqjs

iyfamqjs2#

你试图调用一个名为calculvente()的函数,所以你需要这个函数

function calculvente()
{
let abc = document.getElementsById("test").value
let bac = document.getElementsById("zoubi").value
let cab = abc * bac
document.getElementsById("c").value=cab
}

你也给予div和输入相同的id。这是行不通的

<div id="b" name="b">
<p>Diameter (mm):</p> <p><input type="text" id="test" name="test" onblur="calculvente()"></p>
<p>Width (mm):</p> <p><input type="text" id="zoubi" name="zoubi" onblur="calculvente()"></p>
</div>
</body>
<div><input type="text" id="c" name="c" onblur="calculvente()"></div>

新尝试:

<div>
<p>Diameter (mm):</p> <p><input type="text" id="val1" onblur="calculvente()"></p>
<p>Width (mm):</p> <p><input type="text" id="val2" onblur="calculvente()"></p>

</div>

<div><input type="text" id="c" name="c"></div>

<script>
function calculvente(){
let abc = document.getElementById("val1").value
let bac = document.getElementById("val2").value
let cab = abc * bac
var input=document.getElementById('c');
input.value=cab;
}
</script>

相关问题