通过单击按钮显示消息，但我如何通过单击按钮隐藏此消息
Posted
技术标签:
【中文标题】通过单击按钮显示消息，但我如何通过单击按钮隐藏此消息【英文标题】：show message by clicking button but how i can hide this message by clicking the button 【发布时间】：2019-10-20 20:10:41 【问题描述】：这是我的代码，当我单击它显示消息的按钮时，但我无法通过再次单击按钮来隐藏此消息我该如何解决这个问题。在 html 网页中显示一个按钮，当我单击按钮时它会显示一些消息，但是当我再次单击按钮时我需要帮助，然后它会隐藏网页中显示的消息。这是我的代码：-
//here is my code for button ..if i clicked on button then it show gameRules by one clicking but i want to hide this after again clicking in my html page
const gameRules = [
Rule: "you want to touch this"
,
Rule: 'You are son of GOD'
,
Rule: 'You are real krackon'
]//here is gameRules show when button clicked
//here is code how above message show by clicking the button on html page
document.querySelector('.ram').addEventListener('click', function(e)
var taki = e.target.value
for (var i = 0; i < gameRules.length; i++)
const taki = document.createElement('h2')
taki.textContent = gameRules[i].Rule
document.querySelector('body').appendChild(taki)
)<!DOCTYPE html>
<html>
<head></head> <!-- here is my html code for showing the button -->
<body>
<button class="ram"> click me</button> <!-- when i clicked on this button getting the messages but how can i hide this message by again clicking the button -->
</body>
</html>【问题讨论】：
【参考方案1】：也许这样的事情会达到你想要的？
//here is my code for button ..if i clicked on button then it show gameRules by one clicking but i want to hide this after again clicking in my html page
let messageShown = false;
const gameRules = [
Rule: "you want to touch this"
,
Rule: 'You are son of GOD'
,
Rule: 'You are real krackon'
] //here is gameRules show when button clicked
// Create the elements when the page loads
for (var i = 0; i < gameRules.length; i++)
const taki = document.createElement('h2');
taki.textContent = gameRules[i].Rule;
document.querySelector('#Message').appendChild(taki);
//here is code how above message show by clicking the button on html page
document.querySelector('.ram').addEventListener('click', function(e)
// Toggle the display of the message
messageShown = !messageShown;
if (messageShown === true)
document.getElementById('Message').style.display = 'block';
else
document.getElementById('Message').style.display = 'none';
)#Message
display: none;
<!DOCTYPE html>
<html>
<head></head>
<!-- here is my html code for showing the button -->
<body>
<button class="ram"> click me</button>
<!-- when i clicked on this button getting the messages but how can i hide this message by again clicking the button -->
<div id="Message">
</div>
</body>
</html>【讨论】：
DHANYAWAAD #隐藏搜索消息按钮以上是关于通过单击按钮显示消息，但我如何通过单击按钮隐藏此消息的主要内容，如果未能解决你的问题，请参考以下文章