How to use Javascript Function in all Tags of html with Shuffle and random text-CodePudding

please help me to fixed this problem. I want to add javascript in tag html but its only work 1 times, why can't 2 or more times?

This is my code : JS

// Array of words 
var words = ["Andre", "Anne", "Billy", "Clark","David", "Edward", "Gee", "Jasper", "Kelvin", "Steven", "Tom", "Willy"]; 
// Function that executes every 5000 milliseconds 
var t = setInterval(function() { 
// Random number generator 
var randomNumber = Math.round( Math.random() * (words.length-1) ); 
// Change the word in the span for a random one in the array of words 
$('#word').html( words[ randomNumber ] ); 
}, 5000); 
document.getElementById("word").innerHTML;

CSS

#word {
align-content: center;
display: block;
}

HTML

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src=".../word.js"></script>
</head>
<body>
<div>
<p  id="word">Franco</p>
</div>
<div>
<p  id="word">Henry</p>//in this class the javascript doesn't work
</div>
</body>

You can also check my website, what's wrong with my coding. https://172.96.190.173/rtpsosbobet/ Thankyou

CodePudding user response：

An ID must be unique in a document.

By adding your script twice, you have two scripts which at the same time modify the first element with the ID they search for.

One will overwrite the results of the other before you can notice the change.

If you want to have the script affect two different elements then there are a couple of approaches you can take:

You could use a class instead of an ID and then have your function loop over the elements with that class and update each one.

You could use different IDs and change your code so it accepts the ID to modify as an argument instead of hard coding it. Then you can call that function twice.

CodePudding user response：

It's better to use , because the HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.

JS:

var wordsArray = ["Andre", "Anne", "Billy", "Clark","David", "Edward", "Gee", "Jasper", "Kelvin", "Steven", "Tom", "Willy"]; 
    
var t = setInterval(function() { 
var words = document.querySelectorAll('.word')
words.forEach((word) => {
var randomNumber = Math.floor( Math.random() * (wordsArray.length-1) ); 
  console.log(randomNumber)
  word.innerText = wordsArray[randomNumber] }); 
}, 5000)

.word {
align-content: center;
display: block;
}

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script type="text/javascript" src=".../word.js"></script>
</head>
<body>
<div>
<p >Franco</p>
</div>
<div>
<p >Henry</p>
</div>
</body>

var wordsArray = ["Andre", "Anne", "Billy", "Clark","David", "Edward", "Gee", "Jasper", "Kelvin", "Steven", "Tom", "Willy"];

var t = setInterval(function() { 
var words = document.querySelectorAll('.word')
words.forEach((word) => {
  var randomNumber = Math.round( Math.random() * (words.length-1) ); 
  word.html( words[randomNumber] ); }, 5000); 
})

HTML:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">    </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src=".../word.js"></script>
</head>
<body>
<div>
<p >Franco</p>
</div>
<div>
<p >Henry</p>//in this class the javascript doesn't work
</div>
</body>

CSS:

.word {
align-content: center;
display: block;
}

CodePudding user response：

you can do something like this

var words = ["Andre", "Anne", "Billy", "Clark", "David", "Edward", "Gee", "Jasper", "Kelvin", "Steven", "Tom", "Willy"];
// Function that executes every 5000 milliseconds 
setInterval(() => {
  // Random number generator 
  $('.word').each((i, el) => {
    var randomNumber = Math.floor(Math.random() * words.length);
    $(el).html(words[randomNumber])
  })
}, 5000)

.word {
  align-content: center;
  display: block;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
  </script>
</head>

<body>
  <div>
    <p >Franco</p>
  </div>
  <div>
    <p >Henry</p>
  </div>
</body>