0

这是我的代码，当我单击它显示消息的按钮时，但我无法通过再次单击按钮来隐藏此消息我该如何解决这个问题。在 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>

4

1 回答 1

0

也许这样的事情会实现你想要的？

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

于 2019-10-20T20:20:01.187 回答