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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getElementById Not Working

    I have a script that when a user enters something in the text field and then press "Enter" on their keyboard it will display what they've entered.
    This script works perfectly in document.writeln but when I tried to convert it into innerHTML, id does NOT work and I'm not sure why
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function handleKeyPress(e,form){
       var key=e.keyCode || e.which;
       if (key==13){
          Display();
       }
    }
    
    function Display(){
      var newtext = document.myform.inputBox.value;
    
       document.writeln(newtext);
    }
    
    </script>
    </head>
    
    <body>
    
    <FORM NAME="myform">
       <input id="search" name="inputBox" type="text" value="" onkeypress="handleKeyPress(event,this.form)">
       <input id="submit" type="button" value="Submit" onClick="Display()">
    </form>
    
    </body>
    </html>

    Here's my code for innerHTML, as you can see, both codes are identical except that one uses document.writeln() and the other uses getElementById()
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function handleKeyPress(e,form){
       var key=e.keyCode || e.which;
       if (key==13){
          Display();
       }
    }
    
    function Display(){
      var newtext = document.myform.inputBox.value;
    
       var z=document.getElementById("info");
       z.innerHTML = newtext;
    }
    
    </script>
    </head>
    
    <body>
    
    <FORM NAME="myform">
       <input id="search" name="inputBox" type="text" value="" onkeypress="handleKeyPress(event,this.form)">
       <input id="submit" type="button" value="Submit" onClick="Display()">
    </form>
    
    <p id="info"></p>
    
    </body>
    </html>
    Very confusing!!!

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    when you hit enter the form
    submits that reloads the
    page try this ...

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function handleKeyPress(e,form){
       var key=e.keyCode || e.which;
       if (key==13){
          Display();
       }
    }
    
    function Display(){
      var newtext = document.myform.inputBox.value;
    
       var z=document.getElementById("info");
       z.innerHTML = newtext;
    }
    
    </script>
    </head>
    
    <body>
    
    <FORM NAME="myform" onsubmit="return false" >
       <input id="search" name="inputBox" type="text" value="" onkeypress="handleKeyPress(event,this.form)">
       <input id="submit" type="button" value="Submit" onClick="Display()">
    </form>
    
    <p id="info"></p>
    
    </body>
    </html>
    Last edited by DaveyErwin; 06-09-2012 at 02:58 AM. Reason: color coding code addition

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    945
    Thanks
    0
    Thanked 129 Times in 128 Posts
    @DaveyErwin.
    IMO it is good practice to colorcode what you have inserted, as it otherwise, often can be hard to spot the edit.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,994
    Thanks
    15
    Thanked 233 Times in 233 Posts
    I iz found a way. This is the changed code.
    Code:
    function Display(){
       var newtext = document.myform.inputBox.value;
       window.name = newtext;
       z.innerHTML = newtext;
    }
    window.onload=function(){ z.innerHTML = window.name; };
    By passing it through the neglected window.name object. You can pass a lot of information, 2mb, throught window.name and it's relatively secure, more so that _GET.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    No need for getElementById, just call it directly like "myform"; if you want to access to "inputBox" inside myform then just "myform.inputBox".

    Code:
    function Display(){ info.innerHTML = myform.inputBox.value; }
    Short and simple

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    A better way to code it that uses a lot less code is:

    Code:
    <html>
    <head>
    </head>
    <body>
    <FORM NAME="myform" onsubmit="Display(); return false;" >
       <input id="search" name="inputBox" type="text" value="" >
       <input id="submit" type="submit" value="Submit" >
    </form>
    
    <p id="info"></p>
    
    <script type="text/javascript">
    function Display(){
      var newtext = document.myform.inputBox.value;
       var z=document.getElementById("info");
       z.innerHTML = newtext;
    }
    </script>
    </body>
    </html>
    It doesn't need to disable enter because enter is the equivalent of pressing the submit button.

    Richter's solution will only work in Internet Explorer where the ids get mapped to corresponding variable names. IE is the ONLY browser that does that - all other browsers require that you use getElementById
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by felgall View Post
    A better way to code it that uses a lot less code is:

    Richter's solution will only work in Internet Explorer where the ids get mapped to corresponding variable names. IE is the ONLY browser that does that - all other browsers require that you use getElementById
    ONLY IE
    I'm develop base on Opera browser and I almost NOT SUPPORT IE for any web I wrote.
    Did you try it before ? I think you need an update

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Richter View Post
    ONLY IE
    I'm develop base on Opera browser and I almost NOT SUPPORT IE for any web I wrote.
    Did you try it before ? I think you need an update
    Opera never used to have that bug in it - it didn't the last time I had code that worked in Opera and failed in IE due to that bug in IE - the one failing Opera has is that it copies some of the stupid things from IE and if what you say is right (and I believe you) then it appears to have copied this particular bug. Since it doesn't work in any browser apart from those and most people now use either Chrome or Firefox as their browser even adding the small number of Opera users to those using IE still means it only works for about 35% of people.

    It definitely doesn't work in Chrome or Firefox because they both correctly follow the JavaScript standards.
    Last edited by felgall; 06-10-2012 at 11:27 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Oh c'mon man, did you really try it ?
    It's not so hard just open javascript console on your browser and debug this page and add some test script like below, I'm sure we will know it work or not better just argue about it.

    Code:
    if (posts) alert("Ok"); else alert("Nope");

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by felgall View Post
    Opera never used to have that bug in it - it didn't the last time I had code that worked in Opera and failed in IE due to that bug in IE - the one failing Opera has is that it copies some of the stupid things from IE and if what you say is right (and I believe you) then it appears to have copied this particular bug. Since it doesn't work in any browser apart from those and most people now use either Chrome or Firefox as their browser even adding the small number of Opera users to those using IE still means it only works for about 35% of people.

    It definitely doesn't work in Chrome or Firefox because they both correctly follow the JavaScript standards.
    works in firefox and chrome...
    Code:
    <body>
    <div id="test">hiyas</div>
    </body>
    
    <script type="text/javascript">
    alert(test.innerHTML)
    </script>

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by DaveyErwin View Post
    works in firefox and chrome...
    but not in FF12...

    I think the point may be (if there is a point) that getting into the habit of addressing elements by their bare ID is kind of sloppy - you can get away with it sometimes, in some browsers, but really, this one seems to me to be a good case for following the standards, using document.getElementById() and thus avoiding trouble.

  • #12
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by xelawho View Post
    but not in FF12...
    Confirm on FF 13.0 (I just download), it's not work on firefox.
    On Chrome 19.0.1084.56, it's work fine.

    Test code to debug this page:
    Code:
    if (window.posts) alert("Ok"); else alert("Nope");
    I away watch out IE, I never though I have to worry about fire fox

  • #13
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    <body>
    <div id="test">hiyas</div>
    </body>

    <script type="text/javascript">
    alert(test.innerHTML)//alerts hiyas on firfox 13
    //and on chrome 19
    </script>

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by DaveyErwin View Post
    alert(test.innerHTML)//alerts hiyas on firfox 13
    not on my version (just upgraded). I get: "test is not defined" error

    unless you're using some sort of funky doctype?

  • #15
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by DaveyErwin View Post
    <body>
    <div id="test">hiyas</div>
    </body>

    <script type="text/javascript">
    alert(test.innerHTML)//alerts hiyas on firfox 13
    //and on chrome 19
    </script>
    That's because the JavaScript is written incorrectly in the way it used to bve written for Netscape 4 and earlier. If you code it correctly for IE5+ then it doesn't have that bug in any browser.

    Code:
    (function() {
    "use strict";
    var test;
    alert(test.innerHTML);
    })();
    The wrapper fixes the bug that used to only be in IE but now seems to have been accidentally added to several other browsers - presumably you have reported the bug so they can fix it properly.

    With properly written code you need to use getElementById for the code to work.

    Code:
    (function() {
    "use strict";
    var test  = document.getElementById('test');
    alert(test.innerHTML);
    })();
    Also note that this version passes the validator as well - your code would fail the JavaScript validator because it isn't valid JavaScript.

    Simpy adding test = 'fail'; to your code would break it and there are millions more ways to break it if the code is even slightly longer than your short example.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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