show message by clicking button but how i can hide this message by clicking the button

Question

show message by clicking button but how i can hide this message by clicking the button

279 Views Asked by swinnyTedd At 16 April 2025 at 18:18

here is my code when i clicked the button it show message but i am unable to hide this message by again clicking the button how can i solve this . in html web page show a button when i click button it show some message but i want help when i again clicked on button then it hide that messages displaying in web page. here is my code :-

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

Original Q&A

There are 1 best solutions below

**Christian** · Answer 1

Maybe Something like this will achieve what you want?

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

show message by clicking button but how i can hide this message by clicking the button

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in BUTTON

Related Questions in CLICKING

Trending Questions

Popular # Hahtags

Popular Questions