www.webdeveloper.com
Results 1 to 10 of 10

Thread: Problem with "innerHTML" (1 line of code)

  1. #1
    Join Date
    Oct 2009
    Location
    In a galaxy far, far away...
    Posts
    9

    Problem with "innerHTML" (1 line of code)

    I reckon it's the syntax I got wrong or something, as innerText won't work either.

    Code:
    <script type="text/javascript">
    changeText = function () {
    	apDiv1.innerHTML = apDiv2.innerHTML;
    }
    </script>
    Might someone enlighten me?

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    The only issue is you should declare your elements, e.g. via getElementById or by some node referencing method, not just use their ID followed by innerHTML.

    Other than that, no problem. You don't state what browser this is failing in.

    And innerText is non-standard, doesn't work in FF.

  3. #3
    Join Date
    Oct 2009
    Location
    In a galaxy far, far away...
    Posts
    9
    Ah, thanks kindly! The code failed in Safari and Firefox but I could tell the code wasn't correct before previewing it due to the colour formatting being off in Dreamweaver.

  4. #4
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    There's nothing wrong with the syntax itself, whatever Dreamweaver's colour coding says.

    Declare both elements with getElementById first, then to debug alert both of DIVs' innerHTMLs out to check you're reading them OK.

    Then take it from there.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    Keep in mind that the display might be copied from one <div> to another,
    but that the events/actions in the content will probably not work.

  6. #6
    Join Date
    Jul 2009
    Posts
    72
    Should work:

    <script type="text/javascript">
    changeText = function () {
    document.getElementById('apDiv1').innerHTML = document.getElementById('apDiv2').innerHTML;
    }
    </script>

  7. #7
    Join Date
    Oct 2009
    Location
    In a galaxy far, far away...
    Posts
    9
    Well now, if that ain't the strangest thing. I still can't get it to work. Here's a test routine to poke and prod:

    Code:
    <head>
    <title>New Page</title>
    <style type="text/css">
    <!--
    #apDiv1 {
    	position:absolute;
    	width:100px;
    	height:100px;
    	z-index:1;
    	left: 100px;
    	top: 20px;
    }
    #apDiv2 {
    	position:absolute;
    	width:100px;
    	height:100px;
    	z-index:2;
    	left: 300px;
    	top: 20px;
    }
    #apDiv3 {
    	position:absolute;
    	width:100px;
    	height:100px;
    	z-index:3;
    	left: 500px;
    	top: 20px;
    }
    -->
    </style>
    <script type="text/javascript">
    changeText = function () {
    document.getElementById('apDiv1').innerHTML = document.getElementById('apDiv2').innerHTML;
    }
    </script>
    </head>
    
    <body>
    <div id="apDiv1" name="apDiv1">May thy kingdom be stricken with nasty eggs and thy house be hot and sticky.</div>
    <div id="apDiv2" name="apDiv2">May thy breakfast boil to a cinder and thy honey coated foot melt in the winter sun.</div>
    <div id="apDiv3">
      <input type="submit" name="button" id="button" value="Do Stuff" onclick="changeText" />
    </div>
    </body>
    </html>
    For all the confused smilies in the world I can't figure it out.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Try this change:
    Code:
      <input type="submit" name="button" id="button" value="Do Stuff" onclick="changeText()" />

  9. #9
    Join Date
    Oct 2009
    Location
    In a galaxy far, far away...
    Posts
    9
    Aha! Many thanks to thee kind sir. Sleep well knowing you've earnestly helped a fellow being. Fare thee well until next!

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    You're most welcome.
    Glad I was able to help.
    Good Luck!

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