The unpredictable number is malfunctioning and is only showing up on the initial element

Question

The unpredictable number is malfunctioning and is only showing up on the initial element

I'm facing an issue with my code. The scenario is, upon clicking the first door, an image opens based on a random number condition; for example, 1 equals an empty door and 2 equals finding a person behind it.

Now, when I click on the second or third door, the previously opened door should revert to its original image, but currently, only the first door is functioning as expected.

To address this problem, I believe adding ".is-selected" might be necessary, but I am unsure about its implementation.

Instead of utilizing HTML, I aim to accomplish this using JavaScript.

const doorTarget = document.querySelector(".door-track");
const doorClick = Array.from(doorTarget.children);

const door = true;

doorClick.forEach(function (test) {
  test.addEventListener("click", function () {
    if (door) {
      const doorRandom = Math.floor(Math.random() * 3) + 1;
  
      console.log(doorRandom);

      if (doorRandom === 1) {
        document.querySelector(".test1").src = "images/friends.png";
      } else {
        document.querySelector(".test1").src = "images/empty-room.png";

      }
    }
  })
})

<div class="door-wrapper">
    <div class=" door-track-container">
      <ul class="door-track">
        <li class="door-number">
          <a href="#"><img class="test1 is-selected" src="images/door.png"></a>
        </li>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
      </ul>
    </div>

  </div>

javascript

Answer 1

Answer №1

Mastering Event Delegation

Implement an eventListener() on the parent list element (<ol>, <ul>, etc.) and set conditions so that only specific child elements like <img>s can respond to the defined event (e.g. click, mouseover, etc). Utilize the Event Object by accessing:

event.target always refers to the triggering element of the event (e.g. clicked <img>, mouseover <div>, etc.)
event.currentTarget represents the element with the attached eventListener().

 <ol id='list'>...</ol>
 document.querySelector('#list').addEventListener('click', function(event) {...

If using <a> tags as buttons and wanting to prevent their default behavior, adjust the markup as follows:

  <a href="#/"></a>

Adding a forward slash should resolve this: /

Demo

The demo contains detailed explanations in the comments.

// This will be event.currentTarget
const doorTarget = document.querySelector(".door-track");
// Gather all img.test1 into a NodeList
const doors = document.querySelectorAll('.test1');

// Remember to always pass the event object
doorTarget.addEventListener("click", function(event) {
  // Set all img.src to default
  doors.forEach(function(door) {
    door.src = "https://placeimg.com/160/90/nature";
  });

  // Check if the clicked element is NOT the list itself... 
  if (event.target !== event.currentTarget) {
    // Verify that the clicked element's class is .test1
    if (event.target.className === "test1") {
      // Generate a random number between 1 and 3
      const doorRandom = Math.floor(Math.random() * 3) + 1;
      // If the number is 1...
      if (doorRandom === 1) {
        // Modify the src of the clicked image to a person image
        event.target.src = "https://placeimg.com/160/90/people";
      } else {
        // Otherwise change the clicked image to a tech image
        event.target.src = "https://placeimg.com/160/90/tech";
      }
    }
  }
});

ul {
  display: flex;
  list-style: none;
}

<div class="door-wrapper">
  <div class=" door-track-container">
    <ul class="door-track">
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
    </ul>
  </div>

</div>

Answer 2

Mastering Event Delegation

Implement an eventListener() on the parent list element (<ol>, <ul>, etc.) and set conditions so that only specific child elements like <img>s can respond to the defined event (e.g. click, mouseover, etc). Utilize the Event Object by accessing:

event.target always refers to the triggering element of the event (e.g. clicked <img>, mouseover <div>, etc.)
event.currentTarget represents the element with the attached eventListener().

 <ol id='list'>...</ol>
 document.querySelector('#list').addEventListener('click', function(event) {...

If using <a> tags as buttons and wanting to prevent their default behavior, adjust the markup as follows:

  <a href="#/"></a>

Adding a forward slash should resolve this: /

Demo

The demo contains detailed explanations in the comments.

// This will be event.currentTarget
const doorTarget = document.querySelector(".door-track");
// Gather all img.test1 into a NodeList
const doors = document.querySelectorAll('.test1');

// Remember to always pass the event object
doorTarget.addEventListener("click", function(event) {
  // Set all img.src to default
  doors.forEach(function(door) {
    door.src = "https://placeimg.com/160/90/nature";
  });

  // Check if the clicked element is NOT the list itself... 
  if (event.target !== event.currentTarget) {
    // Verify that the clicked element's class is .test1
    if (event.target.className === "test1") {
      // Generate a random number between 1 and 3
      const doorRandom = Math.floor(Math.random() * 3) + 1;
      // If the number is 1...
      if (doorRandom === 1) {
        // Modify the src of the clicked image to a person image
        event.target.src = "https://placeimg.com/160/90/people";
      } else {
        // Otherwise change the clicked image to a tech image
        event.target.src = "https://placeimg.com/160/90/tech";
      }
    }
  }
});

ul {
  display: flex;
  list-style: none;
}

<div class="door-wrapper">
  <div class=" door-track-container">
    <ul class="door-track">
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
      <li class="door-number">
        <a href="#/"><img class="test1" src="https://placeimg.com/160/90/nature"></a>
      </li>
    </ul>
  </div>

</div>

Answer 3

Answer №2

Here is the code formatted as per your request, please review the instructions

const doorTarget = document.querySelector(".door-track");
const doorClick = Array.from(doorTarget.children);

const door = true;

doorClick.forEach(function (test) {
  let t= test;
  test.addEventListener("click", function () {
    // reset all selected classes, remove this if not needed I am unsure if you want it
    doorClick.forEach((item)=> item.querySelector("img").classList.remove("is-selected")) 
    
    if (door) {
      const doorRandom = Math.floor(Math.random() * 3) + 1;
      
      var img = t.querySelector("img");
      
      console.log(doorRandom);
      // add class selected to the image
      img.classList.add("is-selected")
      // change the src or whatever of the image
      if (doorRandom === 1) {
        img.src = "images/friends.png";
      } else {
        img.src = "images/empty-room.png";

     }
      
   }
 })
})

.is-selected{
border:1px solid red;
}

<div class="door-wrapper">
    <div class=" door-track-container">
      <ul class="door-track">
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
      </ul>
    </div>

  </div>

Answer 4

Here is the code formatted as per your request, please review the instructions

const doorTarget = document.querySelector(".door-track");
const doorClick = Array.from(doorTarget.children);

const door = true;

doorClick.forEach(function (test) {
  let t= test;
  test.addEventListener("click", function () {
    // reset all selected classes, remove this if not needed I am unsure if you want it
    doorClick.forEach((item)=> item.querySelector("img").classList.remove("is-selected")) 
    
    if (door) {
      const doorRandom = Math.floor(Math.random() * 3) + 1;
      
      var img = t.querySelector("img");
      
      console.log(doorRandom);
      // add class selected to the image
      img.classList.add("is-selected")
      // change the src or whatever of the image
      if (doorRandom === 1) {
        img.src = "images/friends.png";
      } else {
        img.src = "images/empty-room.png";

     }
      
   }
 })
})

.is-selected{
border:1px solid red;
}

<div class="door-wrapper">
    <div class=" door-track-container">
      <ul class="door-track">
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
        <li class="door-number">
          <a href="#"><img class="test1" src="images/door.png"></a>
        </li>
      </ul>
    </div>

  </div>

Answer 5

Answer №3

If you want to toggle a class, you can do so by using the following JavaScript:

document.querySelector(".test1").classList.toggle("is-selected");

This will add the class if it's not already present, and remove it if it is.

Additionally, to remove a class specifically, you can use:

document.querySelector(".test1").classList.remove("is-selected");

Don't forget that in order to target multiple elements, you should utilize querySelectorAll() and iterate through the HTML Collection accordingly.

Answer 6

If you want to toggle a class, you can do so by using the following JavaScript:

document.querySelector(".test1").classList.toggle("is-selected");

This will add the class if it's not already present, and remove it if it is.

Additionally, to remove a class specifically, you can use:

document.querySelector(".test1").classList.remove("is-selected");

Don't forget that in order to target multiple elements, you should utilize querySelectorAll() and iterate through the HTML Collection accordingly.

The unpredictable number is malfunctioning and is only showing up on the initial element

Answer №1

Mastering Event Delegation

Demo

Answer №2

Answer №3

Similar questions

Allowing input fields to accept decimal numbers

Developing a digital sound system using JavaScript

Sharing Data via JSON for a Pop-Up Display

Reasons for storing `https.get()` inside a request constant in Node.js

What is the method to extract a single user instead of a group of users?

What are the steps to create a connect4 board featuring rounded corners and curved sides?

Advancing through time with progress

What method does AngularJS use to distinguish between these two properties?

Struggling to differentiate between the various CSS elements on a webpage and pinpointing the correct CSS for use

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

Insert a percentage sign into a right-aligned text box

Issue with Webpack: file-loader failing to load SVG files dynamically in HTML

Automatically generate the first user on the Parse Server system

Is your jQuery search scope correctly restricted?

Using JSON.parse on the output of BsonDocument.ToJson results in an error

Using JQuery to make a GET request and receive a JSON response, then selecting particular objects

Encountering OAuthCallbackError while using Next.js Auth

Refreshing a webpage post initial loading using Next.js

Controlling Javascript events

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript