Change a buttons css using JS

Question

I have a hidden button i want to show when the user has 5 coffee this is my code but it just doesn't seem to work

JS

window.setInterval(function(){

                   if (coffee == 5) {
                   document.getElementById("U1").style.visibility = "visible";
                   console.log()
                   }

                   }, 500);

HTML

<button class="U1" onclick="SuperPlant()"> Super Beans</button><br>

CSS

.U1 {
visibility: hidden;
}

ERROR IN CONSOLE

TypeError: null is not an object (evaluating 'document.getElementById("U1").style')

You are using a class but selecting the element using id method so either you need to declare an id to the button or you need to use getElementsByClassName() — Mr. Alien
– Mr. Alien, Commented Jan 31, 2015 at 3:46

Ian Hazzard · Accepted Answer · 2015-01-31 03:46:07Z

1

You need to put quotes around your setInterval() command, and it doesn't need to be inside of a function. Like this:

window.setInterval("if (coffee == 5) { document.getElementById('U1').style.visibility = 'visible'; console.log() }", 500);

NOT THIS:

window.setInterval(function() {if (coffee == 5) { document.getElementById("U1").style.visibility = "visible"; console.log() } }, 500);

Also your button should have id="U1" NOT class="U1". Which means change CSS selector to #U1.

edited Jan 31, 2015 at 3:46

answered Jan 31, 2015 at 3:39

Ian Hazzard

7,7688 gold badges37 silver badges61 bronze badges

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

2 Comments

pfych Over a year ago

When i do that i get SyntaxError: Function statements must have a name. and if i format it i get the error UNEXPECTED EOF

Ian Hazzard Over a year ago

Yes, you do not have an element with an ID of "U1". As I stated in my answer above, you need to change your HTML.

MattSizzle · Accepted Answer · 2015-01-31 03:56:29Z

0

I personally would do it as follows:

FIDDLE

HTML

<button id="U1" onclick="SuperPlant()" style="visibility: hidden">Super Beans</button>

JAVASCRIPT

var coffee = 5;

function showButton() {

    if (coffee == 5) {
        document.getElementById("U1").style.visibility = "visible";
        console.log()
    }

}

window.setInterval(showButton, 500);

I would recommend against the anonymous function in the setInterval as it can be hard to troubleshoot.

Hope this Helps.

answered Jan 31, 2015 at 3:56

MattSizzle

3,1752 gold badges25 silver badges43 bronze badges

Comments

Philip G · Accepted Answer · 2015-01-31 05:14:44Z

0

Change your HTML :

<button id="U1" onclick="SuperPlant()"> Super Beans</button><br>

AND CSS:

#U1 {
   visibility: hidden;
}

This is because you are using getElementById(); and your button where only named by class, and not ID.

edited Jan 31, 2015 at 5:14

Philip G

4,1142 gold badges25 silver badges42 bronze badges

answered Jan 31, 2015 at 3:50

Vijay

3,0231 gold badge17 silver badges24 bronze badges

Collectives™ on Stack Overflow

Change a buttons css using JS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related