addeventlistenerでdivの可視性を変更するにはjavascriptでクリックしますか？

Question

基本的に私は普通は隠されているhtml divを持っています。私はクリックするとaddEventListenerというボタンもあります。

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

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

今、私が欲しいのは、私はあなたを伝える前に、ときに、ユーザーのクリック私は div視認性が visibleをオンにしたいボタンに、ここに私の問題は私のスクリプトであるということですボタンの

の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ノードを取得しようとしています。

は、あなたがそれをIDにIDを割り当てなかったあなたがidでのdiv要素を取得

<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

...このようなHTMLを変更してみてください！

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

あなたのdivあなたは `document.querySelector`が '0'で収集` document.querySelectorAll`とインデックスと同じように行いますので、私

<div id="takeapicturesnap_div">