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

基本上我有一个通常隐藏的html div，我点击它也有一个带有addEventListener的按钮。现在我想的是，当此按钮，用户点击我想div能见度转visible之前，我在这里告诉你，我的问题是我的脚本：如何更改addeventlistener在div中的可见性点击javascript？

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

}); 
});

正如你可以在我的按钮eventlistner我有一个线看，应打开takeapicdiv能见度可见，但它不会让我的脚本在这行之后不执行，也不会执行任何操作，如果有人告诉我我做错了什么，我真的很感激。

来源

2016-09-17 darees

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

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

来源

2016-09-17 19:49:31

'document.querySelector'不一样'document.querySelectorAll'和索引用'0'收集，所以我建议使用它。无论如何，需要编辑+1的 – Hydro

我不知道有时它把我搞砸在这样的问题，无论如何谢谢！ – darees

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>

来源

2016-09-17 19:50:25

您可以通过ID得到div元素，而你没有分配一个id，它的ID！

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

您的DIV只有甲肝一类，所以你应该将其替换为

<div id="takeapicturesnap_div">

来源

2016-09-17 19:53:01

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

回答

相关问题