D4mations.com

JavaScript Tutorial for Beginners – 26 – getElementById method



In this video we will discuss the getElementById method.

JavaScript code: http://pastebin.com/nKYdNVXQ
HTML code: http://pastebin.com/4vetykqT

Original source

d4mer

, , , , , , , , ,

41 responses to “JavaScript Tutorial for Beginners – 26 – getElementById method”

  5. I have the following html on a timer and I would like to display the actual timer in the form when the user stops the button, does it look something like this?

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="stopwatch.css">
    <link rel="stylesheet" type="text/css" href="">
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    </head>
    <body>
    <div class="container">
    <h1 class="title">Stopwatch</h1>
    <h1 id="timerLabel">00:00:00</h1>
    <h1 id="timerResult"></h1>
    <input type="button" value="START" class="myButton" onclick="start()" id="startBtn">
    <input type="button" value="STOP" class="myButton" onclick="stop()">
    <input type="button" value="RESET" class="myButton" onclick="reset()">

    <input type="button" class="myButton" onclick="output()" value="Output">

    </div>
    <form>
    <input type="text" values="">

    <script src="timer2.js">

    </script>
    </body>
    </html>

  7. what am I doing wrong!?!?!?

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <p Id="para1">sample text</p>

    <button onclick="go();">submit</button>

    <script type="text/javascript">

    var text = getElementById ("para1").style.backroundColor = "red";

    </script>
    </body>
    </html>

  11. I am following your JS lessons. For the DOM…. If you use the function and button and your js code is in script tags on HTML page… Once you refresh the changes go back to normal. Is this because the JS is not written on a separate JS page? And once you make the changes should you remove the button… Assuming these changes are for changes a customer wants…

    Do you have a forum where we can ask questions?

    And are you going to make anymore JS lessons?

    Thanks… Still trying to figure out when we would use some of these things… Its had to imagine due to my limited knowledge and understanding…

  13. Will this work if I want the color of the button itself to change onclick? HTML: <button onclick="submitButtonStyle()" type="submit" class="stylebutton"> Submit </button> ——— JS: function submitButtonStyle() { document.getElementsByClassName("stylebutton").style.backgroundColor = "red"; }

  15. i like this channel. it seems like we use the DOM to edit our documents? the use of the button makes it seem like the user is going to be seeing the changes as THEY interact with the site.
    can you clarify this for me?

  21. Awesome explanation :* <3 , just one thing ? is it so that whenever we want to alter text we need to use style tag ? and what else style tag is used for ? cuz i had previously seen , that style tag is used in internal css stylesheet ?

  24. Your tutorials are Excellent, very easy to follow, concise, and informative. I was just wondering if you're ever going to do a tutorial bringing together some of your teachings? Creating a Fully functional responsive website from scratch, using HTML, CSS, JavaScript, and Bootstrap. Because It would be great to try and put all the newly acquired skills and concepts into a real life project.

  27. I think that var text = document.getElementById("para1").style.color = "red" is a little bit confusing.

    instead, we can use:
    var text = document.getElementById("para1");
    text.style.color = "red";

  38. anyone else having problems running this script in JS fiddle? I have copied the script exactly as the tutorial however the changeStyle() won't run … something about the onclick() that does not work in JSfiddle.

  40. Will this work with the radio type button? I was thinking of somehow styling the radio to create a glow effect once functioned by javascript like you did here. I know i can just click the radio button but i was experimenting by trying to get it pressed with an actual button.

Leave a Reply