Question

我的JavaScript出现问题，因为它似乎无法找到必要的元素。具有onload的第二个函数可以正常工作，并且不会在没有填写某些字段的情况下让表单提交，但是第一个函数似乎卡住了。是否不等待DOM正确加载？另外，为什么不能将所有内容都放在第一个函数下，因为它按预期方式等待DOM并可以找到必要的元素？我只使用香草Javascript。还没有Jquery。

    // my-script.js
document.addEventListener("DOMContentLoaded", function(event) {
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementsByClassName(".required").style.backgroundColor="blue";
});

window.onload=function(){

  document.getElementById("mainForm").onsubmit = function(e){
    var pass = document.querySelector("form textarea").value;
    var inputField = document.querySelector(".rectangle > input");
    if (inputField.type=="checkbox"){
      if (!inputField.checked){
        e.preventDefault();
        alert("Check the license box")
      }
    }
    if(pass=="" || pass == null){
      e.preventDefault();
      alert("Enter a description");
    }
  }
}

Answer 1

为getElementsByClassName()命名类名时，不需要使用.。
所以正确的行是：

document.getElementsByClassName("required").style.backgroundColor="blue";

如果您多次使用'.required'类，则可以执行以下操作：

var x = document.getElementsByClassName("required");
x[0].style.backgroundColor="blue";

这将为给定所需类的第一个元素设置样式。

如果要更改具有所需类的所有元素的背景色，可以通过以下操作进行此操作：

var x = document.getElementsByClassName("required");

for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "blue";
}

为什么我的Javascript无法检测到我需要的元素？

1 个答案: