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
    81

    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.

  2. #2
    Join Date
    Oct 2013
    Posts
    559
    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 06:10 PM.

  3. #3
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    81
    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?

  4. #4
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    81
    OK I get it now.
    thank you Kevin2

  5. #5
    Join Date
    Oct 2013
    Posts
    559
    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