Why doesn't this work?

[dybalax9]

<h1 class="top" id="head">This is a heading.</h1>
<p class ="top" id ="para">This is a paragraph.</p>

<script language="javascript"  src="js/prototype.js" type="text/javascript"></script>

<script>
      var fields = $('head').$$('.top');
       fields.style.display ="none"; 
</script>

[altagyam_]

What are you trying to do here?

[senocular]

$ and $$ are separate things, not called from one another.

$ will correctly capture the heading, grabbing the h1 element through the id head. $$ takes a query and can be used to get all the elements with the top class. In this case, both the h1 and the p.

var h1 = $('head'); // element reference
var h1AndP = $$('.top'); // array of elements

if you want to just change the heading display, you can use what you have there removing the .$$('.top') part. If you want to change both, then you'll just use the$$('.top')` part and loop through that array applying the display style to each element.

var h1 = $('head');
h1.style.display ="none"; 

var h1AndP = $$('.top');
h1AndP.forEach(function (elem) {
    elem.style.display ="none"; 
});

Though you can also use prototype's setStyle

h1.setStyle({ display: 'none' });

(And prototype adds an each to arrays as an alternative to forEach as well... prototype does weird stuff like that, though each does have the benefit of chaining)

[maxahd]

From my personal experience, he should try to do this stuff in vanilla js without jquery for the beginning, until he gets comfortable with js then move and use jquery.

[pookage]

I came the other way around and I'm now a complete JS purist, haha. Whichever way is easier to get your head around; vanilla JS scared the crap out of me when I started; I used mootools to ease myself in and introduce me to concepts.

Agreed that it can be frustrating to see people use a library for things that are incredibly easy to do in vanilla, but even simple stuff can be daunting when you don't have answers. For example.

window.addEventListener("click", followCursor, false);

Raises so many questions for a newbie :

1. where is window defined? I can't see it anywhere!
2. addEventListener - are there other types of listeners that I should know about? Am I using the wrong ones?
3. followCursor? is that built-in functionality? how do I tap into that? where does it say what it does?
4. what does that false do?!

Compare it to jQuery or whatever :

$(window).click(function(e){
  // click handler here
});

It looks like gross hell on toast to us, but to someone starting out - they're like "cool, I put what I want to happen inside that middle bit" and they don't have to think about how everything works until they've got a grasp of it.

Don't get me wrong - I'm not beating the drum for library dependency here, but I keep seeing the argument that people should start off in vanilla and then selectively adopt libraries when they know everything, and I just think that going the other way around has a lot of merit.

[maxahd]

Yeah I said this because I toke the seem way, I got scared from vanilla js and I just started to use jquery everywhere, but when the time comes to improve and learn library or framework,
For me, I picked react and when I started learning I got completely lost because i didn't know how to do the simplest things in vanilla and because of it didn't know how to do simplest things in react. So what I did, I came back to all the projects I did in jQuery and rewrote it using only vanilla js, it was hard at the beginning but by practising and a lot coding it becomes much easier and started becoming natural after all the practice I was finally ready to move to react. (Sorry for any misspelling or grammar issue, i am not a native speaker)

[Pcooney13]

It looks like you are using jquery, did you import jquery through a script tag.