輸入字段接收文本時如何更改標簽顏色？

Question

當我將 Javascript 鏈接到多個頁面時，我對為什么會出現此錯誤感到困惑。 我正在嘗試使用 Javascript 來更改表單標簽的顏色，只要它的輸入字段包含文本。 它在登錄部分工作正常，但在我將它鏈接到 SignUp.html 文件時不起作用並給我一個錯誤。 這是我在 codepen 上的項目的鏈接，如果您不想舉例說明我在說什么。 我真的很感激任何幫助！

 // LOGIN INPUT VARIABLES let usernameInput = document.querySelector("#usernameInput"); let passwordInput = document.querySelector("#passwordInput"); // SIGN UP INPUT VARIABLES let firstNameInput = document.querySelector("#firstNameInput"); let lastNameInput = document.querySelector("#lastNameInput"); usernameInput.addEventListener("input", function() { document.querySelector("#usernameLabel").style.color = "#98589e"; if (usernameInput.value == '') { document.querySelector("#usernameLabel").style.color = "#b9c0c8"; } }); passwordInput.addEventListener("input", function() { document.querySelector("#passwordLabel").style.color = "#98589e"; if (passwordInput.value == '') { document.querySelector("#passwordLabel").style.color = "#b9c0c8"; } }); firstNameInput.addEventListener("input", function() { document.querySelector("#firstNameLabel").style.color = "#98589e"; if (firstNameInput.value == '') { document.querySelector("#firstNameLabel").style.color = "#b9c0c8"; } }); lastNameInput.addEventListener("input", function() { document.querySelector("#lastNameLabel").style.color = "#98589e"; if (lastNameInput.value == '') { document.querySelector("#lastNameLabel").style.color = "#b9c0c8"; } });

https://codepen.io/EricGFig/project/editor/ZgPgRe

Answer 1

你的錯誤是

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

它指向第 8 行。實際上，在您的signUp.html文件中，您沒有名為#usernameInput元素（實際上也沒有#passwordInput ）。

因此，當您在signUp.html加載此文件時， usernameInput和passwordInput都未定義（它們僅在加載到logIn.html中logIn.html定義）

因此，您不應為兩個頁面使用相同的 JavaScript 文件。

對於signUp.html頁面，您應該只有以下 JavaScript 代碼：

let firstNameInput = document.querySelector("#firstNameInput");
let lastNameInput = document.querySelector("#lastNameInput");

firstNameInput.addEventListener("input", function() {
    document.querySelector("#firstNameLabel").style.color = "#98589e";
    if (firstNameInput.value == '') {
        document.querySelector("#firstNameLabel").style.color = "#b9c0c8";
    }
});

lastNameInput.addEventListener("input", function() {
    document.querySelector("#lastNameLabel").style.color = "#98589e";
    if (lastNameInput.value == '') {
        document.querySelector("#lastNameLabel").style.color = "#b9c0c8";
    }
});

如果您真的想保留一個 JavaScript 文件，請考慮使用函數來分隔您的代碼。 例如，有一個用於登錄樣式處理的函數和另一個用於注冊樣式處理的函數。

Answer 2

您的代碼失敗的原因是您嘗試在不存在的元素（空）上附加事件偵聽器。

為了解決這個問題，要么創建兩個單獨的 JS 文件，要么在你的監聽器周圍添加 if 語句：

// LOGIN INPUT VARIABLES
let usernameInput = document.querySelectorAll(".usernameInput");
let passwordInput = document.querySelectorAll(".passwordInput");
// SIGN UP INPUT VARIABLES
let firstNameInput = document.querySelectorAll(".firstNameInput");
let lastNameInput = document.querySelectorAll(".lastNameInput");

if (usernameInput) {
  usernameInput.addEventListener("input", function() {
    document.querySelector("#usernameLabel").style.color = "#98589e";
    if (usernameInput.value == '') {
        document.querySelector("#usernameLabel").style.color = "#b9c0c8";
    }
  });
}

if (passwordInput) {
  passwordInput.addEventListener("input", function() {
    document.querySelector("#passwordLabel").style.color = "#98589e";
    if (passwordInput.value == '') {
        document.querySelector("#passwordLabel").style.color = "#b9c0c8";
    }
  });
}

if (firstNameInput) {
  firstNameInput.addEventListener("input", function() {
    console.log('!!');
    document.querySelector("#firstNameLabel").style.color = "#98589e";
    if (firstNameInput.value == '') {
        document.querySelector("#firstNameLabel").style.color = "#b9c0c8";
    }
  });
}

if (lastNameInput) {
  lastNameInput.addEventListener("input", function() {
    document.querySelector("#lastNameLabel").style.color = "#98589e";
    if (lastNameInput.value == '') {
        document.querySelector("#lastNameLabel").style.color = "#b9c0c8";
    }
  });
}

Answer 3

正如之前其他答案所述，代碼失敗是因為它試圖找到一個不存在的 DOM 對象。

我處理這個問題的方法是使用 CSS 類。 我會將您的 JS 替換為：

var trigger = document.getElementsByClassName('input-trigger')
for(var i = 0; i < trigger.length; i++) {
  trigger[i].addEventListener("input", addListener);
}

function addListener() {
    var labels = this.parentNode.childNodes;      
    for(var i = 0; i < labels.length; i++) {
        if (labels[i].className == 'input-validate') {
            if (this.value === '') {        
              labels[i].style.color = "#b9c0c8";
            } else {
              labels[i].style.color = "#98589e";
            }
        }
    }
}

然后，您只需要將類“input-trigger”添加到要觸發顏色更改的輸入，並將“input-validate”添加到要更改顏色的標簽。

上面的代碼更簡潔。 它由第一個類觸發，然后查看觸發元素的父元素，然后選擇該父元素內具有“input-validate”類的任何標簽。

這是一個片段示例：

 var trigger = document.getElementsByClassName('input-trigger') for(var i = 0; i < trigger.length; i++) { trigger[i].addEventListener("input", addListener); } function addListener() { var labels = this.parentNode.childNodes; for(var i = 0; i < labels.length; i++) { if (labels[i].className == 'input-validate') { if (this.value === '') { labels[i].style.color = "#b9c0c8"; } else { labels[i].style.color = "#98589e"; } } } }

 <ul class="form-list"> <li class="form-list-row"> <label id="usernameLabel" class='input-validate'>Username or Email</label><br> <input id="usernameInput" class='input-trigger' type="text" required> </li> <li class="form-list-row"> <label id="passwordLabel" class='input-validate'>Password</label><br> <input id="passwordInput" class='input-trigger' type="password" required> </li> </ul>

雖然給出的任何其他示例都可以工作，但我總是更喜歡嘗試編寫簡潔、可重用的代碼。

希望有幫助！