Question

我有一个JavaScript函数：

function calculate(id1, id2)
{
var num1 = document.getElementById(id1).value;
var num2 = document.getElementById(id2).value;
return num1*num2;
}

采用两个参数，即HTML标签的“id”，然后获取相应标签中的值。您可以看到函数的目的是计算两个数字的乘积并返回值。

问题是我有一个按钮来调用这个函数并将args传递给它但是我想在另一个para标签中显示函数的返回值。

这是输入标签，按钮和Para标签的代码：

<p>Enter two numbers to calculate their product</p>

First Number: <input type="number" id="FNum"><br>
Last Number: <input type="number" id="SNum"><br>

<br>

<button type="button" onClick=calculate("FNum","SNum")>Calculate</button>

<p id="para2">Hi</p>

我知道我可以在计算函数中写这个：

document.getElementById("para2").innerHTML = num1*num2;

但我不希望通过从函数中更改其值来直接在HTML para标签中显示该产品，而是希望从函数中捕获返回值，并在实际调用的按钮时从HTML页面本身的para标签中显示它单击该功能。为了更清楚，我想在HTML代码本身而不是在JS中编写函数的返回值捕获代码。我想知道是否有办法做到这一点，如果是这样，怎么样？我怀疑这不能用上面的特定函数完成，因为如果我们尝试使用它，它应该每次传递两个args但是如果有一个函数不接受任何参数但是返回两个产品号码？

感谢您对此的反馈：）

Answer 1

 <button onclick='document.getElementById("para2").innerHTML =  calculate("FNum","SNum")'>Calculate</button>

请注意，内联js会使您的代码难以理解。

Answer 2

这样可行：

<button onclick="document.getElementById('para2').innerHTML = calculate('FNum','SNum')">Calculate</button>

但是，我建议您不要使用内联事件侦听器：

const fnum = document.getElementById('FNum');
const snum = document.getElementById('SNum');
const button = document.querySelector('button');
const para = document.getElementById('para2');

function calculate () {
  return fnum.value * snum.value;
}

button.addEventListener('click', function () {
  para.textContent = calculate();
});

<p>Enter two numbers to calculate their product</p>

First Number: <input type="number" id="FNum"><br>
Last Number: <input type="number" id="SNum"><br>

<br>

<button>Calculate</button>

<p id="para2">Hi</p>

看看addEventListener。

如何在点击实际调用此函数的按钮时将javascript函数的返回值传递给para标签？

2 个答案: