javascript - 如何更改 addeventlistener 在 javascript 中单击时的 div 可见性？

Question

基本上我有一个通常隐藏的 html div，我还有一个带有 addEventListener 的按钮，点击它。现在我想要的是，当用户单击按钮时，我希望 div 可见性变为 visible，在我告诉你我的问题之前，这里是我的脚本:

<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 脚本:

.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;
}

按钮的事件监听器:

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){

});
});

正如您在我的按钮事件列表器中看到的那样，我有一行应该将 takeapicdiv 可见性变为可见，但它也不会使我的脚本在该行之后不执行并且什么也不做, 如果有人告诉我我做错了什么，我将不胜感激？

Answer 1

在您的代码中，takeapicturesnap_div 是一个类，而不是一个 id。

您可以切换到使用 id，或使用 document.querySelector(".takeapicturesnap_div")