Jump to content

innerHTML overwriting


dotkpay

Recommended Posts

Hi,

 

Am trying to use innerHTML to output 2 statements in a preloaded <div> upon clicking a button.

But the problem is that the second statement overwrites the first and only one statement is displayed.

Please take a look at this code:

 

<html>
<head>
<style type="text/css">
#area
{
position:absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<div>
<script type="text/javascript">
function greet()
{
var a = document.getElementById('area');
a.innerHTML = "How are you?";
var b = document.getElementById('area');
b.innerHTML = "<p>Am fine";
}
</script>

<button onclick="greet()">Click to View</button>

<div id="area"></div>
</div>
</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/253665-innerhtml-overwriting/
Share on other sites

Yes, because you are first assigning the innerhtml one value, then assigning it a 2nd value.  That is going to overwrite the initial value.

 

function greet()
{
    var a = document.getElementById('area');
    a.innerHTML = "How are you?";
    var b = document.getElementById('area');
    b.innerHTML = a.innerHTML + "
Am fine";
}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.