How to apply class function on id function?

Question

So I have a task to make function (show/hide) for every paragraph (five of them) and I did like so

function btn() {
    var x = document.getElementById('para');
    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

For every paragraph I used Id instead of class. Because task said one button per one paragraph.

Now I have a problem how to apply this (color) function for all of them in the same time.

function color() {
    bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
    elements = document.getElementByClassName('color');

    for (var i = 0; i < elements.length; i++) {
        document.getElementByClassName('color')[i].style.backgroundColor = bgColorCode;
    }
}

//Html
<button onclick = "color()">Color</button>
<button onclick = "btn()">Show/Hide</button>
<p id = "para"> Example 1 </p>

<button onclick = "btn2()">Show/Hide</button>
<p id = "para2"> Example 2 </p>
...

Idk how to apply this function "color" to all of my paragraphs because they are under id?

Any solutions?

https://stackoverflow.com/questions/10111668/find-all-elements-whose-id-begins-with-a-common-string — Đào Minh Hạt, Oct 29 '18 at 10:03
@NileshJain OP is using vanilla JS - they don't have access to jQuery's functions. — treyBake, Oct 29 '18 at 10:04
I just started with html/css/js languages after I learn jquery I will apply it — BeginnerAlibi, Oct 29 '18 at 10:04
@BeginnerAlibi keep on learning vanilla JS - I wish I had. Now all I know is resource-heavy jQuery — treyBake, Oct 29 '18 at 10:04
a test you could do, is add a `console.log` or `alert` into the function to see if the function is even firing — treyBake, Oct 29 '18 at 10:05

Mark Baijens · Accepted Answer · 2018-10-29T10:15:19.157

If you add the class color to your para elements and change the function getElementByClassName() to getElementsByClassName() (you forgot an s). then your code works. Within the for loop you can use the elements array elements[i] instead of another call to the getElementsByClassName() function.

function color() {
  bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
  elements = document.getElementsByClassName('color');

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = bgColorCode;
  }
}

//just slightly modified so it works with multiple paragraphs by making the id a function parameter.
function btn(id) {
  var x = document.getElementById(id);
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button onclick="color()">Color</button>
<button onclick="btn('para')">Show/Hide</button>
<p class="color" id="para">Example 1</p>

<button onclick="btn('para2')">Show/Hide</button>
<p class="color" id="para2">Example 2</p>

@BeginnerAlibi Glad i could help. If this is the best solution for you please accept it as an answer so people know your question is answered. If one of the other answers is better for you then of course accept that one. — Mark Baijens, Oct 29 '18 at 11:18

Ajit Kumar · Answer 2 · 2018-10-29T12:53:54.530

Hope this is what you want. Tell me if you have doubts.

The function toggleshow(htmlObj) selects next element sibling of element which triggered the function with an argument this which represent the current HTMLelement and if the value of style.display is set to none, then it changes it value to block else change it to none.

see HTML DOM manipulation

The second function color() takes advanced parameters that is (string)id of HTML element, and loops through all arguments passed and change bgcolor for every id. You can pass many arguments as you want.

see this

document.querySelector('css selector') selects first html element using css selectors

function toggleshow(htmlObj){
  var par = htmlObj.nextElementSibling;
  if(par.style.display !== 'none'){
    par.style.display = 'none';
  }else{
    par.style.display = 'block';
  }
}

function color(){
  
  bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);

  for (var i = 0; i < arguments.length; i++) {
      document.querySelector('#'+arguments[i]).style.backgroundColor = bgColorCode;
  }
}

button{
  display:block
}

<button onclick = "color('para', 'para2', 'para3', 'para4', 'para5')">Color</button>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para"> Example 1 </p>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para2"> Example 2 </p>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para3"> Example 2 </p>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para4"> Example 2 </p>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para5"> Example 2 </p>

*sorry for my bad English and spelling mistakes.

you should explain your code so OP understands the problem and solution rather then just remembers how-to :) — treyBake, Oct 29 '18 at 10:24
This one also works, even better so I can understand it, thanks — BeginnerAlibi, Oct 29 '18 at 11:23
I know, I should explain the solutions but I am very bad at explaining things. — Ajit Kumar, Oct 29 '18 at 12:56

score -1 · Answer 3 · answered Oct 29 '18 at 10:19

A better and more dynamic solutions with JQUERY:

*If you don't know how to use Jquery then you can check Mark Baijens answer.

function btn(e) {
    if ($(e).next().css('display') == "none") {
      $(e).next().show()
      $(e).html("Hide")
    } else {
      $(e).next().hide()
      $(e).html("Show")
    }
}

function color() {
    bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
    //elements = document.getElementByClassName('color');

    $(".para").css("background-color",bgColorCode)
}

<div>
<button onclick = "color()">Color</button>
</div>
<hr>
<div id="wrapper">
<button onclick = "btn(this)">Show/Hide</button>
<p class="para"> Example 1 </p>
<hr>
<button onclick = "btn(this)">Show/Hide</button>
<p class="para"> Example 2 </p>
<hr>
<button onclick = "btn(this)">Show/Hide</button>
<p class="para"> Example 3 </p>
<hr>
<button onclick = "btn(this)">Show/Hide</button>
<p class="para"> Example 4 </p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

question is tagged with JavaScript not jQuery - not everyone wants to use it (and for some good reason) — treyBake, Oct 29 '18 at 10:23

How to apply class function on id function?

3 Answers3