Make text appear/disappear on button click

Question

I'm trying to make the button alternate the text from hidden using 'none' to appear using 'block'. I tried the below but it did not work

<p id='demo' style = 'display: none'>Hello Javascript</p>     
<button type='button' onclick="document.getElementById('demo').style.display='block'" >click me</ button>

I want to convert event listener to Javascript and run from there.

score 4 · Accepted Answer · answered Mar 31 '19 at 16:42

4

Try this, I hope it'll help you out. Thanks

function toggleText() {
  var text = document.getElementById("demo");
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

<p id='demo' style='display: none'>Hello Javascript</p>     
<button type='button' onclick="toggleText()">Click me</button>

answered Mar 31 '19 at 16:42

Hassan Siddiqui

2,799
1
13
22

If it'll help you out, please mark as correct. Thanks – Hassan Siddiqui Apr 01 '19 at 04:36

score 3 · Answer 2 · edited Mar 31 '19 at 23:31

3

css:

.demo {
   display: none;
}

html:

<p id='demo' class='demo'>Hello Javascript</p>
<button type='button'> click me </button>

js:

var tag = document.getElementById('demo');
var button = document.querySelector('button');
button.addEventListener('click', function(){
tag.classList.toggle('demo');
});

Running Snippet:

var tag = document.getElementById('demo');
var button = document.querySelector('button');
button.addEventListener('click', function(){
tag.classList.toggle('demo');
});

.demo {
   display: none;
}

<p id='demo' class='demo'>Hello Javascript</p>
<button type='button'> click me </button>

edited Mar 31 '19 at 23:31

Rachel Gallen

27,943
21
72
81

answered Mar 31 '19 at 16:14

AlexG

98
8

i try to run your code but doesnt run and there was no error – daneillone Apr 01 '19 at 01:10
`
hey
` – AlexG Apr 01 '19 at 06:53
make sure the script tag is at the bottom of the document – AlexG Apr 01 '19 at 06:54
is querySelector taking type button or the button tag? – daneillone Apr 03 '19 at 14:21
querySelector is taking in the button tag – AlexG Apr 03 '19 at 14:37

score 1 · Answer 3 · answered Mar 31 '19 at 16:05

Is it helpful:

var showHide = document.getElementById("showHide");
var demo = document.getElementById("demo");
showHide.onclick = function() {
  if (demo.style.display == "block") {
    demo.style.display = "none";
  } else {
    demo.style.display = "block";
  }
}

<p id='demo' style='display: none'>Hello Javascript</p>
<button id="showHide">Click Me</button>

Make text appear/disappear on button click

3 Answers3

Linked