www.webdeveloper.com
Results 1 to 5 of 5

Thread: innerHTML NOT working like it should!?!?

  1. #1
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    74

    innerHTML NOT working like it should!?!?

    When a user type something into a textbox and then click submit, that value will then be display.
    I am able to display it the first time but if I wanted to display the same data again, it does NOT work.
    Not sure what I did wrong.

    Here's my code:

    Code:
    <!DOCTYPE html>
    <head><title></title>
    <script>
    function display(){
    	var myName = document.getElementById("myName").value;		
    	document.getElementById("name1").innerHTML = myName;
    }
    </script>
    </head>
    <body>
    
    <input type="text" id="myName" /><br><br>	
    
    <a href="#" onclick="display()">Continue</a>
    
    <h1 id="name1"> </h1><br><br>
    <h1 id="name1"> </h1><br><br>
    <h1 id="name1"> </h1>
    
    </body>
    </html>
    So the data should be display 3 times but it only display once.
    Even though I called
    Code:
    <h1 id="name1"> </h1>
    3 times.
    *** link removed by moderator - please do not spam this site ***

  2. #2
    Join Date
    Oct 2013
    Posts
    421
    id="name1" can only be used once per page. That's the rules...
    HTML Code:
    <!DOCTYPE html>
    <head>
    <title></title>
    <script>
    function display(){
    	var name = document.getElementById("myName").value;		
    	document.getElementById("name1").innerHTML = name;
    	document.getElementById("name2").innerHTML = name;
    	document.getElementById("name3").innerHTML = name;
    }
    </script>
    </head>
    <body>
    
    <input type="text" id="myName" /><br><br>	
    
    <button onclick="display()">Continue</button>
    
    <h1 id="name1"></h1>
    <h1 id="name2"></h1>
    <h1 id="name3"></h1>
    
    </body>
    </html>
    Last edited by Kevin2; 02-13-2014 at 05:10 PM.

  3. #3
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    74
    Is there not another way to display the data which I retrieved from the textbox more then once??

    I'm creating TABS, so first Tab is visible but the 2nd, 3rd, etc are all hidden. Even thought the other tabs are all hidden, they are all on the same page.
    How can I display id="name1" on Tab1, Tab4, and say Tab5?
    *** link removed by moderator - please do not spam this site ***

  4. #4
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    74
    OK I get it now.
    thank you Kevin2
    *** link removed by moderator - please do not spam this site ***

  5. #5
    Join Date
    Oct 2013
    Posts
    421
    Another way without changing "name1" if that's important.

    HTML Code:
    <!DOCTYPE html>
    <head>
    <title></title>
    <script>
    function display(){
    	var name = document.getElementById("myName").value;
    	var name1 = document.getElementsByClassName("name1");
    	 for(var i = 0; i < name1.length; i++){
              name1[i].innerHTML = name;
    	 }
    }
    </script>
    </head>
    <body>
    
    <input type="text" id="myName" /><br><br>	
    
    <button onclick="display()">Continue</button>
    
    <h1 class="name1"></h1>
    <h1 class="name1"></h1>
    <h1 class="name1"></h1>
    
    </body>
    </html>
    You would have to change your original code from <h1 id="name1"> to <h1 class="name1">

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles