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 5 of 5
  1. #1
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post

    document.getElementById() / innerHTML; An alternative snippet to document.write()

    If you're looking for a simple way to create JavaScript-generated text without removing most or all the content on the web page, than this code does the job. Using document.getElementById / innerHTML, this is the improved, template-based alternative to using the document.write() function. HTML was included to show how the script works.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    
    <script type="text/javascript">
    //Javham Version 1.0
    function sb()
    {
    var TB = document.getElementById('myDiv');
    if (TB)
    {
    TB.innerHTML = "This is something placed into the div tag";
    }
    }//end of function
    //Taro Burnham, Coding Forums
    </script>
    
    </head>
    <body>
    
    <button OnClick="sb()">Show text</button>
    
    
    <div id="myDiv"></div>
    </body>
    </html>
    As you can see, the button is used to activate the function, instead of being displayed on page load. For example, if a math function was calculated, the text would be displayed on a manually-activated event to show its usability. If the code were to be placed without a function, then the text would display on the load of the page. In the script itself, simple variables were used, having the document class set the id. If the variable that was used included the existing div (in this case, "myDiv") existed, then innerHTML would let text be written inside of it.

    Furthermore, variables are also accepted in the innerHTML area. For example, a variable called 'jk' is defined as a number value in document.write(jk) of the same function.

    Code:
    TB.innerHTML = jk
    I will be working to continue to improve the script, as needed (hopefully I checked the search feature thoroughly and found nothing like this), or make variations. This code has been tested in Firefox 12.0, Explorer 8, and Opera 11.61 for the initial post; all work satisfactorily. In addition, this may also work as a separate file in the .js file extension.

    EDIT: Improved version in next post.
    Last edited by Taro; 05-05-2012 at 03:50 AM.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,474
    Thanks
    13
    Thanked 361 Times in 357 Posts
    note, you might get into nasty nesting if you require more elements to be present. I would recomment to error out if any element access fails.
    PHP Code:
    function sb()
    {
      var 
    TB document.getElementById('myDiv');
      if (!
    TB) {
        throw new 
    Error("The element with the ID 'myDiv' does not exist.");
      }
      
    TB.innerHTML "This is something placed into the div tag";
      
    // more code ...

    as well as not using inline JS (for cleaner HTML code):
    PHP Code:
    document.getElementsByTagName('button')[0].addEventListener("click"sbfalse); 
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,925
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Also, as other people (especially those new to coding) might come across this thread I’d strongly suggest having clean and valid HTML in your example, so that they don’t get off on the wrong foot and so it doesn’t spread bad code all across the internet. For example, use a correct doctype:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    (Note that strict is the only type you’ll ever need if you create new documents)

    And despite Dormilich having addressed this, and HTML not being too strict about that, if you use inline event handlers, for good practice you should write them all lowercase: onclick="…". But really, you shouldn’t have them in the HTML in the first place.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by VIPStephan View Post
    (Note that strict is the only type you’ll ever need if you create new documents)
    That doesn't just apply to HTML - it also applies to JavaScript.

    All new JavaScript should be written to run in strict mode by placing the statement "use strict"; at the top of the JavaScript.
    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.

  • #5
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Improved version (previous version still acceptable):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    <head>
    <title>Untitled</title>
    
    <script type="text/javascript">
    "use strict";
    function sb()
    {
      var TB = document.getElementById('myDiv');
      if (!TB) {
        throw new Error("The element with the ID 'myDiv' does not exist.");
      }
      TB.innerHTML = "This is something placed into the div tag";
    }//end of function
    </script>
    
    </head>
    <body>
    
    <button onclick="sb()">Show text</button>
    
    
    <div id="myDiv"></div>
    </body>
    </html>
    I decided not to add the inline js (but made 'onclick' lower-case); I received an error from HTML-Kit saying that it does not exist (non-syntax error).
    Last edited by Taro; 05-05-2012 at 07:49 PM.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.


  •  

    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
    •