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

Unable to transmit Javascript array to PHP using Ajax

I am confused about the process of mounting components

Automatically unselect the "initially selected item" once two items have been selected in Material UI

After placing two divs within another div and applying justify content, an unexpected blank space has appeared

Does the Angular templateCache get shared across different applications? And does it stay persistent?

When the width of the window is hidden, conceal

AngularJS - Sending configuration values to a directive

Setting properties on functions and defining their prototype

I am attempting to utilize the fetch API method to initialize the store's state, but for some reason, it is not functioning properly

Grid layout with card tiles similar to Google Plus

My goal is to retrieve and print the duplicated values only once from an associative array

Using JavaScript for Text Processing on Disk

I'm looking for the specific jQuery/JavaScript function that will accomplish this task

Is it possible to dynamically change the color of text based on its position using CSS, JS, or JQuery?

Adding key/value pairs to an array of objects in RxJS Observables can be easily

Solving the issue of image paths within external SCSS files in Nuxt.js

What is the best way to conceal certain choices in a dropdown menu?

I’m keen on utilizing JQuery with Node.js and EJS, but I’m encountering an issue where $ is not

Modify the input based on the chosen option operation

Using Jquery and AJAX to dynamically fill out an HTML form based on dropdown selection