javascript - JS HTML CSS：在我的参数中调用 popOpen() 时遇到问题
问题描述
我目前的代码有问题。我试图在我的一些传感器代码中输入“pop”来调用我的 openPop() 函数，但没有弹出任何内容，即使我认为我正在调用我的弹出窗口。我想知道是否有人可以帮助我。这是我的代码：
// 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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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
解决方案
好的....
我在这里回答自己，因为我想通了。你仍然可以发帖，分享你的知识！
我只是制作了另一个模态并引用它。
我使用了 getElementById、classList.add('') 和 opacity: 1, 0; 将活动添加到列表时将不透明度设为 1。这是我用于该函数的代码片段：
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();
查看此链接：
Codepen
了解完整详情
推荐阅读
- node.js - Mongoose：另一个嵌套数组元素内的数组更新未按预期工作
- sql - 如何从许多表中找到交集的组合？
- python - 获取特定年龄的平均值
- javascript - 等效的 Regex 不支持的后向断言 IOS Safari
- snowflake-cloud-data-platform - 您是否可以使用 AWS Glue 获得永久 IP 地址，以便将其列入 Snowflake 中的白名单？
- html - 添加 div 时，Bootstrap 4 元素不对齐
- postman - 如何在 Postman 中使用不同的变量值运行端点测试？
- stm32 - GNU链接器（ld）中包含的“当前目录”搜索路径？
- c++ - 在 SYCL 中为 2D std::vector 创建缓冲区
- python - 无法在 discord.py 中将 Embed 类型对象作为参数传递