Jquery to vanilla JS

JavaScript
1

what is the equivalent vanilla JS script for the jQuery .hide signature like so http://jsbin.com/tapote/7/edit?html,js,output

2

.hide() is basically setting the css display property to none.
.show() is setting the css display property to visible.

3

Hi,

Might I ask what you are attempting to do with the script you link to?

4

Well, I’m trying to display 2 divs randomly chosen from an array of 6 divs

5

Well, you could do it like this:

<div id="team">
    <div class="banner">Developers</div>
    <div class="banner">Designers</div>
    <div class="banner">Legal</div>
    <div class="banner">Sales</div>
    <div class="banner">Management</div>
</div>
<button>Randomize</button>

and:

function displayTwoRandomElements(parent){
  var noEls = $(parent).children().length
     el1 = Math.floor(Math.random()*noEls),
     el2 = Math.floor(Math.random()*noEls);

  while (el1 === el2){
    el2 = Math.floor(Math.random()*noEls);
  }
    
  $(parent)
    .children()
      .hide()
        .filter(':eq(' + el1 + '), :eq(' + el2 + ')')
          .show();
}

$("button").on("click", function(){
    displayTwoRandomElements("#team");
});

displayTwoRandomElements("#team");

demo

Was your question about how to get it working or how to get it working without jQuery?

6

whoa, thanks Pullo! My question was how to get it working and how to get it working using plain JS (no jQuery).

7

Well now you have the jQuery version, why not have a bash at implementing the vanilla version yourself?
Let us know how you get on.

This site might be helpful: http://youmightnotneedjquery.com/

8

Say Pullo, I used your jQuery version and its taking forever to load at the end of which nothing happens. I have tried all i could, clear cache, use a virgin computer, used both CDN and local version jQuery. Nothing. What could I still be doing wrong? I have made a pastebin of the file as it is here http://pastebin.com/v3aJCd6r. Thanks for taking the trouble to help

9

Hi,

Move the script to the bottom of the document, just before the closing </body> tag.
As it is, you are trying to call the function before the elements are present in the page.

1 Like
10

Jeez, I should of known better. Thanks a ton for all your help. Please look out for that plain JS version soon. Oh and ps if there’s anywhere I can push some coffee money to…

11

No problem. It’s nice to help someone that wants to help themselves :smile:

Nah, you’re alright. If you like JS and Ruby stuff though, you could consider following me on Twitter (link on my profile page).