如何使用 <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) {&nbsp; return a + b;}document.getElementById("but").addEventListener("click", function() {&nbsp; var a = parseInt(document.getElementById("val1").value);&nbsp; var b = parseInt(document.getElementById("val2").value);&nbsp; var s = sum(a, b);&nbsp; 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 functiongoBtn.addEventListener("click", function() {&nbsp; var val1 = parseInt(document.getElementById("input1").value);&nbsp; var val2 = parseInt(document.getElementById("input2").value);&nbsp; var result = sum(val1, val2);&nbsp; document.getElementById("result").innerText = result;});function sum(a, b) {&nbsp; 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>