javascript - Event listener not working?

Sorry for so many questions, but I suck at javascript and want to get good at it. I'm trying to make a page change colors when you press a button as another proof of concept for me, but it's not working and I'm not entirely sure why...

<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
button.eventlistener(BGchange, BGcolor());
function BGcolor (){
var BG = BG2+1
var BG2 = BG
if(BG==0){
    document.body.style.background = white;
}
else
    if(BG==1){
        document.body.style.background = black;
    }
}
</script>
</body>
</html>

k, fixed a little, here's what I have now:

<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
BGchange.addEventListener("click", BGcolor);
var BG++
function BGcolor (){
if(BG==0){
backgroundcolor = "white";
}
else
    if(BG==1){
    backgroundcolor = "black";
    }
}
</script>
</body>
</html>

<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
button.eventlistener(BGchange, BGcolor());
function BGcolor (){
var BG = BG2+1
var BG2 = BG
if(BG==0){
    document.body.style.background = white;
}
else
    if(BG==1){
        document.body.style.background = black;
    }
}
</script>
</body>
</html>

k, fixed a little, here's what I have now:

<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
BGchange.addEventListener("click", BGcolor);
var BG++
function BGcolor (){
if(BG==0){
backgroundcolor = "white";
}
else
    if(BG==1){
    backgroundcolor = "black";
    }
}
</script>
</body>
</html>

Share Improve this question edited Mar 7, 2014 at 0:24 asked Mar 6, 2014 at 23:55 Trevader24135 771 gold badge4 silver badges9 bronze badges

button.eventlistener(BGchange, BGcolor()); what does this line mean? – zerkms Commented Mar 6, 2014 at 23:56
What is button? What is eventlistener? What is BGchange? But even without knowing that I can tell you that calling BGcolor at this moment is wrong. Have a look at these articles to learn about event handling: quirksmode/js/introevents.html. – Felix Kling Commented Mar 6, 2014 at 23:57
... what is BGchange and why it's BGcolor() – zerkms Commented Mar 6, 2014 at 23:57
That line means It senses BGchange, and starts the function BGcolor. – Trevader24135 Commented Mar 6, 2014 at 23:58
the bgchange is ONLY an ID – Trevader24135 Commented Mar 6, 2014 at 23:59

| Show 6 more ments

1 Answer 1

Sorted by: Reset to default 2

If you're trying to listen for an event click, then you need something like this:

 document.getElementById("BGchange").addEventListener("click", BGcolor);

Then, you need to fix some things in this function:

function BGcolor (){
    var BG = BG2+1
    var BG2 = BG
    if(BG==0){
        document.body.style.background = white;
    } else if (BG==1) {
        document.body.style.background = black;
    }
}

Because you are trying to reference BG2 before it has been initialized so it is not clear what you want to be doing there.

In order, the things I changed:

Get the DOM element for the button with document.getElementById()
Use addEventListener() which is the standard way of adding event handlers
Change to the click event which is what buttons create when you click on them
Pass just a reference to the event handler as BGcolor without the parens. You were calling it immediately rather than passing a reference to the function that can be called later.

In addition, a bunch of things to fix in your BGcolor() function:

Variables that remember their state from one function call to the next must be declared outside that function.
A color value is a string so you would use "white", not white.
To change just the background color, it's best to use the backgroundColor property.

Here's a working version:

<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
document.getElementById("BGchange").addEventListener("click", BGcolor);

var curColor = "white";
function BGcolor (){
    if (curColor == "white") {
        curColor = "black";
    } else {
        curColor = "white";
    }
    document.body.style.backgroundColor = curColor;
}
</script>

Working demo: http://jsfiddle/jfriend00/Nk2N5/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Event listener not working? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)