CODEWITHSUNDEEP
jquery
James Kitcey
James Kitcey

Reputation: 21

Issues Coding Game with Changing Backgrounds with JQuery

I'm creating an interactive horror narrative website where you explore a house and find notes along the way. I'm coding it with JQuery to change backgrounds and moving interface elements around when you click on circle icons.

Interface example.

I've already run into a little bit of problem. I have a set up where you click on a place to go and it changes the background and the classes and positions of buttons, like this example for going into the bathroom:

HTML:

<div id="background">
   <div id="nav_btn1" class="bathroom"></div>
   <div id="nav_btn2" class="upstairs"></div>
   <div id="nav_btn3" class="kitchen"></div>
   <div id="nav_btn4" class="living_room"></div>
</div>

JQuery:

$(".bathroom").click(function() {
    clickCount += 1;
    $("#background").css("background", "url(images/backgrounds/bathroom.jpg) no-repeat");
    $("#nav_btn1").css("top", "500px");
    $("#nav_btn1").css("left", "450px");
    $("#nav_btn1").removeClass("bathroom").addClass("entrance");
    $("#nav_btn2").css("top", "-99999px");
    $("#nav_btn2").css("right", "-99999px");
    $("#nav_btn3").css("top", "-99999px");
    $("#nav_btn3").css("left", "-99999px");
    $("#nav_btn4").css("top", "-99999px");
    $("#nav_btn4").css("left", "-99999px");
});

That code above will take you to the bathroom screen just fine: Bathroom screen

I tried having that bottom button, whose class has now been changed to 'entrance', take you back to that first screen you saw with this simple code:

$(".entrance").click(function() {
    clickCount += 1;
    $("#background").css("background", "url(images/backgrounds/entrance.jpg)");
    $("#nav_btn1").css("top", "250px");
    $("#nav_btn1").css("left", "140px");
    $($(this)).removeClass("bathroom").addClass("entrance");
    $("#nav_btn2").css("top", "250px");
    $("#nav_btn2").css("right", "250px");
    $("#nav_btn2").attr("class", "upstairs");
    $("#nav_btn3").css("top", "125px");
    $("#nav_btn3").css("left", "270px");
    $("#nav_btn3").attr("class", "kitchen");
    $("#nav_btn4").css("top", "125px");
    $("#nav_btn4").css("left", "375px");
    $("#nav_btn4").attr("class", "living_room");
});

However, this does not work for me, I'm remaining stuck in the bathroom.

I'm quite the noob with JQuery and don't quite know what I'm doing haha. If one of you JQuery masters knows how to pull this simple little function off so I don't run into this error in the future that will be fantastic. Also feel free to share any solutions to any easier way of setting this code up. I'll be able to hit this project running full speed with your help.

Upvotes: 2

Views: 42

Answers (2)

Franco
Franco

Reputation: 2329

This is because in the second attempt going to the entrance you are still referencing to:

$("#background").css("background", "url(images/backgrounds/bathroom.jpg) no-repeat");

So you are using the same ID for both scene's.

Upvotes: 0

adeneo
adeneo

Reputation: 318302

When you add an event handler, it's only added to the elements matching the given selector at the time it's bound.

Changing an elements selector later on, so it matches whatever was given in a previously initialized event handler, does not make the event handler magically work, as the element didn't match when the event handler was set.

One of many solutions would be to use a delegated event handler, something like 

$(document).on('click', '.entrance', function() {
    clickCount += 1;

    ...etc

Another would be to put the code in the event handler in a function, as in

function doThings() {
    clickCount += 1;
    $("#background").css("background", "url(images/backgrounds/entrance.jpg)");
    $("#nav_btn1").css("top", "250px");
    $("#nav_btn1").css("left", "140px");

    ... etc

and then do 

$(".entrance").on('click', doThings);

and then you could just do 

$(".bathroom").click(function() {
    clickCount += 1;
    $("#background").css("background", "url(images/backgrounds/bathroom.jpg) no-repeat");
    $("#nav_btn1").css("top", "500px");
    $("#nav_btn1").css("left", "450px");

    $("#nav_btn1").on('click', doThings);

    ...etc

As a sidenote, you can set multiple styles doing

$("#nav_btn1").css({
    top     : "250px",
    left    : "140px",
    'class' : "someClass"
});

Upvotes: 1

Related Questions