Fatal编程技术网
  • javascript/
  • Javascript 如何使用JS（无JQuery）通过一个按钮多次更改HTML内容？

Javascript 如何使用JS（无JQuery）通过一个按钮多次更改HTML内容？

javascript html

Javascript 如何使用JS（无JQuery）通过一个按钮多次更改HTML内容？,javascript,html,Javascript,Html,我有以下一段代码，只需单击一个按钮即可更改一行文本： <!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'

我有以下一段代码，只需单击一个按钮即可更改一行文本：

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


更改内容练习
观看此HTML内容的更改

点击我！
这很容易，因为不需要脚本，也不需要处理按钮的函数。现在，当我再次单击这个按钮时，我想让它变回第一个内容。我假设现在我需要一个函数，但不确定如何编写它。一个想法

首先，您需要在单独的脚本中编写代码，简而言之，将初始文本附加到div，然后单击按钮，将其更改为第二个文本，根据您的问题，您需要第二个按钮，该按钮将div文本更改为初始文本，逻辑上会给出类似于tht的内容：

<script> 
window.onload = function(){
document.getElementById('demo').innerHTML = 'Watch this HTML content changes..'
}
document.getElementById('button1').Onclick = function(){
document.getElementById('demo').innerHTML = 'This is JavaScript!'
};
document.getElementById('button1').Onclick = function(){
document.getElementById('demo').innerHTML = ''Watch this HTML content changes..'
};

</script>


window.onload=函数（）{
document.getElementById（'demo'）.innerHTML='查看此HTML内容的更改..'
}
document.getElementById（'button1'）。Onclick=function（）{
document.getElementById（'demo'）。innerHTML='这是JavaScript！'
};
document.getElementById（'button1'）。Onclick=function（）{
document.getElementById（'demo'）.innerHTML=''监视此HTML内容的更改..'
};
首先，您需要在单独的脚本中编写代码，简而言之，将初始文本附加到div，然后单击按钮，将其更改为第二个文本，根据您的问题，您需要第二个按钮，该按钮将div文本更改为初始文本，逻辑上会给出类似tht的内容：

<script> 
window.onload = function(){
document.getElementById('demo').innerHTML = 'Watch this HTML content changes..'
}
document.getElementById('button1').Onclick = function(){
document.getElementById('demo').innerHTML = 'This is JavaScript!'
};
document.getElementById('button1').Onclick = function(){
document.getElementById('demo').innerHTML = ''Watch this HTML content changes..'
};

</script>


window.onload=函数（）{
document.getElementById（'demo'）.innerHTML='查看此HTML内容的更改..'
}
document.getElementById（'button1'）。Onclick=function（）{
document.getElementById（'demo'）。innerHTML='这是JavaScript！'
};
document.getElementById（'button1'）。Onclick=function（）{
document.getElementById（'demo'）.innerHTML=''监视此HTML内容的更改..'
};
更简单地说，此功能可以工作：

<h1>Change content exercise</h1>

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

<button type="button" onclick="changeText()">Click Me!</button>
您可以看到它在这个JS小提琴上工作：

更简单地说，这个函数工作：

<h1>Change content exercise</h1>

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

<button type="button" onclick="changeText()">Click Me!</button>
您可以看到它在这个JS小提琴上工作：

很好。虽然你尝试的方式不是最佳实践。。。。但是下面的方法会给你一些希望。试着做更多的研究

函数myFunction（）{
var x=document.getElementById（“demo”）.innerHTML；
如果（x==“一段话”）{
document.getElementById（“demo”）.innerHTML=“再次返回”}
如果（x==“再次返回”）
document.getElementById（“demo”）.innerHTML=“段落。”；
}


段落


试一试吧。虽然你尝试的方式不是最佳实践。。。。但是下面的方法会给你一些希望。试着做更多的研究



函数myFunction（）{
var x=document.getElementById（“demo”）.innerHTML；
如果（x==“一段话”）{
document.getElementById（“demo”）.innerHTML=“再次返回”}
如果（x==“再次返回”）
document.getElementById（“demo”）.innerHTML=“段落。”；
}




段落


试试看，你不必使用函数。您可以使用三元运算符
？
和
：
，或者您甚至可以只在一行上编写if-else语句



更改内容练习
观看此HTML内容的更改


点击我您不必使用函数。您可以使用三元运算符
？
和
：
，或者您甚至可以只在一行上编写if-else语句



更改内容练习
观看此HTML内容的更改

点击我
var btn=document.getElementById（“”）；
var previous=“”；
btn.addEventListener（“单击”，clickHandler）；
函数clickHandler（）{
var demo=document.getElementById（“demo”）；
如果（！上一个）{
previous=demo.innerHTML；
}否则{
demo.innerHTML=“这是JS”；
btn.removeEventListener（“单击”，clickHandler）；
}
}

var btn=document.getElementById（“”）；
var previous=“”；
btn.addEventListener（“单击”，clickHandler）；
函数clickHandler（）{
var demo=document.getElementById（“demo”）；
如果（！上一个）{
previous=demo.innerHTML；
}否则{
demo.innerHTML=“这是JS”；
btn.removeEventListener（“单击”，clickHandler）；
}
}

您可以使用类似于切换功能的功能：


<script type="text/javascript">
    function toggleContent() {
        var message1 = "This is JavaScript!";
        var message2 = "Watch this HTML content changes..";
        var element = document.getElementById('demo');

        if (element.innerHTML===message1)
            element.innerHTML = message2;
        else
            element.innerHTML = message1;

        return false;
    }
</script>




函数toggleContent（）{
var message1=“这是JavaScript！”；
var message2=“查看此HTML内容的更改…”；
var元素=document.getElementById（'demo'）；
if（element.innerHTML==message1）
element.innerHTML=message2；
其他的
element.innerHTML=message1；
返回false；
}



您可以通过在按钮上设置onclick=“toggleContent（）；”来调用它。
您可以使用类似于切换功能的功能：


<script type="text/javascript">
    function toggleContent() {
        var message1 = "This is JavaScript!";
        var message2 = "Watch this HTML content changes..";
        var element = document.getElementById('demo');

        if (element.innerHTML===message1)
            element.innerHTML = message2;
        else
            element.innerHTML = message1;

        return false;
    }
</script>




函数toggleContent（）{
var message1=“这是JavaScript！”；
var message2=“查看此HTML内容的更改…”；
var元素=document.getElementById（'demo'）；
if（element.innerHTML==message1）
element.innerHTML=message2；
其他的
element.innerHTML=message1；
返回false；
}



您可以通过在按钮上设置onclick=“toggleContent（）；”来调用它。
您可以使用IIFE、数组、递增计数器和模运算符来实现这一点



document.getElementById（'button'）.onclick=（function（）{
var demo=document.getElementById（'demo'）；
var text=[demo.textContent，'This is JavaScript！']；
var计数=0；
返回函数（）{
demo.textContent=文本[++计数%2]；
}
})();
查看此HTML内容的更改


点击我您可以使用IIFE、数组、递增计数器和模运算符来实现这一点



document.getElementById（'button'）.onclick=（function（）{
var demo=document.getElementById（'demo'）；