如何更改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？

回答

相關問題