将值从函数传递到输入字段

Question

问题：我正在尝试将函数的返回值传递给输入字段。

我没有错误，该字段只是空白。

问题：为什么我的代码不起作用？

HTML

<tr>
<td>Quantity to be dredged</td>
<td><input type="number"  class="" id="shorePipe"></input></td>
</tr>

JavaScript的

var shorePipe = function() {
  var val = 100;
  var val2 = 100;
  var total = val * val2 / 100;
  // return total;
  document.getElementById('shorePipe').value = total;
};

提前致谢！

Answer 1

由于您的代码运行正常（在</input>旁边），所以我在这里看到的唯一问题是您可能没有调用shorePipe(); 一旦DOM被阅读并准备就绪 。

jsBin演示

因此，将您的JS放在结束</body>标记之前

<script>
var shorePipe = function() {
  var val = 100;
  var val2 = 100;
  var total = val * val2 / 100;
  // return total;
  document.getElementById('shorePipe').value = total;
};
shorePipe();
</script>

</body>

还要注意</input>无效。 <input>在void元素组中，并且不应带有结束标记。

Answer 2

您必须调用该函数

shorePipe();

这是一个小提琴： https : //jsfiddle.net/2vxdyvgz/

Answer 3

1. 输入不需要关闭自身。
2. 确保您实际上在某个地方调用了JS函数。

我为您创建了此JSFiddle： https ://jsfiddle.net/pd12edbp/2​​/

<input type="number"  class="" id="shorePipe" readyonly>

JS：

var shorePipe = function() {
   var val = 100;
   var val2 = 100;
   var total = val * val2 / 100;
   // return total;
   document.getElementById('shorePipe').value = total;
};

$(document).ready(function(){
    shorePipe();
});

Answer 4

在您的原始帖子中，您正在将值传递给ID为ShorePipe的元素，并且输入的ID为avgSubPipe

元素ID必须匹配。 和，您必须启动该功能

HTML

<tr>
<td>Quantity to be dredged</td>
<td><input type="number"  class="" id="avgSubPipe" readonly ></td>
</tr>

和Javascript：

var shorePipe = function() {
  var val = 100;
  var val2 = 100;
  var total = val * val2 / 100;
  // return total;
  document.getElementById('shorePipe').value = total;
};

// calling function
shorePipe();

https://jsfiddle.net/yhz7syhs/1/