如何在带有随机播放和随机文本的 html 的所有标签中使用 Javascript 函数

Question

请帮我解决这个问题。 我想在标签 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>

您也可以查看我的网站，我的编码有什么问题。 https://172.96.190.173/rtpsosbobet/谢谢

Answer 1

ID 在文档中必须是唯一的。

通过两次添加脚本，您将拥有两个脚本，它们同时使用它们搜索的 ID 修改第一个元素。

在您注意到变化之前，一个会覆盖另一个的结果。

如果您想让脚本影响两个不同的元素，那么您可以采取以下几种方法：

您可以使用一个类而不是一个 ID，然后让您的函数循环使用该类的元素并更新每个元素。

您可以使用不同的 ID并更改您的代码，以便它接受要修改的 ID 作为参数，而不是对其进行硬编码。 然后你可以调用该函数两次。

Answer 2

最好使用class="text word" ，因为 HTML id 属性用于为 HTML 元素指定唯一的 id。 在 HTML 文档中不能有多个具有相同 id 的元素。

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

var wordsArray = [“安德烈”、“安妮”、“比利”、“克拉克”、“大卫”、“爱德华”、“吉”、“贾斯珀”、“开尔文”、“史蒂文”、“汤姆”、“威利” "];

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 class="word">Franco</p>
</div>
<div>
<p class="word">Henry</p>//in this class the javascript doesn't work
</div>
</body>

CSS ：

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

如何在带有随机播放和随机文本的 html 的所有标签中使用 Javascript 函数

问题描述

2 个解决方案

解决方案1
0 2022-06-28 09:47:25

解决方案2
0 已采纳 2022-06-28 10:12:52

如何在带有随机播放和随机文本的 html 的所有标签中使用 Javascript 函数

问题描述

2 个解决方案

解决方案1 0 2022-06-28 09:47:25

解决方案2 0 已采纳 2022-06-28 10:12:52

解决方案1
0 2022-06-28 09:47:25

解决方案2
0 已采纳 2022-06-28 10:12:52