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> Quote Link to comment 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"; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.