Question 43643 in Html Question posted in
Some basic documentation can be found here.

Calculation with input text with javascript – Html

Helloooo

I just want to know how I can do to multiply a value that is in an input text by another value that is in an input text too.

I’ve tried it like this :

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

But it doesn’t work and I don’t know why… If someone can explain how tf I can do that with javascript it would help me a lot. Thank you in advance 😀

Tags:

2

Answers


  1. 0

    you try to call a function named calculvente()
    so you need the function

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

    you also give the div and the input the same id. That cant work

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

    New try:

    <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>
    Login or Signup to reply.
  2. 0

    You can just listen for the inputs with oninput and update the your c input field:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search