CODEWITHSUNDEEP
javascripthtmlcss
Nebular Dust
Nebular Dust

Reputation: 403

Changing div css with button click doesn't work

I have this piece of html/css and I need to change div style with js button click so my div becomes visible and clickable. I seem to do everything right but it doesn't work for some reason.

When I click that button, simply nothing happens, can anyone help?

<button type="button" id="letsgo" onclick="letitGo()">Process</button>
<div id="textualdiv">blah blah blah</div>

A script below them: 

<script>
function letitGo()
{
    document.getElementById("textualdiv").style.opacity="1";
    document.getElementById("textualdiv").style.pointer-events="auto";
}
</script>

And div style in a separate CSS file:

#textualdiv {
    z-index:10;
    background-color:white;
    margin-bottom:0%;
    width:70%;
    text-align:center;
    height:50%;
    min-width:500px;
    top: 10%;
    display: block;
    margin: 0 auto !important;
    padding:0;
    position:relative;
    opacity:0;
    pointer-events: none;
    border-style:solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Upvotes: 0

Views: 189

Answers (2)

FlokiTheFisherman
FlokiTheFisherman

Reputation: 234

Exactly, like Elipzer respond you before me. The right answer is:

function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}

Remember that when you wanna change a CSS property using Javascript you need to type the name of that property using camelCase.

Hope it helps you!

Upvotes: 0

Elipzer
Elipzer

Reputation: 911

The CSS pointer-events attribute is elem.style.pointerEvents in JavaScript

Use this instead

function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}

JSFiddle - http://jsfiddle.net/dbxcsv9h/

Upvotes: 2

Related Questions