when I press the button it change davyd to Ace, and Ace to Davyd

Question

at the moment when I run the code below - I press the button it changes from Davyd to Aces , and Ace to davyd. Now how do I make the button change from Davyd to Ace to Walter to 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>

Thank you! Brand new to Javascript

`if (expression) { ..stuff.. } else if (expression) { ..more stuff.. } else if (expression) { ..more stuff.. } else { ..more stuff.. }` — Taplar, Dec 29 '20 at 23:28
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else — Taplar, Dec 29 '20 at 23:30

score 1 · Answer 1 · answered Dec 30 '20 at 00:03

Well, i was going to answer this question using if and else, but someone else already did it

So here's a bit more complex code (don't you worry, I'll guide you) considering you are new at javascript and I'll keep it simple

// 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>

score 0 · Answer 2 · answered Dec 29 '20 at 23:40

Here is the simple code for you using 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>

Krystian · Answer 3 · 2020-12-30T11:38:07.170

Here is code without if-else. You can easily change order and add new values.

  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>

EDIT:

  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>

`values[++valueIndex % values.length]` <= you can get rid of the if else by using modulus to cause the value to wrap back around to zero. — Taplar, Dec 29 '20 at 23:59

when I press the button it change davyd to Ace, and Ace to Davyd

3 Answers3