單擊元素不顯示結果和Chrome瀏覽器開發工具不顯示錯誤

Question

當你點擊div應該改變var element到var element = 'hidrogeno'但因爲它沒有其他div與h1和p都打開元素爲空。

我在做什麼錯？

var modal = document.getElementById('myModal'); 
 

 
var btn = document.getElementById("myBtn"); 
 

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

 
var elemento 
 

 
function choose(choice) { 
 
    elemento = choice; 
 
} 
 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
} 
 

 
switch (elemento) { 
 
    case 'hidrogeno': 
 
    var title = document.getElementById("header0"); 
 
    var info = document.getElementById("text0"); 
 
    title.innerHTML = "Hidrogeno"; 
 
    info.innerHTML = "El hidr&oacutegeno es el elemento qu&iacutemico de n&uacutemero at&oacutemico 1, representado por el s&iacutembolo H. Con una masa at&oacutemica de 1,00794 (7) u, es el m&aacutes ligero de la tabla de los elementos. Por lo general, se presenta en su forma molecular, formando el gas diat&oacutemico H2 en condiciones normales. Este gas es inflamable, incoloro, inodoro, no met&aacutelico e insoluble en agua." 
 
    break; 
 
}

<div id="myBtn" class="elem F" onclick=(choose('hidrogeno'))> 
 
    <div class="num">1</div> 
 
    <div class="symbol">H</div> 
 
</div> 
 

 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">&times;</span> 
 
     <h2 id="header0"></h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p id="text0"> </p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

var modal = document.getElementById('myModal'); 
     //var btnn = document.getElementById("myBtn"); 
     var span = document.getElementsByClassName("close")[0]; 

     var elemento; 

     function choose(choice){ 
      elemento = choice; 
      modal.style.display = "block"; 

      switch (elemento) { 
      case 'hidrogeno': 
      var title = document.getElementById("header0"); 
      var info = document.getElementById("text0"); 
      title.innerHTML = "Hidrogeno"; 
      info.innerHTML = "El hidr&oacutegeno es el elemento qu&iacutemico de n&uacutemero at&oacutemico 1, representado por el s&iacutembolo H. Con una masa at&oacutemica de 1,00794 (7) u, es el m&aacutes ligero de la tabla de los elementos. Por lo general, se presenta en su forma molecular, formando el gas diat&oacutemico H2 en condiciones normales. Este gas es inflamable, incoloro, inodoro, no met&aacutelico e insoluble en agua." 
      break; 
     } 
     } 

     // btnn.onclick = function() { 
     // modall.style.display = "block"; 
     // } 

     span.onclick = function() { 
      modal.style.display = "none"; 
     } 

     window.onclick = function(event) { 
      if (event.target == modal) { 
      modal.style.display = "none"; 
      } 
     } 

Answer 2

因此，首先，你需要刪除btn.onClick...在你的代碼，因爲它覆蓋你應該在你的DIV的click事件被調用的。

其次，您需要更改此

<div id="myBtn" class="elem F" onclick=(choose('hidrogeno'))>

到

<div id="myBtn" class="elem F" onclick="choose('hidrogeno')">

逃避你的單引號。

三，最重要的。您代碼中的開關塊將不會被擊中，因爲它將在頁面加載時評估，您的elemento仍未定義。所以，你需要把這個開關塊放在choose函數中。

注：不要使用開關的情況下，如果你只評估一個條件，相反，使用if。節省寫入時間並提高可讀性。國際海事組織，使用它3個或更多的條件。

見下片段：

var modal = document.getElementById('myModal'); 
 

 
var btn = document.getElementById("myBtn"); 
 

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

 
var elemento; 
 

 
function choose(choice) { 
 
    //alert(choice); 
 
    elemento = choice; 
 
    modal.style.display = "block"; 
 

 
    //should not use switch if just evaluating only 1 condition 
 
    /*switch (elemento) { 
 
    case 'hidrogeno': 
 
     var title = document.getElementById("header0"); 
 
     var info = document.getElementById("text0"); 
 
     title.innerHTML = "Hidrogeno"; 
 
     info.innerHTML = "El hidr&oacutegeno es el elemento qu&iacutemico de n&uacutemero at&oacutemico 1, representado por el s&iacutembolo H. Con una masa at&oacutemica de 1,00794 (7) u, es el m&aacutes ligero de la tabla de los elementos. Por lo general, se presenta en su forma molecular, formando el gas diat&oacutemico H2 en condiciones normales. Este gas es inflamable, incoloro, inodoro, no met&aacutelico e insoluble en agua." 
 
     break; 
 
    }*/ 
 
    if (elemento == 'hidrogeno') { 
 

 
    var title = document.getElementById("header0"); 
 
    var info = document.getElementById("text0"); 
 
    title.innerHTML = "Hidrogeno"; 
 
    info.innerHTML = "El hidr&oacutegeno es el elemento qu&iacutemico de n&uacutemero at&oacutemico 1, representado por el s&iacutembolo H. Con una masa at&oacutemica de 1,00794 (7) u, es el m&aacutes ligero de la tabla de los elementos. Por lo general, se presenta en su forma molecular, formando el gas diat&oacutemico H2 en condiciones normales. Este gas es inflamable, incoloro, inodoro, no met&aacutelico e insoluble en agua." 
 
    } 
 

 
} 
 
/*btn.onclick = function() { //this overrides your choice function 
 
    modal.style.display = "block"; 
 
}*/ 
 

 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

<div id="myBtn" class="elem F" onclick="choose('hidrogeno')"> 
 
    <div class="num">1</div> 
 
    <div class="symbol">H</div> 
 
</div> 
 

 
<div id="myModal" class="modal"> 
 

 

 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">&times;</span> 
 
     <h2 id="header0"></h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p id="text0"> </p> 
 
     <p></p> 
 
    </div> 
 
    </div> 
 

 
</div>