CODEWITHSUNDEEP
javascripthtml
BeginnerAlibi
BeginnerAlibi

Reputation: 35

How to apply class function on id function?

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?

Upvotes: 2

Views: 109

Answers (3)

Ajit Kumar
Ajit Kumar

Reputation: 1505

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.

Upvotes: 0

Jerry
Jerry

Reputation: 1583

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>

Upvotes: -1

Mark Baijens
Mark Baijens

Reputation: 13222

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>

Upvotes: 2

Related Questions