Question

如何通过我的功能更改文本，以及如何通过单击按钮来获得具有相同功能的相同初始文本？

下面是我的HTML代码：

<h1 id="change">Hello</h1>
<button onclick ="myFunction()">click</button>

下面是我的Javascript代码

function myFunction(){
  document.getElementById("change").innerHTML = "just changed text";

}```

Answer 1

使用您要使用的文本创建一个变量，每当替换文本时，将先前的文本保存在该变量中：

var txt = 'just changed text';

var el = document.getElementById('change');

function myFunction() {
  var temp = el.innerText;
  el.innerText = txt;
  txt = temp;
}

<h1 id="change">Hello</h1>
<button onclick="myFunction()">click</button>

Answer 2

您必须将原始文本保存在某个地方，然后单击按钮，将文本设置为该保存的文本。

const h1Tag = document.querySelector("#change");
const originalText = h1Tag.innerText;

function myFunction() {
  if (originalText === h1Tag.innerText) {
    h1Tag.innerText = "just changed text";
  } else {
    h1Tag.innerText = originalText;
  }
}

<h1 id="change">Hello</h1>
<button onclick="myFunction()">Change</button>

编码愉快！

Answer 3

使用三元运算符：

function myFunction(){
  const ch = document.getElementById("change")
  ch.innerHTML = ch.innerHTML === "Hello" ? "just changed text" : "Hello"
}

<h1 id="change">Hello</h1>
<button onclick ="myFunction()">click</button>

要循环显示无尽的文本选项：

const arr = ["just changed text", "Hello", "Third option", "Fourth option"]

function myFunction(){
  const ch = document.getElementById("change")
  let idx =  arr.indexOf(ch.innerHTML)
  ch.innerHTML = arr[(idx + 1) % arr.length]
}

<h1 id="change">Hello</h1>
<button onclick ="myFunction()">click</button>

更改html文本并再次使用javascrip返回

3 个答案: