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

按钮的EventListener：

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

});
});

正如你在我的按钮eventlistner中看到的那样，我有一条线应该将takeapicdiv可见性变为可见，但它也不会使我的脚本在此行之后不执行并且什么也不做，我'如果有人告诉我我做错了什么，我真的很感激吗？

Answer 1

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

您可以切换为使用ID，也可以使用document.querySelector(".takeapicturesnap_div")

Answer 2

takeapicturesnap_div是class，但您尝试使用document.getElementById()来获取DOM节点，这将无效。

尝试像这样更改HTML ..

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

Answer 3

你没有为id赋予div元素，而你没有为id分配id！

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

你的div只有一个类，所以你应该用

替换它

<div id="takeapicturesnap_div">

如何在addeventlistener上更改div可见性点击javascript？

3 个答案: