auftragsmoewe auftragsmoewe - 16 days ago 5
jQuery Question

jQuery button doesnt work

Im very new to working with jQuery, and I dont have much experience, so please excuse me if Im making stupid mistakes.

$(document).ready(function() {
$("#button").click(function() {
if ($("#button").hasClass("clicked-once")) {
$(".list").css("color","red");
$("#button").removeClass("clicked-once");
}
else {
$("#button").addClass("clicked-once");
$(".list").css("color","black");
}


});

I got this idea from this forum, and I dont even know if these commands are valid, but if they exist, I wouldnt know why it doesnt work.
The html site looks somewhat like this:

<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body id="list">
<div>
<SPAN title="cool hover text"> <a class="list" href="sites/link.html" target="ContentFrame"> link </a> </span>
<br><br><br>
<center>
<button type="button" id="design_button"> Design </button>
</center>
</div>
<script src="scripts/main.js"></script>
</body>
</html>


I dont really know what to do to be honest, thanks in advance

Answer

In your html, there is no button with id "button". JQuery selector # is for id:s. So In your case, it would work with $('#design_button').

$(document).ready(function() {
$("#design_button").click(function() {
    var btn = $(this);
    if (btn.hasClass("clicked-once")) {
        $(".list").css("color","red");
        btn.removeClass("clicked-once");
    }
    else {
        btn.addClass("clicked-once");
        $(".list").css("color","black");
    }
});
});