Question

如果我有段落

<p id=peed></p>

我有一个点击按钮运行此功能：

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

这会将窥视段与变量x交换。

如果使用if语句，我会在第二次单击时再次使用相同的按钮来替换x，再次使用段落窥视？

Answer 1

这样的功能？

<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

使用ES6，您可以使用destructuring assignment来交换变量和实际文本。

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

实施

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

首先需要获取原始内容：

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

您需要有一个变量来存储它是否已被替换：

var replaced = false;

现在，在您的函数中，您需要检查replaced的值并相应地替换它（并重置我们的replaced标记）：

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

所以总而言之：

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

您也可以尝试使用数组计数。

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

Answer 6

交换值很棘手：您需要将当前值存储在临时变量中，将当前值替换为新值，然后将临时值分配给包含新值的变量。

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>

如何在每次单击时使相同的按钮交换文本？

6 个答案: