如何使用 <input> 标签将值传递给参数

Question

html中的javascript有问题。我创建了一个带有两个参数的函数，并希望在调用函数时使用标记而不是在代码内部将值传递给它们。我只是做了传统的方法。例如，我在 a 和 b 中创建了一个带有两个参数的函数。然后我调用了该函数并给出了两个值，之后它按预期工作。但我不想要它，我希望这些值可以通过网页上的输入框给出。之后，当以某种方式调用该函数时，它应该返回结果。    <script>    function sum(a,b)    {     return a+b;    }    var s = sum(4,5);        document.write(s);    </script>

Answer 1

您需要在事件处理程序中运行代码，以便在用户填写输入之前不要调用该函数。然后您使用该.value属性来获取输入的值。

function sum(a, b) {

  return a + b;

}

document.getElementById("but").addEventListener("click", function() {

  var a = parseInt(document.getElementById("val1").value);

  var b = parseInt(document.getElementById("val2").value);

  var s = sum(a, b);

  document.getElementById("output").innerText = s;

});

Value 1: <input id="val1"><br> Value 2: <input id="val2"><br>

<button id="but">Compute</button><br> Result: <span id="output"></span>

Answer 2

像这样的事情应该适合你。您可以根据您的具体情况进行必要的调整。

您可以使用document.getElementById()来标识每个输入，然后使用该value属性来获取键入的值。还要注意使用parseInt()将文本输入值转换为（整个）数字（否则，您会发现它3+2会返回32（将字符串连接在一起）而不是5（添加数字））。最后，我通过设置其innerText属性将输出写回页面上的另一个特定元素，而不是使用老式的 document.write()。

我使用过的所有功能都可以在 MDN 等网站上更详细地在线查找。

var goBtn = document.getElementById("go");

//when button is clicked, grab the two input values and pass them to the function

goBtn.addEventListener("click", function() {

  var val1 = parseInt(document.getElementById("input1").value);

  var val2 = parseInt(document.getElementById("input2").value);

  var result = sum(val1, val2);

  document.getElementById("result").innerText = result;

});

function sum(a, b) {

  return a + b;

}

Input 1: <input type="number" id="input1" />

<br/>

Input 2: <input type="number" id="input2" />

<br/>

<button id="go" type="button">Go</button>

<br/><br/> Result:

<div id="result"></div>