0

在我运行下面的代码的那一刻 - 我按下按钮，它从 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

4

3 回答 3

1

好吧，我打算用 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>

于 2020-12-30T00:03:01.790 回答
0

这是您使用的简单代码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>

于 2020-12-29T23:40:20.777 回答
0

这是没有 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", "David", "Ace", "Walter", "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>

于 2020-12-29T23:49:20.377 回答