Topics

Leave a Reply

228 Comments on "JavaScript in Half an Hour (Without jQuery!)"

Notify of
avatar

Al Evangelista
Guest
Al Evangelista
5 months 24 days ago

I second Fernando Goya's emotion. Great stuff. I have used JavaScript in the past, and this refreshed some forgotten things. Thanks for posting.

Vivek ab
Guest
Vivek ab
5 months 25 days ago

good job @learnWebCode

BookOfSaints
Guest
BookOfSaints
5 months 27 days ago

Thanks so much for this, you are incredibly good at teaching!

Natalie German
Guest
Natalie German
5 months 27 days ago
PLEASE HELP!!!why " this.innerHTML;" doesn't work for me? (minutes 17-18)my "this..innerHTML" returns "undefined".Why???This is my js file's code:var ourHeadline = document.getElementById("our-headline");var listItems = document.getElementById("mylist").getElementsByTagName("li");var counter = 1; for(i = 0; i < listItems.length; i++){ listItems[i].addEventListener("click", activateItem); }function activateItem(){ ourHeadline.innerHTML = this.innerHTML; counter++;};and this is my HTML file code:<!DOCTYPE html> <html> <header> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="style.css"> </header> <body> <h1 id="our-headline">Click a list item to replace this text</h1> <button>Add new item</button> <ul id="our-list"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> <script src="script.js"></script> </body></html>
Natalie German
Guest
Natalie German
5 months 27 days ago

Lipak Sahil wow, thanks a lot! o changed the name from mylist to our-list to match the video code and forget to change it in JS file. thanks!

Lipak Sahil
Guest
Lipak Sahil
5 months 27 days ago

Your second line in JS code, ID name should be "our-list" not "mylist":Correct code:var listItems = document.getElementById("our-list").getElementsByTagName("li");Thanks,

Rozalina340/Aliddell
Guest
Rozalina340/Aliddell
5 months 29 days ago

Very helpful video! Thank you !!

Imon dela Rosa
Guest
Imon dela Rosa
6 months 4 days ago
This is great basic js tutorial! Can you please tell me how I can target id's and classes inside the table? (I'm using bootstrap framework)… Thanks<div class="container"> <div class="row"><h1 id="our-headline" class="clear">Click a list item to replace this text.</h1> <br><button class="btn btn-info">Add new item</button> <br><br> <table class="table table-hover"> <tbody id="our-list"> <ul> <tr> <td> <li>First item</li> </td> <tr> <td> <li>Second item</li> </td> </tr> <tr> <td> <li>Third item</li> </td> </tr> <tr> <td> <li>Fourth item</li> </td> </tr> <tr> <td> <li>Fifth item</li> </td> </tr> </ul> </tbody> </table> </div> </div>
Imon dela Rosa
Guest
Imon dela Rosa
6 months 4 days ago

That's great! Yes, It works when I put the ID on <tbody> like:<tbody id="our-list">Thank you!

LearnWebCode
Guest
LearnWebCode
6 months 4 days ago

Ah my bad, I only read the first half of your message :)It looks like the cause of the problem is invalid HTML. Table-based elements like "tr" and "td" are not allowed inside an unordered list element. Assuming we want to use a table (if we had tabular data with multiple columns) you could try giving the main "table" element or "tbody" element the id of "our-list" and then instead of looking for "li" elements inside it you could look for "td" elements. That could work nicely.

Imon dela Rosa
Guest
Imon dela Rosa
6 months 4 days ago

HI Brad, Thanks for the reply.Sorry just got a typo here, of course if I type getElementsById the result will be:> Uncaught TypeError: document.getElementsById is not a function(…)But you see I got a result:<ul id="our-list"> </ul>Please check:prntscr.com/dame53codepen.io/imon/pen/aBWWGWBTW, I bought your course on udemy! and it looks great!

LearnWebCode
Guest
LearnWebCode
6 months 4 days ago

Try "getElementById" instead of "getElementsById" – it shouldn't be plural. Then your code should work. Also, you could use solely "document.querySelectorAll("#our-list li");"

Imon dela Rosa
Guest
Imon dela Rosa
6 months 4 days ago

@Microphunktv Jade doesn't exist anymore. Due to some copyright stuff with the name.

Tillal Saeed
Guest
Tillal Saeed
6 months 4 days ago

Amazing Video Very Helpful…

Joseph Kota
Guest
Joseph Kota
6 months 9 days ago

when I type getElementsByTagName the console says "main.js:1 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null(…)". help please.

Joseph Kota
Guest
Joseph Kota
6 months 8 days ago

it's okay. I figured it out. thank you very much for taking the time to reply. BTW will it be possible for you to make tuts on local storage and session storages? thank you.

LearnWebCode
Guest
LearnWebCode
6 months 8 days ago

Hi Joseph, did you include the parentheses after getElementsByTagName("li") with an HTML element type inside?

Serdar Degirmenci
Guest
Serdar Degirmenci
6 months 9 days ago

good programmer&good teacher. Thank you very much for videos

Henry Garmendia
Guest
Henry Garmendia
6 months 13 days ago

I can say that you're really great teaching this mini-course I like your charisma, I just like the way you teach but I have a question for you, how do highlight with your cursor so it shows the width and the height, is it command + shift + 4, perhaps?

1 12 13 14 15 16 19
wpDiscuz