如何在帶有隨機播放和隨機文本的html的所有標簽中使用Javascript函式-有解無憂

請幫我解決這個問題。我想在標簽 html 中添加 javascript，但它只能作業 1 次，為什么不能 2 次或更多次？

這是我的代碼： 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 class="text" id="word">Franco</p>
</div>
<div>
<p class="text" id="word">Henry</p>//in this class the javascript doesn't work
</div>
</body>

謝謝

uj5u.com熱心網友回復：

ID 在檔案中必須是唯一的。

通過兩次添加腳本，您將擁有兩個腳本，它們同時使用它們搜索的 ID修改第一個元素。

在您注意到變化之前，一個會覆寫另一個的結果。

如果您想讓腳本影響兩個不同的元素，那么您可以采取以下幾種方法：

您可以使用一個類而不是一個 ID，然后讓您的函式回圈使用該類的元素并更新每個元素。

您可以使用不同的 ID并更改您的代碼，以便它接受要修改的 ID 作為引數，而不是對其進行硬編碼。然后你可以呼叫該函式兩次。

uj5u.com熱心網友回復：

最好使用，因為 HTML id 屬性用于為 HTML 元素指定唯一的 id。在 HTML 檔案中不能有多個具有相同 id 的元素。

JS：

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

var t = setInterval(function() { 
 
var randomNumber = Math.round( Math.random() * (words.length-1) ); 

$('#word').html( words[ randomNumber ] ); 
}, 5000); 
document.getElementById("word").innerHTML;`// Array of words 
var words = ["Andre", "Anne", "Billy", "Clark","David", "Edward", "Gee", "Jasper", "Kelvin", "Steven", "Tom", "Willy"]; 

var t = setInterval(function() { 
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 class="text word">Franco</p>
</div>
<div>
<p class="text word">Henry</p>//in this class the javascript doesn't work
</div>
</body>

uj5u.com熱心網友回復：

你可以做這樣的事情

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 class="text word">Franco</p>
  </div>
  <div>
    <p class="text word">Henry</p>
  </div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496583.html

標籤：javascript html jQuery css 洗牌

上一篇：只需使用useQuery重新加載串列中一個特定物體的資料

下一篇：無法使用Svelte顯示TopoJson地圖