简体   繁体   English

如何将两个数字相加并将其与第三个数字相乘,并在 html 表单中以 javascript 的形式在禁用输入中显示总数?

[英]How do I add two numbers and them multiply it with the 3rd number and show the total in a disabled input in a html form with javascript?

This is the html code: 

the id's are: num1, num2, num3 and the total input is "total" I want the calc function to be (num1+num2)*num3 ID 是:num1、num2、num3 总输入是“总计” 我希望计算 function 是 (num1+num2)*num3

<div class="row">
    <div class="col">
    <label> Tarif Colet</label>
      <input type="num1" onfocus="calculare()" onkeyup="calculare()" onclick="calculare()" onblur="calculare()"  value="0" id="tarifcolet" id="num1"  class="form-control" placeholder="Tarif Colet">
      
    </div>
<div class="col">
      <label>Alte Taxe</label>
      <input type="num2" value="0" onfocus="calculare()" onkeyup="calculare()" onclick="calculare()" onblur="calculare()" id="num2"  class="form-control" placeholder="Alte Taxe">
    </div>
<div class="col">
    <label>Tva</label>
      <input type="percent" name="num3" id="num3" value="19%"  class="form-control" placeholder="TVA">
</div>
    <div class="col">
    <label>Total</label>
      <input type="number" name="total" disabled="disabled" id="total" class="form-control" placeholder="total">
    </div>

You can assign a value to a disabled input box using the same property you read:您可以使用您阅读的相同属性为禁用的输入框分配一个值:

function calculare() { 
  var num1 = parseFloat(document.getElementById('num1').value); 
    var num2 = parseFloat(document.getElementById('num2').value);
    var num3 = parseFloat(document.getElementById('num3').value);
    document.getElementById("total").value = ((num1 + num2) * num3/100).toFixed(2);
}

Fiddle here: https://jsfiddle.net/9s1d2nac/1/在这里小提琴: https://jsfiddle.net/9s1d2nac/1/

(In the fiddle I fixed the duplicate inputs you've assigned to the first input, leaving only "num1" as the id.) (在小提琴中,我修复了您分配给第一个输入的重复输入,只留下“num1”作为 id。)

Use return method.使用返回方法。

function myFunction(a, b, c) {
 return (a+b)*c;
}

And then add in a button onclick event (you can use in other events too).然后添加按钮 onclick 事件(您也可以在其他事件中使用)。

<div class="row">
    <div class="col">
    <label> Tarif Colet</label>
      <input type="num1" onfocus="calculare()" onkeyup="calculare()" onclick="calculare()" onblur="calculare()"  value="0" id="tarifcolet" id="num1"  class="form-control" placeholder="Tarif Colet">
      
    </div>
<div class="col">
      <label>Alte Taxe</label>
      <input type="num2" value="0" onfocus="calculare()" onkeyup="calculare()" onclick="calculare()" onblur="calculare()" id="num2"  class="form-control" placeholder="Alte Taxe">
    </div>
<div class="col">
    <label>Tva</label>
      <input type="percent" name="num3" id="num3" value="19%"  class="form-control" placeholder="TVA">
</div>
    <div class="col">
    <label>Total</label>
      <input type="number" name="total" disabled="disabled" id="total" class="form-control" placeholder="total">
    </div>
<button type="button" onclick="getValue() ">
function getValue(){
 var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var num3 = document.getElementById("num3").value;
var displayResult = document.getElementById("total");
var result = myFunction(num1, num2, num3);

displayResult.value = result;
}

I hope this works我希望这有效

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 javaScript将两个数字相乘并将结果显示到第三个html输入中 - javaScript multiply two numbers and show the result into third html input 如何使用Redux Form在表单中添加两个字段并在第3个字段中显示 - How to add two fields in a form and show in 3rd field using Redux Form 如何将此 JavaScript 代码添加到 Zapier,以发出第 3 方礼物? - How do I add this JavaScript code to Zapier, to issue a 3rd party gift? 如何使用emscripten调用第三方JavaScript库? - How do I call a 3rd party javascript library with emscripten? 如何分隔整个javaScript数字并分别乘以 - How can I separate whole javaScript numbers and multiply them separately Javascript:仅允许输入 7 位数字,并且仅在第三个数字后自动添加连字符 (-) - Javascript: Only allow 7 digits for input and automatically add hyphen(-) after only 3rd number 如何在 HTML Javascript 中填充第三个下拉列表? - How to Populate the 3rd Dropdown in HTML Javascript? 从每个对象数组中乘以 2 个值,然后将相加的数字相加以获得 Reactjs/Javascript 中的总数 - multiply 2 value from each array of objects then add the multiplied numbers to get a total number in Reactjs/Javascript 如何将一个数字数组与另一个数字数组相乘 javascript - How do I multiply an array of numbers with another array of numbers in javascript javascript 乘以 2 显示总数和 gtotal 但只显示一个值? - javascript multiply 2 number show total and gtotal but show only one value?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM