показать сообщение, нажав кнопку, но как я могу скрыть это сообщение, нажав кнопку - PullRequest
Новая
       64

показать сообщение, нажав кнопку, но как я могу скрыть это сообщение, нажав кнопку

0 голосов
/ 20 октября 2019

вот мой код, когда я нажал кнопку, на которой показывалось сообщение, но я не могу скрыть это сообщение, еще раз нажав кнопку, как я могу решить эту проблему. на веб-странице 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 Ответ

0 голосов
/ 20 октября 2019

Может быть, что-то подобное достигнет того, что вы хотите? 

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