How to make the same button swap text each time it is clicked?

Question

If I have a paragraph

<p id=peed></p>

and I have a button which on click runs this function:

<script>
  var x = 'welcome'
  function onButtonClick() {
    document.getElementById('peep').innerHTML = [x];
  }
</script>

This swaps the peep paragraph with variable x .

How, using if statements, would I make the same button when clicked a second time reverse this an replace x with the paragraph peep again?

Answer 1

Function like that?

<script>
function myFunction()
{
     var tmp = document.getElementById("peep").innerHTML;
     if(tmp === 'x') {
        document.getElementById("peep").innerHTML = 'y';
     }
     else {
        document.getElementById("peep").innerHTML = 'x';
     }
}

</script>

Answer 2

With ES6, you could use the destructuring assignment for swapping the variable and the actual text.

 var a = 5, b = 2; [a, b] = [b, a]; console.log(a, b); // 2 5 

Implementation

 var x = 'welcome'; function peep() { [document.getElementById("peep").innerHTML, x] = [x, document.getElementById("peep").innerHTML]; } 

 <button onclick="peep()">peep</button> <div id="peep">some text</div> 

Answer 3

You first need to get the original content:

var originalPeep = document.getElementById("peep").innerHTML;

You need to have a variable to store whether it has been replaced or not:

var replaced = false;

Now in your function, you need to check the value of replaced and replace it accordingly (and reset our replaced marker):

function myFunction() {
    if (replaced) {
        document.getElementById("peep").innerHTML = originalPeep;
        replaced = false;
    } else {
        document.getElementById("peep").innerHTML = x;
        replaced = true;
    }
}

So in total that becomes:

var originalPeep = document.getElementById("peep").innerHTML;
var replaced = false;

function myFunction() {
    if (replaced) {
        document.getElementById("peep").innerHTML = originalPeep;
        replaced = false;
    } else {
        document.getElementById("peep").innerHTML = x;
        replaced = true;
    }
}

Answer 4

var x = 'welcome'
var peeepText = '';
function myFunction() {
  if (!peeepText) {
    peeepText = document.getElementById("peep").innerHTML;
    document.getElementById('peep').innerHTML = [x];
  } else {
    document.getElementById('peep').innerHTML = peepText;
    peepText = '';
  }
}

Answer 5

You could try doing this with an array an count as well.

var x = [];
x[0] = 'welcome';
x[1] = 'googbye';
var count = 1;
function myFunction()
{
  document.getElementById('peep').innerHTML = x[count%2];
  count++;
}

Answer 6

Swapping values is tricky: you need to store the current value in a temporary variable, replace the current value with the new one, then assign the temporary value to the variable holding new one.

 document.querySelector("button").onclick = myFunction; var x = 'welcome'; function myFunction() { var peep = document.getElementById("peep"); var tmp = peep.innerHTML; peep.innerHTML = x; x = tmp; } 

 <div id="peep">peep</div> <button>swap</button>