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（将字符串连接在一起）而不是{ {1}}（加上数字）。最后，通过设置其5属性，而不是使用老式document.write（），将输出写回到页面上的另一个特定元素。

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

innerText

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>标记将值传递给参数

2 个答案: