dotkpay Posted December 22, 2011 Share Posted December 22, 2011 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 More sharing options...
gizmola Posted December 22, 2011 Share Posted December 22, 2011 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"; } Link to comment https://forums.phpfreaks.com/topic/253665-innerhtml-overwriting/#findComment-1300432 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.