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
Like Tree1Likes
  • 1 Post By Lerura

Thread: How does elementId in document.getElementById(elementId) pass values to a variable?

  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How does elementId in document.getElementById(elementId) pass values to a variable?

    Hello mates, I'm a newbie to JavaScript. Normally when I assign an HTML element to a variable created in JavaScript I use this:

    Code:
    var output = document.getElementById('output');
    But there is something new that I've come across:

    Code:
    var output = document.getElementById(elementId);
    elementId is an undeclared parameter and it is without quotes. However, var output will output text generated by the .js script to the html element. How does elementId pass values to a variable? I would really appreciate some help on this one. To put this into context, the code is in 2 files; today.HTML and today.js.

    today.html:

    Code:
    <html>
    <head>
    <title>Today</title>
    </head>
    <body>
    <p id="output"></p>
    <script src="today.js"></script>
    </body>
    </html>
    Javascript:

    Code:
    function setText(elementId, message) {
        'use strict';
        
        if ( (typeof elementId == 'string')
        && (typeof message == 'string') ) {
        
            // Get a reference to the paragraph:
            var output = document.getElementById(elementId);
        
            // Update the innerText or textContent property of the paragraph:
    		if (output.textContent !== undefined) {
    			output.textContent = message;
    		} else {
    			output.innerText = message;
    		}
        
        } // End of main IF.
    
    }
    function init() {
        'use strict';
        var today = new Date();
        var message = 'Right now it is ' + today.toLocaleDateString();
        message += ' at ' + today.getHours() + ':' + today.getMinutes();
    
        // Update the page:
        setText('output', message);
        
    } // End of init() function.
    window.onload = init;

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    setText('output', message);

    calls:

    function setText(elementId, message)

    so elementId is 'output' inside the function for this call.
    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.

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks felgall but how does elementId automatically refer to the paragraph in the HTML code? So far, as I have been learning, to to output text to an HTML element I explicitly assign it in quotes ie.

    var output = document.getElementById('output');
    'output' here refers to <p id="output"></p> in the HTML code.

    What is surprising to me is that var output = document.getElementById(elementId); works just the same even though there is no HTML element declared with the name elementId.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    elementID is just a variable/reference point that gets the value you pass for it through the function call.

    the function reads it as:
    elementId = 'Output'; (give elementID the value of 'Output')
    when calling document.getElementById(elementId) it reads: get the element that have the id equal to the value of elementId
    and
    var output = document.getElementById(elementId); reads: set output equal to the element that have the id equal to the value of elementId

  • #5
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Lerura View Post
    elementID is just a variable/reference point that gets the value you pass for it through the function call.

    the function reads it as:
    elementId = 'Output'; (give elementID the value of 'Output')
    when calling document.getElementById(elementId) it reads: get the element that have the id equal to the value of elementId
    and
    var output = document.getElementById(elementId); reads: set output equal to the element that have the id equal to the value of elementId

    Awesome! Finally I have wrapped my head around that.


  •  

    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
    •