idの代わりにクラスのfancyboxを表示

Question

私はJavascriptを学ぶ冒頭にあります。あなたが私を助けてくれることを願っています。

誰かがクラス属性を持つリンクをクリックした場合、fancyboxを使用したいと思います。私はイドと共にそれをやった。 id属性では、コードは非常にうまく動作します。しかし、私はクラスでそれをcange場合....それをdoesn't仕事を属性:(

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <p>Some text in the Modal..</p> 
    </div> 

</div> 

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 

このコードは非常にうまく動作します。しかし、なぜドント作業この1クラスのみでも？コードをしている属性を持ちます上位1と同じ構成要素のみコードの次の行が変更されている。

<button class="myBtnNew">Open Modal New</button> 

var myBtnNew = document.getElementsByClassName("myBtnNew"); 

myBtnNew.onclick = function() { 
    modal.style.display = "block"; 
} 

は複数の要素、リストをresturns、それが言うよう

Answer 1

getElementsBy ...あなたの助けをありがとうございました。だから、myBtnNew要素のリストであり、リストにはonclickがありません。したがって、あなたがしたように[0]を追加してくださいspan：

var myBtnNew = document.getElementsByClassName("myBtnNew")[0]; 

Answer 2

document.getElementsByClassNameは、1つのオブジェクトだけでなくオブジェクトの配列を返します。これを使用してください：

var myBtns = document.getElementsByClassName("myBtnNew"); 

myBtns[0].onclick = function() { 
    modal.style.display = "block"; 
}