Is there a way to use .innerHTML multiple times?

Question

I would like to write two variable values into a div container (with id myDiv) using innerHTML. My Div container is only showing the second value.

<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>

`+=` instead of `=`. – Sebastian Simon Jul 06 '17 at 04:24 — Sebastian Simon, Jul 06 '17 at 04:24

score 7 · Accepted Answer · answered Jul 06 '17 at 04:25

First you need to use correct ids everywhere. Second you can just add x+y in one assignment only like this:

<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>

or you can use += for if you want to keep appending to previously assigned value.

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

Is there a way to use .innerHTML multiple times?

1 Answers1