前幾天，我開始學習DOM，并嘗試將代碼克隆到Instagram進行練習。此時，我收到此錯誤訊息“Uncaught TypeError: Cannot read properties of null (reading 'vlaue')” 這是我的 DOM（JS 檔案）
const id = document.getElementById('text')
const password = document.getElementById('password')
document.addEventListener('keyup', function(e) {
if(!id.value && !password.value){
let color = document.querySelector('login-btn');
color.style.backgroundColor = "#FF0000";
}
});
這是我的 index.html 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- ?? ?? div?? ???? ?? ?? Container -->
<div >
<div >
<p >Westagram</p>
</div>
<!-- ??? ?? -->
<div >
<div >
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div >
<input type="password" id="password" placeholder="Password">
</div>
<div >
<button >Log in
</button>
</div>
</div>
<!-- ???? ?? ?? -->
<div >
<a >Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
我試過 const id = blabla.value 密碼 = blabla.value
另外，我嘗試使用“querySelctor”所有這些，但仍然有同樣的問題。你能幫我解決這個錯誤嗎？對此，我真的非常感激！我一整天都在掙扎……謝謝你提前幫助我。
uj5u.com熱心網友回復：
我添加了一個else塊，希望你不會介意，它是為了有所作為。如果使用的是querySelector必須添加. class符號，之前login-btn類似的.login-btn另外-你不關閉的body標簽。如果您在head標簽中設定 JavaScript，則需要為此使用script標簽，而不是link標簽。例如，像<script src = "script.js" defer> </script>
Now It's 應該可以正常作業，最好的問候！
const id = document.getElementById("text");
const password = document.getElementById("password");
document.addEventListener("keydown", function (e) {
if (!id.value && !password.value) {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#FF0000";
} else {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#008000";
}
});<body>
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<div class="login-container">
<div class="id">
<input
type="text"
id="text"
placeholder="Phone number, username, or email"
/>
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password" />
</div>
<div class="bt">
<button class="login-btn">Log in</button>
</div>
</div>
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318022.html
標籤：javascript dom
上一篇：有沒有其他方法可以一次性宣告addEventListener并在不重新宣告的情況下使用它？
下一篇：遍歷html表并計算值