點擊元素不會顯示結果，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')">

逃避您的單引號。

第三，也是最重要的。 您的代碼中的switch塊將不會被點擊，因為它將在頁面加載時仍未定義elemento情況下進行評估。 因此，您需要將此開關塊放入您的choose函數中。

注意：如果僅評估單個條件，則不要使用切換大小寫，而是使用if 。 節省編寫時間並提高可讀性。 IMO，用於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>