41 thoughts on “JavaScript Tutorial for Beginners – 26 – getElementById method

  • January 27, 2019 at 02:14
    Permalink

    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>

  • January 27, 2019 at 02:14
    Permalink

    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>

  • January 27, 2019 at 02:14
    Permalink

    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…

  • January 27, 2019 at 02:14
    Permalink

    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"; }

  • January 27, 2019 at 02:14
    Permalink

    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?

  • January 27, 2019 at 02:14
    Permalink

    Hi! How do you have to write your code if you want to change multiple style options at the same time? Like fontStyle, backgroundColor, fontWeight etc? Thank you

  • January 27, 2019 at 02:14
    Permalink

    When I wrote the code by myself, it didn't work–but when I copy and pasted your code it worked like a charm. Why is this happening?

  • January 27, 2019 at 02:14
    Permalink

    Thank you so much sir! This is exactly what I have been looking for. I will be sure to follow your other tutorials, this was very helpful.

  • January 27, 2019 at 02:14
    Permalink

    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 ?

  • January 27, 2019 at 02:14
    Permalink

    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.

  • January 27, 2019 at 02:14
    Permalink

    The text color won't change and I have copied the tutorial code exactly from the tutorial. I even triple checked for errors and I have none.

  • January 27, 2019 at 02:14
    Permalink

    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";

  • January 27, 2019 at 02:14
    Permalink

    Thank you Thank you Thank you!!!! Can't say it enough. I Wish in addition to a thumbs up, YouTube had a fireworks button so when we pressed it you would see a Grand Finale lol!

  • January 27, 2019 at 02:14
    Permalink

    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.

  • January 27, 2019 at 02:14
    Permalink

    i do really appreciate your effort ,your way of expanning (Eff…), damn it dude 😀
    you steal the best beast, i'm waiting for something bigger such of a huge web app script.

  • January 27, 2019 at 02:14
    Permalink

    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