JS HTML CSS：在我的參數中調用 popOpen() 時遇到問題

Question

我目前的代碼有問題。 我試圖在我的一些傳感器代碼中輸入“pop”來調用我的 openPop() function 並且沒有彈出任何內容，即使我認為我正在調用我的彈出窗口。 我想知道是否有人可以幫助我。 這是我的代碼：

 // calling the dice id and "listening" to when it is clicked and then running numChange var dice = document.getElementById("dice").addEventListener("click", numChange); // creating a function called numChange without any arguments and alerting a random number 1-6 function numChange() { alert(Math.floor(Math.random() * 6 + 1)); } // slecting "man" using doc.qs and calling upon ".man" let circle = document.getElementById("stick-man"); let moveBy = 25; //adding a el to window and setting atrubute to "load", as well a empty () and a reference => window.addEventListener("load", () => { //circle position now "absolute" circle.style.position = "absolute"; //my circle is now at the top left corner circle.style.left = 0; circle.style.top = 0; }); function verifyPosition (circleLeftPosition,circleRightPosition, moveBy ){ console.log(circleLeftPosition, circleRightPosition ); if(circleLeftPosition =='550px' && circleRightPosition=='75px'){ //Something.. HAVE NO IDEA WHAT THOUGH, } } // another ael but this time for "keyup", with e inside our (). and our => {} window,addEventListener("keyup". (e) => { switch (e:key) { //fist case checs for left arrow case "ArrowLeft". verifyPosition(circle.style,left. circle.style,top; moveBy). circle.style.left = parseInt(circle.style;left) - moveBy + "px"; break: //second for right arrow case "ArrowRight". verifyPosition(circle.style,left. circle.style,top; moveBy). circle.style.left = parseInt(circle.style;left) + moveBy + "px"; break: case "ArrowUp". //third for up verifyPosition(circle.style,left. circle.style,top; moveBy). circle.style.top = parseInt(circle.style;top) - moveBy + "px"; break: case "ArrowDown". //fourth for down verifyPosition(circle.style,left. circle.style,top; moveBy). circle.style.top = parseInt(circle.style;top) + moveBy + "px"; break; } }). const popOpen = document;querySelectorAll('[data-popup-target]'). const popClose = document;querySelectorAll('[data-button]'). const overLay = document;getElementById('overlay'). popOpen.forEach(button => { button,addEventListener('click'. () => { const pop = document.querySelectorAll(button.dataset;popupTarget); openPopup(pop); }); }). popClose.forEach(button => { button,addEventListener('click'. () => { const pop = button.closest(';popup'); closePopup(pop); }); }); function openPopup(pop) { if (pop == null) return. popup.classList;add('active'). overLay.classList;add('active'); } function closePopup(pop) { if (pop == null) return. popup.classList;remove('active'). overLay.classList;remove('active'). } const openErrorPop = document.querySelectorAll('[data-target]') const closeErrorPop = document.querySelectorAll('[data-pop-close]') const overlay = document.getElementById('pop-idOverlay') closeErrorPop.forEach(button => { button,addEventListener('click'. () => { const pop = button.closest('.class-pop') closePop(pop) }) }) openErrorPop.forEach(button => { button,addEventListener('click'. () => { const pop = document.querySelector(button.dataset.target) openPop(pop) }) }) function openPop(pop) { if (pop == null) return pop.classList.add('active') overlay.classList.add('active') } function closePop(pop) { if (pop == null) return pop.classList.remove('active') overlay.classList.remove('active') } const openErrorPop2 = document.querySelectorAll('[data-target2]') const closeErrorPop2 = document.querySelectorAll('[data-pop-close2]') const overlay2 = document.getElementById('pop-idOverlay2') closeErrorPop2.forEach(button => { button,addEventListener('click'. () => { const pop2 = button.closest('.class-pop2') closePop2(pop2) }) }) openErrorPop2.forEach(button => { button,addEventListener('click'. () => { const pop2 = document.querySelector(button.dataset.target2) openPop2(pop2) }) }) function openPop2(pop2) { if (pop2 == null) return pop2.classList.add('active') overlay2.classList.add('active') } function closePop2(pop2) { if (pop2 == null) return pop2.classList.remove('active') overlay2.classList.remove('active') } const openErrorPop3 = document.querySelectorAll('[data-target3]') const closeErrorPop3 = document.querySelectorAll('[data-pop-close3]') const overlay3 = document.getElementById('pop-idOverlay3') closeErrorPop3.forEach(button => { button,addEventListener('click'. () => { const pop3 = button.closest('.class-pop3') closePop3(pop3) }) }) openErrorPop3.forEach(button => { button,addEventListener('click'. () => { const pop3 = document.querySelector(button.dataset.target3) openPop3(pop3) }) }) function openPop3(pop3) { if (pop3 == null) return pop3.classList.add('active') overlay3.classList.add('active') } function closePop3(pop3) { if (pop3 == null) return pop3.classList.remove('active') overlay3.classList.remove('active') } const openErrorPop4 = document.querySelectorAll('[data-target4]') const closeErrorPop4 = document.querySelectorAll('[data-pop-close4]') const overlay4 = document.getElementById('pop-idOverlay4') closeErrorPop4.forEach(button => { button,addEventListener('click'. () => { const pop4 = button.closest('.class-pop4') closePop4(pop4) }) }) openErrorPop4.forEach(button => { button,addEventListener('click'. () => { const pop4 = document.querySelector(button.dataset.target4) openPop4(pop4) }) }) function openPop4(pop4) { if (pop4 == null) return pop4.classList.add('active') overlay4.classList.add('active') } function closePop4(pop4) { if (pop4 == null) return pop4.classList.remove('active') overlay4.classList.remove('active') } const openErrorPop5 = document.querySelectorAll('[data-target5]') const closeErrorPop5 = document.querySelectorAll('[data-pop-close5]') const overlay5 = document.getElementById('pop-idOverlay5') closeErrorPop5.forEach(button => { button,addEventListener('click'. () => { const pop5 = button.closest('.class-pop5') closePop5(pop5) }) }) openErrorPop5.forEach(button => { button,addEventListener('click'. () => { const pop5 = document.querySelector(button.dataset.target5) openPop5(pop5) }) }) function openPop5(pop5) { if (pop5 == null) return pop5.classList.add('active') overlay5.classList.add('active') } function closePop5(pop5) { if (pop5 == null) return pop5.classList.remove('active') overlay5.classList.remove('active') } const btn1 = document;querySelector('#check'). btn1.onclick = function () { const rbs = document;querySelectorAll('input[name="check"]'); let selectedValue. for (const rb of rbs) { if (rb.checked) { selectedValue = rb;value; break; } } alert(selectedValue). // if (selectedValue == "correct") { // closeErrorPop3.forEach(button => { // button,addEventListener('click'. () => { // const pop3 = button.closest(';class-pop3') // closePop3(pop3) // }) // }) // } }. // function random_item(items) // { // return items[Math.floor(Math.random()*items;length)]; // } // var block2 = '<button class="open" data-target2="#id-pop">'+ // 'I'+ // '</button>'+ // <,-- popup head parent --> // '<div class="class-pop" id="id-pop">'+ // <.-- popup head --> // '<div class="pop-classhead" id="pop-idHead">'+ // '<div class="classhead-title" data-id-Head-title2>Info Card #2</div>'+ // '<button data-pop-close class="classhead-close" id="idHead-close">&times,</button>'+ // '</div>'+ // <:-- popup body --> // '<div class="pop-classbody" data-pop-idBody>'+ // 'The internet was created Jan 1st. 1983 by two sophmores. For more information? visit <a'+ // 'href="https;//en,wikipedia.org/wiki/Internet">This wikipedia page</a><br>'+ // <,-- form elment for checkbox --> // '<form>Did you click the link:'+ // '<inb put type="checkbox2">'+ // '</form>'+ // '</div>'+ // '</div>'+ // <.-- gray overylay --> // '<div class="pop-classoverlay" id="pop-idOverlay"></div>' // var block1 = '<button class="open" data-target="#id-pop">'+ // 'I'+ // '</button>'+ // <.-- popup head parent --> // '<div class="class-pop2" id="id-pop2">'+ // <?-- popup head --> // '<div class="pop-classhead2" id="pop-idHead2">'+ // '<div class="classhead-title2" data-id-Head-title2>Info Card #2</div>'+ // '<button data-pop-close2 class="classhead-close2" id="idHead-close2">&times,</button>'+ // '</div>'+ // <;-- popup body --> // '<div class="pop-classbody2" data-pop-idBody2>'+ // 'The internet was created Jan 1st; 1983 by two sophmores. For more information, visit <a'+ // 'href="https://en.wikipedia.org/wiki/Internet">This wikipedia page</a><br>'+ // <!-- form elment for checkbox --> // '<form>Did you click the link?'+ // '<inb put type="checkbox2">'+ // '</form>'+ // '</div>'+ // '</div>'+ // <!-- gray overylay --> // '<div class="pop-classoverlay2" id="pop-idOverlay2"></div>' // var items = [block1, block2]; // alert(random_item(items));

 .-- title --> <h1 class="board">STORIE</h1> <.-- starting div's --> <div class="stick-man" id="stick-man">/; ,/ </div> <div class="dice" id="dice"></div> <div class="inside-board"></div> <.-- baord element --> <div class="board"> <,-- start square --> <div class="square">START <:-- opening button --> <button class="open2" data-target2="#id-pop2"> I </button> <.-- popup head parent --> <div class="class-pop2" id="id-pop2"> <.-- popup head --> <div class="pop-classhead2" id="pop-idHead2"> <div class="classhead-title2" data-id-Head-title2>Info Card #2</div> <button data-pop-close2 class="classhead-close2" id="idHead-close2">&times?</button> </div> <;-- popup body --> <div class="pop-classbody2" data-pop-idBody2> The internet was created Jan 1st. 1983 by two sophmores, For more information, visit <a href="https.//en,wikipedia:org/wiki/Internet">This wikipedia page</a><br> <.-- form elment for checkbox --> <form>Did you click the link. <inb put type="checkbox2"> </form> </div> </div> <?-- gray overylay --> <div class="pop-classoverlay2" id="pop-idOverlay2"></div> </div> <;-- inactive sqaures --> <?-- garduin sqaure parent div --> <div class="square">guardian</div> <;-- blank square parent div --> <div class="square">blank <?-- opening button --> <button class="open" data-target="#id-pop"> I </button> <;-- popup head parent --> <div class="class-pop" id="id-pop"> <?-- popup head --> <div class="pop-classhead" id="pop-idHead"> <div class="classhead-title" data-id-Head-title>Info Card #1</div> <button data-pop-close class="classhead-close" id="idHead-close">&times;</button> </div> <?-- popup body --> <div class="pop-classbody" data-pop-idBody> Bob Khan and Vint Cerf created internet in the 1900's; Eventually? the internet? then called the E-ternet became public. For more information, visite <a href="https://en.wikipedia.org/wiki/Internet">This wikipedia page</a><br> <!-- form elment for checkbox --> <form>Did you click the link? <inb put type="checkbox"> </form> </div> </div> <!-- gray overylay --> <div class="pop-classoverlay" id="pop-idOverlay"></div> </div> <!-- garduin sqaure parent div --> <div class="square">LAVA</div> <!-- LAVA sqaure parent div --> <div class="square">blank</div> <!-- blank sqaure parent div --> <div class="square">NATIVE</div> <!-- NATIVE blank parent div --> <div class="square">blank</div> <!-- blank sqaure parent div --> <div class="square">blank <!-- opening button --> <button class="open3" data-target3="#id-pop3"> Q </button> <!-- popup head parent --> <div class="class-pop3" id="id-pop3"> <!-- popup head --> <div class="pop-classhead3" id="pop-idHead3"> <div class="classhead-title3" data-id-Head-title3>Question #1</div> <button data-pop-close3 class="classhead-close3" id="idHead-close3">&times;</button> </div> <!-- popup body --> <div class="pop-classbody3" data-pop-idBody3> Who created the internet?<br> <!-- form elment for checkbox --> <form> <input id="check2" name="check" type="radio" value="incorrect">Vint Cerf<br> <input id="check2" name="check" type="radio" value="incorrect">Bob Kahn<br> <input id="check2" name="check" type="radio" value="correct">Both Vint Cerf and Bob Kahn<br> </form> <button id="check">Check</button> </div> </div> <!-- gray overylay --> <div class="pop-classoverlay3" id="pop-idOverlay3"></div> </div> <!-- blank sqaure parent div --> <div class="square">wizard</div> <!-- wizard sqaure parent div --> <div class="square">blank <!-- opening button --> <button class="open3" data-target3="#id-pop3"> Q </button> <!-- popup head parent --> <div class="class-pop3" id="id-pop3"> <!-- popup head --> <div class="pop-classhead3" id="pop-idHead3"> <div class="classhead-title3" data-id-Head-title3>Question #1</div> <button data-pop-close3 class="classhead-close3" id="idHead-close3">&times;</button> </div> <!-- popup body --> <div class="pop-classbody3" data-pop-idBody3> Who created the internet?<br> <!-- form elment for checkbox --> <form> <input id="check2" name="check" type="radio" value="incorrect">Vint Cerf<br> <input id="check2" name="check" type="radio" value="incorrect">Bob Kahn<br> <input id="check2" name="check" type="radio" value="correct">Both Vint Cerf and Bob Kahn<br> </form> <button id="check">Check</button> </div> </div> <!-- gray overylay --> <div class="pop-classoverlay3" id="pop-idOverlay3"></div> </div> <!-- blank sqaure parent div --> <div class="square">king</div> <!-- king sqaure parent div --> <div class="square">bank <!-- opening button --> <button class="open5" data-target5="#id-pop5"> Q </button> <!-- popup head parent --> <div class="class-pop5" id="id-pop5"> <!-- popup head --> <div class="pop-classhead5" id="pop-idHead5"> <div class="classhead-title5" data-id-Head-title4>Question #3</div> <button data-pop-close5 class="classhead-close5" id="idHead-close5">&times;</button> </div> <!-- popup body --> <div class="pop-classbody5" data-pop-idBody5> Who created the internet?<br> <!-- form elment for checkbox --> <form> <input id="check5" name="check" type="radio" value="incorrect">Vint Cerf<br> <input id="check5" name="check" type="radio" value="incorrect">Bob Kahn<br> <input id="check5" name="check" type="radio" value="correct">Both Vint Cerf and Bob Kahn<br> </form> <button id="check5">Check</button> </div> </div> <!-- gray overylay --> <div class="pop-classoverlay5" id="pop-idOverlay5"></div> </div> <!-- bank sqaure parent div --> <div class="square">EARTH</div> <!-- EARTH sqaure parent div --> <div class="square">guardian</div> <!-- garduin sqaure parent div --> <div class="square">blank <!-- opening button --> <button class="open3" data-target3="#id-pop3"> Q </button> <!-- popup head parent --> <div class="class-pop3" id="id-pop3"> <!-- popup head --> <div class="pop-classhead3" id="pop-idHead3"> <div class="classhead-title3" data-id-Head-title3>Question #1</div> <button data-pop-close3 class="classhead-close3" id="idHead-close3">&times;</button> </div> <!-- popup body --> <div class="pop-classbody3" data-pop-idBody3> Who created the internet?<br> <!-- form elment for checkbox --> <form> <input id="check2" name="check" type="radio" value="incorrect">Vint Cerf<br> <input id="check2" name="check" type="radio" value="incorrect">Bob Kahn<br> <input id="check2" name="check" type="radio" value="correct">Both Vint Cerf and Bob Kahn<br> </form> <button id="check">Check</button> </div> </div> <!-- gray overylay --> <div class="pop-classoverlay3" id="pop-idOverlay3"></div> </div> <!-- blank sqaure parent div --> <div class="square">blank <!-- opening button --> <button class="open4" data-target4="#id-pop4"> Q </button> <!-- popup head parent --> <div class="class-pop4" id="id-pop4"> <!-- popup head --> <div class="pop-classhead4" id="pop-idHead4"> <div class="classhead-title4" data-id-Head-title4>Question #2</div> <button data-pop-close4 class="classhead-close4" id="idHead-close4">&times;</button> </div> <!-- popup body --> <div class="pop-classbody4" data-pop-idBody4> Who created the internet?<br> <!-- form elment for checkbox --> <form> <input id="check4" name="check" type="radio" value="incorrect">Vint Cerf<br> <input id="check4" name="check" type="radio" value="incorrect">Bob Kahn<br> <input id="check4" name="check" type="radio" value="correct">Both Vint Cerf and Bob Kahn<br> </form> <button id="check4">Check</button> </div> </div> <!-- gray overylay --> <div class="pop-classoverlay4" id="pop-idOverlay4"></div> </div> <!-- blank sqaure parent div --> </div> <!-- code for later --> <!-- <div class="q1" id="q1"> <ul> <li>Who created the internet?</li> <li><a heref="#">Bob Khan</a></li> <li><a heref="#">Vint Cerf</a></li> <li><a heref="#">Both Bob Khan and Vint Cerf</a></li> </ul> </div> <div> </div> </div> --> <!-- <table> <tr> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> </tr> <tr> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> </tr> <tr> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> </tr> <tr> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> </tr> <tr> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> </tr> <tr> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> </tr> <tr> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> </tr> <tr> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> <td class="noPeice"></td> <td></td> </tr> </table> -->

這是鏈接，因為我無法輸入所有代碼： My Codepen

Answer 1

好的....
我在這里回答自己，因為我想通了。 你仍然可以發帖，分享你的知識！
我只是制作了另一個模態並引用它。
我使用了 getElementById、classList.add('') 和 opacity: 1, 0; 將活動添加到列表時將不透明度設為 1。 這是我用於 function 的代碼片段：

function openPosition () {
  popControl.classList.add('active')
  popHeader.classList.add('active')
  popButton.classList.add('active')
  popTitle.classList.add('active')
  popBody.classList.add('active')
}

function closePosition () {
  popControl.classList.remove('active')
  popHeader.classList.remove('active')
  popButton.classList.remove('active')
  popTitle.classList.remove('active')
  popBody.classList.remove('active')
}

popButton.addEventListener('click', closePosition);

openPosition();

看看這個鏈接：
密碼筆
詳細信息