• Thursday , 6 August 2020

JavaScript Tutorial for Beginners – 26 – getElementById method

Code Canyon



In this video we will discuss the getElementById method.

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

Original source

3d Ocean

Related Posts

41 Comments

  1. n0xiee
    January 27, 2019 at 02:14

    Many thanks

  2. linus515
    January 27, 2019 at 02:14

    I would also like to know why the var text is used here.

  3. yassine mihoubi
    January 27, 2019 at 02:14

    tank you

  4. Fajar Zahoor
    January 27, 2019 at 02:14

    Not working for me.
    Even I copied both the codes from pastebin but still not working

  5. piano0011 Lee
    January 27, 2019 at 02:14

    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>

  6. ankita ahuja
    January 27, 2019 at 02:14

    Thanks soooooo much… you saved so much of my time and FRUSTRATION. thanks again.. god bless.

  7. freedom2234 :p
    January 27, 2019 at 02:14

    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>

  8. dash assas
    January 27, 2019 at 02:14

    is "border-left" following camel case now?
    because i already tried this"borderLeft" and it's working

  9. Pitrov Secondary
    January 27, 2019 at 02:14

    3:49 AAa, lel

  10. Pitrov Secondary
    January 27, 2019 at 02:14

    Is there a method called getElementByClass too??

  11. Gerald Foushee
    January 27, 2019 at 02:14

    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…

  12. aqalka cad
    January 27, 2019 at 02:14

    thank you

  13. folloem
    January 27, 2019 at 02:14

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

  14. potatosaucevids
    January 27, 2019 at 02:14

    This helped

  15. Gerald Foushee
    January 27, 2019 at 02:14

    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?

  16. An Vermeren
    January 27, 2019 at 02:14

    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

  17. Ume-hani Usman
    January 27, 2019 at 02:14

    as soon as i click submit the color changes but just for a second and the page reloads again. how to delay the reloading?

  18. TARIA VFX 11
    January 27, 2019 at 02:14

    You are amazing sir

  19. goat Trigger
    January 27, 2019 at 02:14

    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?

  20. Jack
    January 27, 2019 at 02:14

    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.

  21. Umair Ali
    January 27, 2019 at 02:14

    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 ?

  22. Ankit Dogra
    January 27, 2019 at 02:14

    The Js script is not working in Brackets. Can someone help ?

  23. ODIN
    January 27, 2019 at 02:14

    yleoooooo

  24. Seán Black
    January 27, 2019 at 02:14

    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.

  25. JASDKA1
    January 27, 2019 at 02:14

    y do we need a variable tho?

  26. Kodi Admin
    January 27, 2019 at 02:14

    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.

  27. thắng vũ
    January 27, 2019 at 02:14

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

  28. Rasheed Ibraheem
    January 27, 2019 at 02:14

    have been try to change my backgroundcolor as you stated here but is not changing after click my submit button,please help me out

  29. micah smith
    January 27, 2019 at 02:14

    Not sure if there was an update but I did have to camelCase paddingLeft. Thanks for the tuts!

  30. Ammar Sadeq
    January 27, 2019 at 02:14

    just wondering why u choose to run in Firefox

  31. Данчо Мадански
    January 27, 2019 at 02:14

    Thank u mate u are the best !!!! U help me a lot this days

  32. Guram Kankava
    January 27, 2019 at 02:14

    Thank You!

  33. 张建航
    January 27, 2019 at 02:14

    Thanks you are best ,is my favourite ,L like javascript, develper

  34. ahmad maihraize
    January 27, 2019 at 02:14

    thank you , very good way to illustrate , for me it was very clear and helped me

  35. Crime1207
    January 27, 2019 at 02:14

    "background-color" should be with a small c in CSS

  36. Joey Sunshine
    January 27, 2019 at 02:14

    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!

  37. Leave the Matrix
    January 27, 2019 at 02:14

    Love these videos! Thank you so much.  I can read a crappy text book for a few hours or watch your videos for 15min.

  38. Hands Solo
    January 27, 2019 at 02:14

    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.

  39. S3FaQ El
    January 27, 2019 at 02:14

    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.

  40. MADPURO
    January 27, 2019 at 02:14

    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.

  41. 子阳JiggsX
    January 27, 2019 at 02:14

    is the "style" a method of the object "text" which can change the style of it? ?

Leave A Comment

You must be logged in to post a comment.