未捕獲的類型錯誤：無法讀取 null 讀取 addeventlistener 的屬性

Question

我正在開發一個項目，在該項目中，在輸入的 forms 中，我需要獲取 email id 的輸入值並在控制台記錄它，因此在獲取輸入值時它會顯示 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

這兩張圖片顯示了獲取輸入值的js代碼，另一張圖片顯示了頁面中的錯誤

我期待我需要解決這個問題並且我需要獲得輸入值

 window.addEventListener('DOMContentLoaded', () => { let btn = document.querySelector('.btn'); let Sign_email = document.querySelector('#Sign_email'); const getInputvalue = () => { let userinput = Sign_email.value; console.log(userinput) } btn.addEventListener('click', getInputvalue) })

 <form method="POST" action="/sign" class="sign-in-form"> <h2 class="title">Sign in</h2> <div class="input-field"> <i class="fas fa-user"></i> <input name="Sign_email" id="Sign_email" type="email" placeholder="Email Id" /> </div> <div class="input-field"> <i class="fas fa-lock"></i> <input name="Sign_password" id="Sign_password" type="password" placeholder="Password" /> <p id="error">Login again</p> </div> <input type="submit" value="Login" class="btn solid" /> </form>

Answer 1

您的代碼在我這邊運行良好。 如果您共享發生錯誤的行會更好

Answer 2

JS 小提琴編譯器的圖像為您的問題

我在 JS Fiddle（javascript、HTML、CSS 在線編譯器）中使用您的 HTML 模板嘗試了您的 js 代碼。 但它給出了所需的 output。我附上了它的圖片。

通常，如果在文檔中未找到某個元素，則 querySelector 會返回 null。因此，querySelector 可能無法使用 class 找到您的按鈕元素。

請嘗試類似的東西：

const btn = document.querySelector('input[type=submit]');

或其他一些方式，例如為您的按鈕提供“id”屬性，然后嘗試獲取帶有 id 的按鈕。

希望這可以幫助！