盡管將 document.querySelector 放在 window.addEventListener("load") 中，但我在“登錄框”上的 document.querySelector 回傳 null。這是我的 HTML：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accueil</title>
<script src="dist/index.js"></script>
<link rel="stylesheet" href="css/global.css">
<link rel="icon" href="img/favicon.png" type="image/png" />
</head>
<body>
<div class="sign-in-box">
<form action="" method="post" autocomplete="off">
<div class="sign-in-input-group">
<div id="api-message"></div>
<h1>Chadbox?</h1>
<input type="text" name="username" placeholder="Nom d'usager" required
id="usernameBox">
<input type="password" name="password" placeholder="Mot de passe" required
id="passwordBox">
<button id="connectButton">Connexion</button>
<a href="register.html" id="registerButton">S'enregistrer</a>
</div>
</form>
</div>
<div id="container"></div>
<div id="startButton">Start</div>
</body>
</html>
這是我的 Javascript 的相關部分：
window.addEventListener("load", () => {
document.querySelector("form").onsubmit = function () {
return signin(this);
}
new Vue({
el: '#container',
components: { carSelector },
template: '<carSelector/>'
})
let startBtn = document.querySelector("#startButton");
startBtn.addEventListener('mouseover', () =>{
startBtn.style.backgroundImage = "url('img/checkered_flag.gif')";
startBtn.style.border = "4px solid red";
})
startBtn.addEventListener('mouseleave', () =>{
startBtn.style.backgroundImage = "url('img/flag.png')";
startBtn.style.border = "4px solid teal";
})
startBtn.addEventListener('click', () =>{
window.requestAnimationFrame(moveStartBox);
let audio = document.createElement('audio');
audio.src= "./sounds/menumusic.mp3";
audio.loop = true;
audio.play();
appearLoginBox();
let node = document.querySelector("#sign-in-box");
console.log(node); //<- returns null
})
我在播放音頻時遇到了類似的問題，我設法通過創建一個新元素來制作作品，但在這種情況下我不能這樣做。是因為我將 querySelector 放在了 EventListener 中嗎？
uj5u.com熱心網友回復：
document.querySelector("#sign-in-box");
以元素的 id 為目標，因此您應該更新 JavaScript 選擇器
document.querySelector("#sign-in-box");
到
document.querySelector(".sign-in-box");
或將 html 更新為
<div class="sign-in-input-group">
到
<div id="sign-in-input-group">
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375208.html
標籤：javascript html dom