.innerHTMLを複数回使用する方法はありますか？

Question

innerHTMLを使用してdivコンテナ（id myDiv）に2つの変数値を書きたいと思います。私のDivコンテナは2番目の値しか表示していません。

<button type="button" onclick="myFunction()">Click me</button> 
<input type="text" id="First" name="firstname"> 
<input type="text" id="Last" name="lastname"> 

<div id="myDiv"></div> 
<script> 
function myFunction() { 
    var x = document.getElementById("John").value; 
    var y = document.getElementById("Mail").value; 
    document.getElementById("myDub").innerHTML=x; 
    document.getElementById("myDub").innerHTML=y; 
}</script> 

Answer 1

まず、正しいIDをすべて使用する必要があります。

<button type="button" onclick="myFunction()">Click me</button> 
<input type="text" id="First" name="firstname"> 
<input type="text" id="Last" name="lastname"> 

<div id="myDiv"></div> 
<script> 
function myFunction() { 
    var x = document.getElementById("First").value; 
    var y = document.getElementById("Last").value; 
    document.getElementById("myDiv").innerHTML= x + y; 
}</script> 

または以前に割り当てられた値に追加しておきたい場合は、あなたがのために+=を使用することができます。第二に、あなただけのだけ、このような1つの割り当てにx+yを追加することができます。

document.getElementById("myDiv").innerHTML = x; 
document.getElementById("myDiv").innerHTML += y;