What is the best way to utilize my function across several different elements?

Question

What is the best way to utilize my function across several different elements?

I'm having trouble applying my function to multiple elements. My goal is to have each element change individually on its own.

Currently, only the first element is changing. I want all three of them to change separately.

For instance:

Not Available

Available

var updateVar = setInterval(updateStatus, 2000);

function updateStatus() {

  var status = Math.random();

  if (status < 0.90) {
    str = "Available";
    message = str.fontcolor("green");
    available = true;
  } else {
    str = "Not Avaliable";
    message = str.fontcolor("red");
    available = false;
  }

  var elements = Array.from(document.querySelectorAll('.demo'));
  for (const elem of elements) {
    elem.innerHTML = message;
    break;
  }
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

javascript

Answer 1

Answer №1

Try moving the random number generation inside the for loop and eliminating the break statement. I've also adjusted the probability threshold from 0.9 to 0.5 for better results.

var myVar = setInterval(breakdown, 2000);

function breakdown() {

  let elems = Array.from(document.querySelectorAll('.demo'));
  for (const elems1 of elems) {
    let d = Math.random();

    if (d < 0.50) {
      let str = "Available";
      text = str.fontcolor("green");
      x = true;
    } else {
      let str = "Not Available";
      text = str.fontcolor("red");
      y = false;
    }
    elems1.innerHTML = text;
  }
  
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

Answer 2

Try moving the random number generation inside the for loop and eliminating the break statement. I've also adjusted the probability threshold from 0.9 to 0.5 for better results.

var myVar = setInterval(breakdown, 2000);

function breakdown() {

  let elems = Array.from(document.querySelectorAll('.demo'));
  for (const elems1 of elems) {
    let d = Math.random();

    if (d < 0.50) {
      let str = "Available";
      text = str.fontcolor("green");
      x = true;
    } else {
      let str = "Not Available";
      text = str.fontcolor("red");
      y = false;
    }
    elems1.innerHTML = text;
  }
  
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

Answer 3

Answer №2

Your use of the break statement within the loop is causing it to exit prematurely without iterating over all elements. To address this, I have moved the loop to the top of the function based on your comments ('Available', 'Not available', 'Not available'). Additionally, the invocation of Array.from seems unnecessary in this context.

I suggest considering an alternative looping method such as forEach.

var myVar = setInterval(breakdown, 2000);

function breakdown() {

  var elems = document.querySelectorAll('.demo');
  for (const elem of elems) {
  
    var d = Math.random();

    if (d < 0.90) {
      str = "Avaliable";
      text = str.fontcolor("green");
      x = true;
    } else {
      str = "Not Available";
      text = str.fontcolor("red");
      y = false;
    }

    elem.innerHTML = text;
  }
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

Answer 4

Your use of the break statement within the loop is causing it to exit prematurely without iterating over all elements. To address this, I have moved the loop to the top of the function based on your comments ('Available', 'Not available', 'Not available'). Additionally, the invocation of Array.from seems unnecessary in this context.

I suggest considering an alternative looping method such as forEach.

var myVar = setInterval(breakdown, 2000);

function breakdown() {

  var elems = document.querySelectorAll('.demo');
  for (const elem of elems) {
  
    var d = Math.random();

    if (d < 0.90) {
      str = "Avaliable";
      text = str.fontcolor("green");
      x = true;
    } else {
      str = "Not Available";
      text = str.fontcolor("red");
      y = false;
    }

    elem.innerHTML = text;
  }
}

<p id="demo1" class="demo"></p>
<p id="demo2" class="demo"></p>
<p id="demo3" class="demo"></p>

Answer 5

Answer №3

Your loop is prematurely ending due to the "break" statement, only iterating over the first element.

To ensure each element updates independently, create a text generation function and call it on each element individually as shown below:

var myVar = setInterval(updateText, 1000);

function updateText(){
    var elements = document.querySelectorAll('.element');
  Array.from(elements).forEach(item => {
    item.innerHTML = generateText();
  })
}

function generateText(){
    var randNum = Math.random();
  if (randNum > .9) {
    return "Open";
  } else {
    return "Closed"
  }
}

Check out this JSFiddle link for the working code: https://jsfiddle.net/4whxv5q3/. Feel free to customize the text color or any other modifications you desire.

Answer 6

Your loop is prematurely ending due to the "break" statement, only iterating over the first element.

To ensure each element updates independently, create a text generation function and call it on each element individually as shown below:

var myVar = setInterval(updateText, 1000);

function updateText(){
    var elements = document.querySelectorAll('.element');
  Array.from(elements).forEach(item => {
    item.innerHTML = generateText();
  })
}

function generateText(){
    var randNum = Math.random();
  if (randNum > .9) {
    return "Open";
  } else {
    return "Closed"
  }
}

Check out this JSFiddle link for the working code: https://jsfiddle.net/4whxv5q3/. Feel free to customize the text color or any other modifications you desire.

What is the best way to utilize my function across several different elements?

Answer №1

Answer №2

Answer №3

Similar questions

The EXIF-JS data is becoming inaccessible beyond the method's scope

Retrieve the most recent information from a web scraper and display it on the Heroku application

Encountered a server error while trying to export from Content

What is the process for accessing a particular field in the data returned by the collection.find method in Expressjs and mongodb

React: Issue with For Loop not recognizing updates in Hook's State

Choose a single asset from the list of values stored in the Map

Ensuring the accurate usage of key-value pairs in a returned object through type-checking

Utilizing @Material-UI Tabs for a Stylish Navigation Bar

Generate a distinct identifier for the select element ID whenever a new row of data is inserted into a table

Ways to dynamically apply styles to the component tag depending on the visibility of its content

How to retrieve JSON data in Angular.js

What will occur if I use an XMLHttpRequest to request a file that is currently being downloaded?

Using JavaScript to automate keystrokes programmatically

Querying the api for data using Angular when paginating the table

What could be causing the delay in $q.all(promises).then() not waiting for the promises to complete?

Creating dynamic styles with Material-UI's useStyles

The JQuery ajax post function is typically called towards the conclusion of a JavaScript script

Is there a bug in Safari 8.0 related to jQuery and backslashes?

Leveraging Ajax for Executing a MySQL Query in PHP upon Clicking the Facebook Like Button

Efficiently sending a cookie with an Axios POST Request