JavaScript Tutorial for Beginners - 29 - getElementsByClassName

In this video we will discuss the getElementsByClassName method.

[handet.]

Man, you are the best! You are doing your job very good and respect us! Really appreciate it!

[wordoflife]

you are simply the best at this .keep it up.

[MrRedhawk]

Nice Excited for the next lesson keep up the good work !

[bmzgaming]

What about without button, how to do that?

[m.r.a.sandroidzone]

I want to create a Main MENU that will be visible, by using "html" and"css" and "js"; but in CSS to have the Secondary Menu - that will not be displayed. The Secondary Menu will be visible when I will Click, on the Promotions-and in the same time- the Main Menu will got hidden.
Can you please, help me with this <Anchor>Promotions</a> And when I will Click on it, the Menu to ? Thank you.
All I know is to use the getElementById; getElementsByTagName; getElementByTheClass. Thank you again.
I have created this combination with Html, Css, Js. Thank you again.


HTML:

<div id="BaraNavigMAIN">
<ul>
<li> <a href=""> Home</a> </li>
<li> <a href=""> Sport </a> </li>
<li> <a href="">Technology </a> </li>
<li> <a href=""> Promotions </a> </li>
</ul>
</div>


<div id="BaraNavigSecondary">
<ul>
<li> <a href=""> Special Offerts</a> </li>
<li> <a href=""> Promo Sport </a> </li>
<li> <a href="">Promo Tech </a> </li>
<li> <a href=""> Back to Menu </a> </li>
</ul>
</div>


CSS:

Navig Main --*/

#BaraNavigMAIN ul{
padding:5px;
list-style-type:none;
text-align:center;
background-color:#000;
margin:10px;
border-radius:5px;
}

#BaraNavigMAIN ul li{
display:inline;
}

#BaraNavigMAIN ul li a{
text-decoration:none;
font-family:Arial;
padding: .2em 1em;
color:#fff;
background-color:#000;
}

#BaraNavigMAIN ul li a:hover {
color:#000;
background-color:#fff;
}

Navig Secondary --*/
#BaraNavigSecondary ul{
padding:5px;
list-style-type:none;
text-align:center;
background-color:#fff;
margin:10px;
border-radius:5px;
}

#BaraNavigSecondary ul li{
display:inline;
}

#BaraNavigSecondary ul li a{
text-decoration:none;
font-family:Arial;
padding: .2em 1em;
color:#000;
background-color:#fff;
}

#BaraNavigSecondary ul li a:hover {
color:#fff;
background-color:#000;
}


}


JavaScript:

function ShowBaraNavigSecond() {

var = "none";
var
}

[ahsansyed]

what is the diference b/w getEmenetById and getEmenetByClass ? both are using #id's and performing same task . . .so why javascript is differntiated by Class and ID?

[rahulc]

is there switch statement and do-while in js?

[johnwu]

Question: When I was trying to change the style for a class, I coded "text[1].style.", but after I hit "." after "style", all those functions under style didn't come out, instead there were bunch of warnings saying "intellisense was unable to determine an accurate completion list for this expression". Can you help me with this?

[ammarsadeq]

quick question: can it be done using for loop as explained previously

[sallycooper]

sorry, but i don't understand the difference between using 'id' vs 'class' when naming the element....it seems like you're doing the exact same thing, just changing the word.

[goattrigger]

can we loop this just like in the case of element tags? I tried by using the code you gave in the previous video and it didn't work. So, I was just wondering if it is even possible?

[robertreimann]

A short question. Does it matter if you use " or ' ?

[williamayoub]

I tried it without putting the [1] or [2] but it didn't work.why?

[QuickZ_]

I dont understand why you have to type a variable to the last row. This variable is not beeing called anywhere anyway.
var addThem = paragraph[2].innerHTML = firstParaText + secondParaText ;
Why cant it be just like this
paragraph[2].innerHTML = firstParaText + secondParaText ;
?

Its so distracting. I hope the answer comes in a lesson soon after this :)

[SpacedudeGFX]

Doing exactly what your doing is not a function.
gotta love programming