gpt4 book ai didi

javascript - 如何使用JS(无JQuery)一键多次更改HTML内容?

转载 作者:行者123 更新时间:2023-11-28 04:50:12 25 4
gpt4 key购买 nike

我有以下一段代码,它通过单击按钮更改一行文本:

<!DOCTYPE html>
<html>
<body>

<h1>Change content exercise</h1>

<p id="demo">Watch this HTML content changes..</p>

<button type="button"
onclick="document.getElementById('demo').innerHTML = 'This is JavaScript!'">
Click Me!</button>

</body>
</html>

这很容易,因为没有脚本,也不需要处理按钮的函数。现在,我希望当我再次单击同一个按钮时,它会变回第一个内容。我假设现在我需要一个函数,但不确定如何编写它。一个想法?

最佳答案

您不必使用函数。您可以使用三元运算符 ?: 来实现,或者您甚至可以只在一行中编写一个 if else 语句。

<h1>Change content exercise</h1>

<p id="demo">Watch this HTML content changes..</p>

<button type="button"
onclick="document.getElementById('demo').innerHTML === 'This is JavaScript!' ? document.getElementById('demo').innerHTML = 'Watch this HTML content changes..' : document.getElementById('demo').innerHTML = 'This is JavaScript!';">
Click Me!</button>

但是,将大量代码塞进一行,这样在一个单独的函数中会更清晰。

function changeText() {
var demo = document.getElementById('demo');
if (demo.innerHTML === 'This is JavaScript!') {
demo.innerHTML = 'Watch this HTML content changes..';
} else {
demo.innerHTML = 'This is JavaScript!';
}
}
<h1>Change content exercise</h1>

<p id="demo">Watch this HTML content changes..</p>

<button type="button" onclick="changeText()">Click Me!</button>

关于javascript - 如何使用JS(无JQuery)一键多次更改HTML内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34295224/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com