CODEWITHSUNDEEP
javascripthtmljqueryevent-handlingjquery-events
firala
firala

Reputation: 63

JQuery partly triggered

I'm a beginner with JQuery and I was trying to create a button that dynamically changes the colors defined in the CSS depending on what color it is right now (just switch between blue / red) and also change the text on the button.

The .draggable() part executes just fine and so does the first and last console.log, so everything but the part within the click event handler works ... but why?

Relevant html code:

<!DOCTYPE html>
<html>
<head>
    <title>Meine Website</title>
    <meta charset="utf-8">
    <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            type="text/javascript">
    </script>
    <script
            src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
            type="text/javascript">
    </script>
    <script src="home_jquery.js"></script>
    <script src="home_javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="home_style_blau.css">

</head>
<body>
    <input type="button" id="farbwechsel_button" value="Rot" />
/* rest of html (taschenrechner_box, etc.) */
</body>

Here's the jQuery part:

var blau = true;

$(document).ready(function () {
    $('#taschenrechner_box').draggable();


    console.log("test1");
    $('#farbwechsel_button').click(function() {
        console.log("test2");


        if (blau == true) {
            console.log("blau = " + blau);
            $('body').css({"background-color": "8b0000"});
            $('#farbwechsel_button').value = "Blau";
            blau = false;
        }
        else {
            console.log("blau = " + blau);
            $('body').css({"background-color": "lightsteelblue"});
            $('#farbwechsel_button').value = "Rot";
            blau = true;
        }
        console.log("test3");

    })
    console.log("test4");
});

Upvotes: 0

Views: 42

Answers (1)

ZiNNED
ZiNNED

Reputation: 2650

In your HTML you have:

<input type="button" id="farbwechsel_button" value="Rot" />

But in your JS you refer to 

$('#farbwechel_button').click(function() {

Note the forgotten s in your JS. So the JS should be:

$('#farbwechsel_button').click(function() {

Edit: you've forgotten the s in al your referrals to the button. Don't forget to add it everywhere. You've also forgotten a ; just before the last console.log() function.

Edit 2: Here's a Fiddle with a working example. It's pretty much self explanatory. In this case you preferably should make use of classes which you toggle on pressing the button.

Upvotes: 2

Related Questions