darees darees - 2 months ago 12
CSS Question

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?

Answer

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

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

Comments