如何解决当我按下按钮时，它将 davyd 更改为 Ace，将 Ace 更改为 Davyd
在我运行下面的代码的那一刻 - 我按下按钮，它从 Davyd 变为 Aces ，从 Ace 变为 davyd。现在我如何让按钮从 Davyd 变为 Ace 到 Walter 到 Juan？
<html>
<script>
function myFunction() {
if (document.getElementById("davyd").innerHTML == "Acea") {
document.getElementById("davyd").innerHTML = "Davyd"
} else {
(document.getElementById("davyd").innerHTML == "Davyd")
document.getElementById("davyd").innerHTML = "Acea"
}`enter code here`
enter code here
};
</script>
<body>
<h1>A JavaScript-Enhanced Web Page</h1>
<p id="davyd">Acea</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
谢谢！ 全新的 Javascript
解决方法
好吧，我打算用 if 和 else 来回答这个问题，但其他人已经这样做了
所以这里有一些更复杂的代码（别担心，我会指导你） 考虑到您是 JavaScript 新手，我会保持简单
// Create an Array of names,so each name has its position inside the array
// we can use names_array[1] to select Acea for example
let names_array = ['Davyd','Acea','Walter','Juan']
function myFunction() {
// Get the current name on your div by selecting the element innerHTML text
let current_name = document.getElementById("davyd").innerHTML;
// use length to get the number of items inside your array
let names_array_length = names_array.length
// Use indexOf passing the current name and add 1 to select the next guy
// So,if your dude is on the position 2,you add up to 3 and this is your next dude
let next_name_index = names_array.indexOf(current_name) + 1
// Check if your next name index is equal to the length of your array
// this means that the next one does not exist,so we need to go back to our first name
// that exists on positon 0 of our array
if(next_name_index == names_array_length) {
// Get our index back to zero
next_name_index = 0
}
// select and store our new current name by selecting it's position inside our array
let new_current_name = names_array[next_name_index]
// pass our new current name to our innerHTML
document.getElementById("davyd").innerHTML = new_current_name;
};<html>
<body>
<h1>A JavaScript-Enhanced Web Page</h1>
<p id="davyd">Acea</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>这是使用 if else 的简单代码。
function myFunction() {
var a = document.getElementById("davyd").innerHTML;
if(a == "Acea"){
document.getElementById("davyd").innerHTML = "David";
}else if (a=="David"){
document.getElementById("davyd").innerHTML = "Ace";
}else if (a=="Ace"){
document.getElementById("davyd").innerHTML = "Walter";
}else if (a=="Walter"){
document.getElementById("davyd").innerHTML = "Juan";
}else if (a=="Juan"){
document.getElementById("davyd").innerHTML = "Acea";
}
}<html>
<body>
<h1>A JavaScript-Enhanced Web Page</h1>
<p id="davyd">Acea</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>这是没有 if-else 的代码。您可以轻松更改顺序并添加新值。
function myFunction() {
var a = document.getElementById("davyd").innerHTML;
const values = ["Acea","David","Ace","Walter","Juan"]; // change order or add new values
const valueIndex = values.findIndex((value) => value === a);
if (valueIndex !== -1) {
if (valueIndex === values.length - 1) {
document.getElementById("davyd").innerHTML = values[0];
} else {
document.getElementById("davyd").innerHTML = values[valueIndex + 1];
}
}
}<html>
<body>
<h1>A JavaScript-Enhanced Web Page</h1>
<p id="davyd">Acea</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>编辑：
function myFunction() {
var a = document.getElementById("davyd").innerHTML;
const values = ["Acea","Juan"]; // change order or add new values
const valueIndex = values.findIndex((value) => value === a);
if (valueIndex !== -1) {
document.getElementById("davyd").innerHTML = values[(valueIndex + 1) % values.length]; // @Taplar idea
} else {
document.getElementById("davyd").innerHTML = values[0]; // get first string from `values` if value is not in `values`
}
}<html>
<body>
<h1>A JavaScript-Enhanced Web Page</h1>
<p id="davyd">NoValueInValues</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。