実際にこの関数を呼び出すボタンをクリックすると、javascript関数の戻り値をparaタグに渡す方法はありますか？

Question

Iは、JavaScript関数を有する：

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

「ID」のHTMLタグであり、対応するタグ中に存在する値を求める2つのパラメータを取ります。関数の目的は、2つの数値の積を計算して値を返すことです。

問題は、この関数を呼び出してargsを渡すボタンがありますが、別の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> 

私は計算機能でこれを書くことができます知っている：ここで

は、INPUTタグ、ボタンおよびパラタグのコードである

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

しかし、私が直接表示させたくありませんHTML paraタグ内の値を関数から変更することで、関数からの戻り値をキャッチし、関数を実際に呼び出すボタンがクリックされたときにHTMLページ自体からパラタグで表示したいと考えています。より明確にするために、関数の戻り値catchingコードをJSではなくHTMLコード自体に書きたいと思います。私はこれを行う方法があるかどうかを知りたいのですが、もしそうなら、どうしたらいいですか？私はそれを使用しようとするたびに2つの引数で渡されるべきである上記の特定の関数ではできないと懐疑的だが、パラメータを取らずに2つの関数を返す関数があれば数字？この上のあなたのフィードバックのための

感謝:)インラインjsのは、あなたのコードは不可解になることを

Answer 1

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

注意。

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を見てみましょう。