How to javascript my button onclick?

Question

Here is my js:

function showMore() {
    document.getElementById("watch-description").style.display = "block";
    document.getElementsByClassName(".yt-card.yt-card-has-padding").style.padding = "15px";
}

function showLess() {
    document.getElementById("watch-description").style.display = "none";
    document.getElementsByClassName(".yt-card.yt-card-has-padding").style.padding = "15px 15px 10px 15px";
}

Why does my button with js function not work?

One of two buttons:

<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-expander yt-uix-expander-head yt-uix-expander-body" type="button" onclick="showLess();">

What does not work? Are you sucessfully invoking the function. Is the display "none" not set..? — Arno van Lieshout
– Arno van Lieshout, Commented Jul 15, 2015 at 15:38
document.getElementsByClassName() does not return a single element. It returns an HTMLCollection that you will need to index before you can set styles. — Phylogenesis
– Phylogenesis, Commented Jul 15, 2015 at 15:39
@Kabulan0lak that will work.. it just is not needed if there 2 function in the onclick the ; is used — Josh Stevens
– Josh Stevens, Commented Jul 15, 2015 at 15:40

Phylogenesis · Accepted Answer · 2015-07-15 15:51:25Z

1

As per my comment, document.getElementsByClassName() returns an HTMLCollection rather than a single element. You need to treat this as though it is an Array in order to set styles on the individual elements:

function showMore() {
    document.getElementById("watch-description").style.display = "block";

    var els = document.getElementsByClassName("yt-card yt-card-has-padding");
    for (var i = 0; i < els.length; i++) {
        els[i].style.padding = "15px";
    }
}

function showLess() {
    document.getElementById("watch-description").style.display = "none";

    var els = document.getElementsByClassName("yt-card yt-card-has-padding");
    for (var i = 0; i < els.length; i++) {
        els[i].style.padding = "15px 15px 10px 15px";
    }
}

edited Jul 15, 2015 at 15:51

answered Jul 15, 2015 at 15:44

Phylogenesis

7,90024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Phylogenesis Over a year ago

Could the downvoter at least give me a reason why you think this answer is wrong or misleading?

user5120099 Over a year ago

This function is nice. I know but that doesn't change anything. The button onclick still doesn't work :(

user5120099 Over a year ago

Even without changing the paddings the script doesn't work.

Phylogenesis Over a year ago

Where are you putting the functions?

user5120099 Over a year ago

new one: GET youtube.com/gen_204?feature=watch-show-more-metadata net::ERR_BLOCKED_BY_CLIENT

|

RepeatQuotations · Accepted Answer · 2015-07-15 15:49:23Z

0

getElementsByClassName should not have . class selector before each class. Change the fullstops to spaces, and sort through the returned array variable to edit the padding of the element.

function showMore() {
   document.getElementById("watch-description").style.display = "block";
   var classes = document.getElementsByClassName("yt-card yt-card-has-padding");
   classes[0].style.padding = "15px";
   classes[1].style.padding = "15px";
  } 

function showLess() {
   document.getElementById("watch-description").style.display = "none";
   var classes = document.getElementsByClassName("yt-card yt-card-has-padding");
   classes[0].style.padding = "15px 15px 10px 15px";
   classes[1].style.padding = "15px 15px 10px 15px";
  }

edited Jul 15, 2015 at 15:49

answered Jul 15, 2015 at 15:43

RepeatQuotations

7446 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to javascript my button onclick?

2 Answers 2

16 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related