javascript - 我想在 id=twork 中显示添加文本框 id=ttlpw 和 id=tplpw。但它不起作用

Question

我想在第三个函数中添加第一个和第二个函数值。我正在使用这第三个函数值显示在一个文本框中。

我试图直接添加函数并得到结果，但它不起作用我尝试了不同的函数，如 onkeydown、onkeypress 等。

//first function
function first() {
  var tt = parseInt(document.getElementById("divi").value);
  var pp = parseInt(document.getElementById("npt").value)
  var tl = parseInt(document.getElementById("tlpw").value)
  document.getElementById("ttlpw").value = tt * pp * tl;


}
//second function  
function second() {
  var tt = parseInt(document.getElementById("npp").value);
  var pp = parseInt(document.getElementById("plpw").value)
  var tl = parseInt(document.getElementById("nob").value)
  document.getElementById("tplpw").value = tt * pp * tl;
}

//third function

function third() {
  X = first();
  Y = second();
  document.getElementById("twork").value = x + y;
}

<input type="text" id="cname" name="cname" class="form-control" />
<input type="text" id="npt" name="npt" onkeyup="first()" class="form-control" />
<input type="text" id="npp" name="npp" onkeyup="second()" class="form-control" />
<input type="text" id="tlpw" name="tlpw" onkeyup="first()" class="form-control" />
<input type="text" id="plpw" name="plpw" onkeyup="second()" class="form-control" />
<input type="text" id="divi" name="divi" onkeyup="first()" class="form-control" />
<input type="text" id="nseb" name="nseb" class="form-control" />
<input type="text" id="nob" name="nob" onkeyup="second()" class="form-control" />
<input type="text" id="ttlpw" name="ttlpw" " onkeyup="third() "   
     class="form-control " />
             <input type="text " id="tplpw " name="tplpw "" onkeyup="third()" class="form-control" />
<input type="text" id="twork" name="twork" class="form-control" />

此代码没有给出附加值。我期待添加 x+y。

标签： javascripthtmlajax

Answer 1

有几个问题：

• 您的函数first()并second()打印值，但它们实际上并没有返回这些值。

• 最重要的是，您有多余/随机"字符和空格字符，这会导致您的输入无法按预期运行。

• 最后，您分配XandY然后尝试添加xand y，但 Javascript区分大小写，因此添加尝试添加两个未定义的值。

在下面的代码片段中（单击“显示”查看）我修复了所有这些，并添加了占位符，因此至少我们对我们正在输入的内容有一些指示。

最后一点，它看起来cname并nseb没有在任何地方使用，而且它们没有像大多数其他人那样的 keyup 事件。

对我来说，它看起来还是有点乱。我希望它对你更有意义。

// Give all inputs a placeholder
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
   inputs[i].placeholder = inputs[i].id;
}

function first() {
  var tt = parseInt(document.getElementById("divi").value);
  var pp = parseInt(document.getElementById("npt").value);
  var tl = parseInt(document.getElementById("tlpw").value);
  var value = tt * pp * tl;
  document.getElementById("ttlpw").value = value;
  return value;
}

function second() {
  var tt = parseInt(document.getElementById("npp").value);
  var pp = parseInt(document.getElementById("plpw").value)
  var tl = parseInt(document.getElementById("nob").value)
  var value = tt * pp * tl;
  document.getElementById("tplpw").value = value;
  return value;
}

function third() {
  var x = first();
  var y = second();
  document.getElementById("twork").value = x + y;
}

<input type="text" id="cname" name="cname" class="form-control" />
<input type="text" id="npt" name="npt" onkeyup="first()" class="form-control" />
<input type="text" id="npp" name="npp" onkeyup="second()" class="form-control" />
<input type="text" id="tlpw" name="tlpw" onkeyup="first()" class="form-control" />
<input type="text" id="plpw" name="plpw" onkeyup="second()" class="form-control" />
<input type="text" id="divi" name="divi" onkeyup="first()" class="form-control" />
<input type="text" id="nseb" name="nseb" class="form-control" />
<input type="text" id="nob" name="nob" onkeyup="second()" class="form-control" />
<input type="text" id="ttlpw" name="ttlpw" onkeyup="third()" class="form-control " />
<input type="text" id="tplpw" name="tplpw" onkeyup="third()" class="form-control" />
<input type="text" id="twork" name="twork" class="form-control" />

---

更新：

如果我正确理解您的需求，请尝试将它们全部更改为使用，而不是使用onkeyup="first()"and 。将调用其他两个函数，每个函数都将显示它们的结果，然后将显示两者的总和。onkeyup="second()"onkeyup="third()"third()third()

这是一个可以做到这一点的新片段。我还删除了cnameand nseb，并重新排列了输入的顺序，所以它们实际上是有意义的。

// Give all inputs a placeholder
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].placeholder = inputs[i].id;
}

function first() {
  var tt = parseInt(document.getElementById("divi").value);
  var pp = parseInt(document.getElementById("npt").value);
  var tl = parseInt(document.getElementById("tlpw").value);
  var value = tt * pp * tl;
  document.getElementById("ttlpw").value = value;
  return value;
}

function second() {
  var tt = parseInt(document.getElementById("npp").value);
  var pp = parseInt(document.getElementById("plpw").value)
  var tl = parseInt(document.getElementById("nob").value)
  var value = tt * pp * tl;
  document.getElementById("tplpw").value = value;
  return value;
}

function third() {
  var x = first();
  var y = second();
  document.getElementById("twork").value = x + y;
}

div { width: 240px; text-align: right; }
input { width: 40px; }

<div>
  <input type="text" id="npt" name="npt" onkeyup="third()" /> *
  <input type="text" id="divi" name="divi" onkeyup="third()" /> *
  <input type="text" id="tlpw" name="tlpw" onkeyup="third()" /> =
  <input type="text" id="ttlpw" name="ttlpw" onkeyup="third()" /><br />
  <input type="text" id="npp" name="npp" onkeyup="third()" /> *
  <input type="text" id="nob" name="nob" onkeyup="third()" /> *
  <input type="text" id="plpw" name="plpw" onkeyup="third()" /> =
  <input type="text" id="tplpw" name="tplpw" onkeyup="third()" /><br />
  <input type="text" id="twork" name="twork" /><br />
</div>