CODEWITHSUNDEEP
javascripthtmlcssbutton
andyduly98
andyduly98

Reputation: 89

How to make button show content onclick?

I'm trying to make it show the div when i click the button, what am i doing wrong?

<button type="button" onclick="myFunction()">Click Me!</button>
<div class="dglow">Glow</div>

<script>
    function myFunction(){
        dglow.style.display='block'
    }
</script>

Upvotes: 0

Views: 11810

Answers (4)

Billy
Billy

Reputation: 2448

Is it something like this you want ? Changed class to Id and it shows and hides.

var dglow=document.getElementById("dglow");

function myFunction(){
    var style=dglow.style.display;
        if(style=='block')
        	{
            dglow.style.display='none';
        	}
    	else{
            dglow.style.display='block';
        	}    			
    }
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="dglow" style="display:none;">Glow</div>

Upvotes: 0

Manu Masson
Manu Masson

Reputation: 1737

You have confused class with id.

You say : 

class = "Dglow"

But in javascript you did: 

getElementById("Dglow")

Instead make the html equal to:

id = "Dglow"

Upvotes: 0

Manoj Dhiman
Manoj Dhiman

Reputation: 5166

you just need to add id in your div.

function myFunction() {
document.getElementById("Dglow").style.display = 'block';
}
.Dglow
{
  display:none;
  }
<button type="button" onclick="myFunction()">Click Me!</button>

<div id="Dglow" class="Dglow">
Glow
</div>

Upvotes: 0

DFayet
DFayet

Reputation: 881

You use

 document.getElementById("Dglow")

but your element has not an id but a class.

You have 2 ways to fix it:

1) Add an id to your element

<div id="Dglow" class="Dglow">
    Glow
</div>

Example

2) Call find the element with the class

function myFunction() {
    var y = document.getElementsByClassName('Dglow');
    y[0].style.display = 'block';
}

Example

Hope it may helps you.

Upvotes: 1

Related Questions