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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Why isn't innerHTML working?

    Hello all. I'm new here and new to JavaScript. Ive got a snippet of code that's not working. Can you guys help me out? The code is the following:

    Code:
    function image()
    {	
    var image = document.getElementById('add_image'); 
    image.style.height = '30px';
    
    image.innerHTML = '<div style="margin:5px; width:520px; height:20px;" id="add_images"><input type="file" name="pic" /></div>';
    }
    The first half of the function is working, but the second half isn't. I originally tried style.visibility = 'visible' but that didn't work so I try innerHTML. Since that didn't work either, I've decided to seek help. Thanks ahead of time.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    And what does the object "add_image" look like in HTML???

    If it is, indeed, something like
    Code:
       <img id="add_image" />
    then no, you can never use innerHTML on an <img> tag.

    Show more code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,978
    Thanks
    15
    Thanked 230 Times in 230 Posts
    This is very confusing to the interpreter, you're using the same name for a function and an object, namely 'image'. Here's some code I wrote for a 'modal window' viewer that gives an example.
    Code:
    function doAction1()
        {
        var my_outer = document.getElementById("outer");
        my_outer.style.backgroundColor = "#000";
        my_outer.style.width  = screen.width+"px";
        my_outer.style.height = 1500+"px";
        var my_inner = document.getElementById("inner");
        my_inner.style.left = this.myl;
        my_inner.style.top  = this.myt;
        my_inner.style.display = "block";
        my_inner.innerHTML="<img style=\"z-index:auto;opacity:1;\" src=\"images/"+this.my_src+"\">";
        my_inner.onclick = doAction2;
        }

  • Users who have thanked DrDOS for this post:

    DLOUIS95 (10-10-2010)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Good catch. I didn't even notice that the function name and the variable name are the same.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    And what does the object "add_image" look like in HTML???

    If it is, indeed, something like
    Code:
       <img id="add_image" />
    then no, you can never use innerHTML on an <img> tag.

    Show more code.
    Sorry for the confusion. The code for where this will happen is the following:

    Code:
    <script src="pack.js" type="text/javascript"></script>
    
    <form action="/under/post.php" method="post" enctype="multipart/form-data" >
    <div style="display:inline-block; background-color:#C5E8FD; border: 1px solid #ccc; width:550px;margin-top:5px;margin-left:17px;">
    <textarea id="posts" name="posts"  style="margin-left:5px;float:left; width:540px;font-family:Arial;" ></textarea>
    <input type="hidden" name="user_id" value="<? echo $ro['id'];?>" /><br />
    <div style="margin-left:5px;float:left;"><a onclick="image();">Add Image</a></div>
    <input style="Margin-right:3px;float:right;background-color:#DDFCD3; border:1px solid #ccc;" type="submit" value="Post" />
    </div>
    <div style="
    height:0px;display:inline-block;background-color:#C5E8FD;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:530px;margin-top:0px;margin-left:27px;" 
    id="add_image"></div></form>
    The function is in Pack.js. This is put on the page using Ajax and Prototype. Ive discovered that my function DOES working when not using Ajax. Any way to get it working ?
    Last edited by DLOUIS95; 10-10-2010 at 12:17 AM.

  • #6
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by Old Pedant View Post
    Good catch. I didn't even notice that the function name and the variable name are the same.
    Well i solved the problem. Turns out I had the same function name twice.


  •  

    Tags for this Thread

    Posting Permissions

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