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

您遇到的错误是

未捕获的TypeError：无法读取null
的属性'addEventListener'

它指向第8行。确实，在signUp.html文件中，您没有名为#usernameInput的元素（实际上也不是#passwordInput）。

在usernameInput中加载此文件时，passwordInput和signUp.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

您的代码失败的原因是您在非现有元素上尝试附加事件侦听器（null）。

为了解决这个问题，要么创建两个单独的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>

虽然给出的任何其他示例都可行，但我总是喜欢尝试编写简洁，可重用的代码。

希望有所帮助！

输入字段接收文本时如何更改标签颜色？

3 个答案: