Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Replacing a block of text using innerHTML

    For some reason this doesn't work. Please help me out if possible.

    index.php:
    Code:
    <html>
    	<head>
    		<title>Testing</title>
    
    		<link rel="stylesheet" href="style.css" type="text/css" />
    
    		<script type="text/javascript" href="replace.js"></script>
    	</head>
    
    	<body>
    		<a href="#" onClick="replace()">Click!</a><br />
    		<div id="replace">
    			Original Content!
    		</div>
    	</body>
    </html>
    replace.js:
    Code:
    function replace(){
    	document.getElementById("replace").innerHTML="RAWR!";
    }
    style.css:
    Code:
    body{
    	color: #ffffff;
    	background-color: #000000;
    }
    
    div#replace{
    	background-color: #333333;
    }
    When I click the link, nothing happens.

    Thanks,

    edit, also, if I do
    Code:
    <script />
    in the head the page won't even load, I had to use
    Code:
    <script></script>
    . Why is that?
    Last edited by danecookrulezz; 04-25-2009 at 07:00 PM.
    Because no one cares.

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Your first problem stems from the fact that the external JS file is attempting to reference a DOM object that (at the time the script is loaded) doesn't exist. You must use an onload event handler, or put the SCRIPT tags that reference any DOM objects (whether they are inline or external scripts) below the document body contents, e.g.

    (window.onload event handler)
    Code:
    <head>
    <script>
    window.onload= function() {
      // script contents here, define onclick handlers
    };
    </script>
    </head>
    <body>
    (....or.... after the body has loaded)
    Code:
    <body>
      <div id="results"><!-- results go here ---></div>
      <div id="controller">
        <a href="#" onclick="showSomething();">Show me something!</a>
      </div>
    <script>
    /*
    * SCRIPT tag below the document body contents
    * will load after the DOM has loaded and is ready
    * so.... we can reference DOM elements in it
    */
    // the results div, this exists at this point in time
    var resultsDiv= document.getElementById("results");
    // our function for the onclick handler
    function showSomething() {
      // test to be sure the targeted div exists
      if ( resultsDiv) {
        // send some HTML to it
        resultsDiv.innerHTML= "<p>Is the DOM ready?</p>";
      }
    }
    </script>
    </body>
    The second problem (using <script/>) is just a matter of fact. You cannot use a "single tag" element. There must be an opening and closing SCRIPT tag regardless of whether it's an externally linked script or inline. Would be nice, but it's not possible.
    Last edited by bdl; 04-25-2009 at 07:38 PM.

  • Users who have thanked bdl for this post:

    danecookrulezz (04-25-2009)

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much, could you explain to me how to do this?

    "// script contents here, define onclick handlers"

    How do I define onclick handlers?


    I tried the other method putting the script below the content, and it worked flawlessly, but I'd like to keep the script external if possible.

    Edit: Got the other thing to work.
    Last edited by danecookrulezz; 04-26-2009 at 01:55 AM.
    Because no one cares.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    There is no such attribute as href for the <script> tag.
    Try src.

    Perfectly OK to reference uncreated DOM objects in the header, so long as that reference is in a function (i.e. not immediately called) and there is no chance of it being called before the element is rendered. In this case the link which calls it is right above it - if you're worried about a user clicking in the nanosecond between those elements being parsed, play it safe:

    Code:
    function replace()
    {
      var el = document.getElementById("replace");
      if (el) el.innerHTML = "RAWR!";
    }
    Probably not a bad habit to develop. Avoid using global variables - actually, any variables - with common names like 'replace' - the chance of a namespace collision with an already existent property is too great, and will drive you up a tree. And never id an element with an already existing variable name! IE turns these into global variables. It shouldn't, but they wanted to help...

    I'll spare you the usual admonition against using innerHTML.

    http://www.brainjar.com/dhtml/intro/

  • Users who have thanked adios for this post:

    bdl (05-02-2009)


  •  

    Posting Permissions

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