CODEWITHSUNDEEP
javascripthtmlcss
darees
darees

Reputation: 17

how to change div visibility on addeventlistener click in javascript?

Basically I have a html div which normally is hidden, I also have a button with an addEventListener on click for it. Now what I want is that when the user click on the button I want the div visibility to turn visible, before I tell you my problem here is my script:

<div class="Takeapicture_div">
    <input type="button" class="takeapicture_btn" id="takeapicture_btn" value="Take a picture"/>
</div>
<div class="takeapicturesnap_div">
    <video id="video" class="profilevideo" width="640" height="480" autoplay></video>
    <canvas id="canvas" class="canvas" width="640" height="480"></canvas>
    <input type="button" id="snapButton" class="takesnapshoot" value="Capture Image"/>
</div>

Div CSS script:

.takeapicturesnap_div{
position:fixed;
visibility: hidden;
left:400px;
top:40px;
height:600px;
width:600px;
border:1px solid #ddd;
border-radius:2px;
box-shadow:2px 2px 3px 1px #ddd;
overflow:hidden;
background:white;
}

EventListener for button:

document.getElementById("takeapicture_btn").addEventListener("click", function() {
var takeapicdiv = document.getElementById("takeapicturesnap_div");
takeapicdiv.style.visibility = "visible";
navigator.getMedia({
    video: true,
    audio: false
}, function(stream){
    video.src = vendorUrl.createObjectURL(stream);
    video.play();
}, function(error){

});
});

As you can see in my button eventlistner I have a line which should turn the takeapicdiv visibility to visible, but it don't also it make my script after this line not to execute and do nothing, I'd really appreciate if somebody tell me what am I doing wrong?

Upvotes: 0

Views: 1248

Answers (3)

Alexey Soshin
Alexey Soshin

Reputation: 17721

In your code takeapicturesnap_div is a class, not an id.

You can either switch to using id, or use document.querySelector(".takeapicturesnap_div")

Upvotes: 2

Aya Salama
Aya Salama

Reputation: 1518

you get div element by id while you didn't assign it an id to id!

var takeapicdiv = document.getElementById("takeapicturesnap_div");

your div only hav a class so you should replace it with 

<div id="takeapicturesnap_div">

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

takeapicturesnap_div is a class but you're trying to get the DOM node using document.getElementById(), which won't work.

Try to change the HTML like this..

<div class="Takeapicture_div">
    <input type="button" class="takeapicture_btn" id="takeapicture_btn" value="Take a picture"/>
</div>
<div class="takeapicturesnap_div" id="takeapicturesnap_div"> <!-- You can remove class if you don't need -->
    <video id="video" class="profilevideo" width="640" height="480" autoplay></video>
    <canvas id="canvas" class="canvas" width="640" height="480"></canvas>
    <input type="button" id="snapButton" class="takesnapshoot" value="Capture Image"/>
</div>

Upvotes: 0

Related Questions