单击元素不显示结果和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>