Selecting Elements with the Same Class Name

Often when working with HTML, 0:00 you'll use classes to give the elements a particular look and feel with CSS. 0:02 For example, remember earlier when we typed an invalid 0:06 email on the Treehouse home page and it turned red? 0:09 Well errors like these are displayed to the user by placing a class like error or 0:12 warning on the element in question. 0:16 To select elements with the same class we can use document.getelementsbyclassname. 0:18 So over an index.html, let's add a few things that aren't purple to the list and 0:24 give them a class of error not purple, then we'll see how to select them. 0:28 So first right below grapes, 0:33 I'll add a list item of oranges with the class, 0:36 error-not-purple. 0:42 I'll go ahead and copy this list item and 0:45 paste two more let's say right above plums. 0:49 And I'll make the top one fire trucks and the bottom one snow. 0:54 Let's give index.html a save and over in app.js we can just 1:01 copy the JavaScript block we wrote in the previous video. 1:06 And paste a new one right below it and here we're gonna replace a few things. 1:11 So let's start by changing the myList constant here. 1:15 To errorNotPurple to reflect what we'll store here. 1:20 And then will change the word Tag to Class. 1:26 Now the Class we want is error-not-purple. 1:32 So we'll pass that into this method. 1:35 And in our for loop we'll want to make sure we're comparing 1:42 errorNotPurple's length in the condition. 1:46 So I'll replace all instances of my list with errorNotPurple. 1:49 So now, what do we want to do with these non-purple items? 1:56 Well normally we might want to hide them or remove them, 1:59 perhaps change them to fit our criteria, but for now let's just turn them red. 2:02 So normally our CSS might change the look for us but 2:08 changing them to red with JavaScript will show that our selection is working. 2:12 So to review what's going on here, first the entire list will be turned purple. 2:16 Then, just the list items with the errorNotPurple class will be turned red. 2:21 So they will change color twice, but 2:27 it will probably happen too quickly to be able to see it. 2:29 So go ahead and save my file and then go back to the browser and refresh. 2:32 And you can see that the non-purple items are now red. 2:37 So great, our selection worked. 2:41 Up next I'll show you a much more versatile way to select elements. 2:43 See you there. 2:46