如何在javascript中更改addeventlistener上的div可见性？

基本上，我有一个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>

按钮的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){

});
});

---

正如你在我的button eventlistner中所看到的，我有一行代码，它应该将

TakeApictDiv

的可见性变为可见，但它也不能使我的脚本在这行之后不执行和不做任何事情，如果有人告诉我我做错了什么，我将非常感激。

在你的代码中

takeapicturesnap\u div

是一个类，没有身份证

---

您可以切换到使用id，也可以使用

文档。查询选择器（“.takeapituresnap\u div”）

在您的代码中

takeapituresnap\u div

是一个类，而不是id

---

您可以切换到使用id，也可以使用

document.querySelector（“.takeapicturesnap\u div”）

takeapicturesnap\u div

是一个

类，但您试图使用
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>

takeapicturesnap\u div
是一个
类
，但您试图使用
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>

您按id获取div元素，而您没有将id分配给id

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

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

<div id="takeapicturesnap_div">

您按id获取div元素，而您没有将id分配给id

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

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

<div id="takeapicturesnap_div">


document.querySelector
的作用与
document.queryselectoral
相同，并使用
0
对集合进行索引，因此我建议使用它。不管怎么说，必要的编辑需要+1我想有时候它会把我搞砸，不管怎样，谢谢
document.querySelector
与
document.querySelectorAll
的功能相同，并使用
0
对集合进行索引，因此我建议使用它。不管怎么说，必要的编辑需要+1我想有时候它会把我搞砸，不管怎样，谢谢！