CODEWITHSUNDEEP
javascripthtml
newbie
newbie

Reputation: 25

Automatically Change Individual Table Data Using Javascript

I'm trying to mimic the look of a stock-exchange board, but can't seem to automatically change text without stopping another.

I've tried

var text = ["2.0%", "1.7%", "1.9%", "1.8%", "1.9%"];
var counter = 0;
var elem = document.getElementById("n1");
var inst = setInterval (change, 1000);

function change () {
elem.innerHTML = text[counter];
counter++;
var content = document.getElementById("n1");
    if (counter >= text.length) {
    counter = 0;
    }
}

var text = ["-12.0%", "-13.7%", "-13.9%", "-12.8%", "-13.9%"];
var counter = 0;
var elem = document.getElementById("n2");
var inst = setInterval (change, 1000);

function change () {
elem.innerHTML = text[counter];
counter++;
var content = document.getElementById("n2");
    if (counter >= text.length) {
    counter = 0;
    }
}

To no avail.

Upvotes: 1

Views: 153

Answers (1)

imvain2
imvain2

Reputation: 15847

You can't have two different functions with the same name. One will override the other.

I created a single function that accomplishes your goals by passing in the target element and the data as arguments.

function change(elem, data) {
  let counter = 0;
  setInterval(function() {
    elem.innerHTML = data[counter];
    counter++;
    if (counter >= data.length) {
      counter = 0;
    }
  }, 1000);
}

change(document.getElementById("n1"), ["2.0%", "1.7%", "1.9%", "1.8%", "1.9%"]);
change(document.getElementById("n2"), ["12.0%", "2.7%", "3.9%", "4.8%", "5.9%"]);
<div id="n1"></div>
<div id="n2"></div>

Upvotes: 1

Related Questions