Question

我试图连续获取每个输入的值并将它们相乘但结果却是一个奇怪的数字：

ejs文件：

    <td><input type="number" id="nolabour" name="nolabour"></td>
    <td><input type="number" id="labhrperdsy" name="labhrperdsy"></td>
    <td><input type="number" id="labnodays" name="labnodays"></td>
    <td><input type="number" id="labhrrate" name="labhrrate" 
     oninput="labourSum()"></td>
    <td><input type="text" id="labrate" name="labrate"></td>

javascript代码：

function labourSum(){

            var aValue = document.getElementById("nolabour").value;
            var bValue = document.getElementById("nolabour").value;
            var cValue = document.getElementById("nolabour").value;
            var dValue = document.getElementById("nolabour").value;
            var result = document.getElementById("labrate");

            result.value = parseFloat(aValue) * parseFloat(bValue) * parseFloat(cValue) * parseFloat(dValue);

        }

result

Answer 1

元素的value始终是一个字符串。在将值添加到一起之前，首先将值转换为数字。另一个问题是您可能会复制粘贴该行，并且一遍又一遍地选择#nolabour。

尝试这样的事情：

const totalPay = ['nolabour', 'labhrperdsy', 'labnodays', 'lahbrrate']
.reduce((subtotal, id) => {
  return subtotal + Number(document.getElementById(id));
}, 0);

Answer 2

function onChange() {
  let aValue = document.getElementById('a').value;
  let bValue = document.getElementById('b').value;
  let cValue = document.getElementById('c').value;
  const result = document.getElementById('result')
  
  result.innerHTML = parseFloat(aValue) * parseFloat(bValue) * parseFloat(cValue) 
}

onChange()

<div>
  <input id="a" value="1" onkeyup="onChange()">
  <input id="b" value="2" onkeyup="onChange()">
  <input id="c" value="3" onkeyup="onChange()">
  <br>
  <br>
  Result: <span id="result" style="font-size: 24px"></span>
</div>

Answer 3

一种非常简单的方法是将<input>包装成<form>并在其上使用On-event Attribute Event Handler。

<form oninput=...

oninput是用户键入<input>，<textarea>等时发生的事件，并且会立即捕获键击的值以供事件处理程序处理。所有表单控件处理的值都是字符串而不是数字，因此必须先转换值才能应用任何数学。最常见的方式：

<input id="input" value="10">

var string = document.getElementById('input').value; 

var number = parseFloat(string); /*OR*/ parseInt(string, 10); /*OR*/ Number(string);

parseFloat(string);

parseInt(string, 10);

Number(string);

我更倾向于使用<input>上的type="number"和.valueAsNumber属性进行转换。像这样：

<input id="input" type="number" value="10">

var number = document.getElementById('input').valueAsNumber;

我还添加了<output>代码，并为其添加了for attribute，其中包含<input> #id s的空格分隔列表的值。完成后，<output>与<input>个<input>相关联，现在所有<output>计算结果的值都将是input, output { display: block; font: 400 16px/1.2 Consolas; text-align: right; padding: 0 2px; } output { display: table; text-align: right; min-width: 20ch; }的值。

演示

＆＃13;

<form id='ABCD' oninput="D.value = A.valueAsNumber * B.valueAsNumber * C.valueAsNumber">
  <input id="A" type="number" value='1'>
  <input id="B" type="number" value='1'>
  <input id="C" type="number" value='1'>
  <output id="D" for="A B C">0</output>
</form>

＆＃13;

func addBubbleView() {
   let bubble = UIView()
    bubble.isUserInteractionEnabled = false
    bubble.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5)
    bubble.layer.cornerRadius = 10
    bubble.layer.zPosition = -1
    self.addSubview(bubble)
    bubble.translatesAutoresizingMaskIntoConstraints = false
    let views = [
        "bubble": bubble
    ]
    var constraints = [NSLayoutConstraint]()
    let vBtnConstraint = NSLayoutConstraint.constraints(withVisualFormat: "V:|-6-[bubble]-6-|", options: .init(rawValue: 0), metrics: nil, views: views)
    let hBtnConstraint = NSLayoutConstraint.constraints(withVisualFormat: "H:|-6-[bubble]-6-|", options: .init(rawValue: 0), metrics: nil, views: views)
    constraints += vBtnConstraint
    constraints += hBtnConstraint
    NSLayoutConstraint.activate(constraints)
}

＆＃13;

如何获取表中每个单元格的值并将它们全部乘以得到总数

3 个答案:

演示