JavaScript Homework

JavaScript
1

I have to create a clown clothing changer website. Like a character selector in a video game. There are 3 parts, head, body, and shoes. Right and left keys cycle through the clothes, while the up and down keys change the selected part (head to body).
I have written my code and it cycles through the first part (head), but when I try to change to body or shoes, it doesn’t work. Please help me!

console.log("Dress The Clown!")

// Variables

let head = document.getElementById("head")
let body = document.getElementById("body")
let shoes = document.getElementById("shoes")

let headIndex = 0
let bodyIndex = 0
let shoesIndex = 0

let toggleIndex = 0

// Event for toggle (up and down keys)

document.addEventListener('keydown', (event) => {
  console.log("toggleIndex is: " + toggleIndex)
  console.log("headIndex is: " + headIndex)
  console.log("bodyIndex is: " + bodyIndex)
  console.log("shoesIndex is: " + shoesIndex)
  if (event.key === "ArrowUp") {
    toggleIndex++
  } else if (event.key === "ArrowDown") {
    toggleIndex--
  }
  if (toggleIndex < 0) {
    toggleIndex = 2
  } else if (toggleIndex > 2) {
    toggleIndex = 0
  }   
  }) 

// Event for head

if (toggleIndex === 0) {
  document.addEventListener('keydown', (event) => {
    if (event.key === "ArrowLeft") {
      head.src = `./images/head${headIndex++}.png`
    } else if (event.key === "ArrowRight") {
      head.src = `./images/head${headIndex--}.png`
    }
    if (headIndex < 0) {
      headIndex = 5
    } else if (headIndex > 5) {
      headIndex = 0
    }  
  })
} 

//Event for body

if (toggleIndex === 1) {
  document.addEventListener('keydown', (event) => {
    if (event.key === "ArrowLeft") {
      body.src = `./images/body${bodyIndex++}.png`
    } else if (event.key === "ArrowRight") {
      body.src = `./images/body${bodyIndex--}.png`
    }
    if (bodyIndex < 0) {
      bodyIndex = 5
    } else if (bodyIndex > 5) {
      bodyIndex = 0
    }  
  })
}

// Event for shoes

if (toggleIndex === 2) {
  document.addEventListener('keydown', (event) => {
    if (event.key === "ArrowLeft") {
      shoes.src = `./images/shoes${shoesIndex++}.png`
    } else if (event.key === "ArrowRight") {
      shoes.src = `./images/shoes${shoesIndex--}.png`
    }
    if (shoesIndex < 0) {
      shoesIndex = 5
    } else if (shoesIndex > 5) {
      shoesIndex = 0
    }  
  })
}
2 
let toggleIndex = 0;

[add a keydown listener]

if (toggleIndex === 0) { 
  [add another keydown listener]  
}

This one will work because toggleIndex equals 0.

if (toggleIndex === 1) {
  [add another keydown listener]
}

What does toggleIndex equal again? Is this one ever going to work?

if (toggleIndex === 2) {
  [add another keydown listener]
}

Again, what does toggleIndex equal? Is this one ever going to work?

Also, I would think twice about adding all those separate keydown listeners. They are all going to fire when you press a key. I’m not sure why you can’t put the logic to handle all cases inside of one handler.

1 Like
3

“separate keydown listeners” do they fire even while in a separate if statement?

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.