当我按下按钮时，它将 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>

boolean-search html javascript