在DIV中选择P会在浏览器控制台中产生错误，但在JsFiddle中可以正常工作为什么？

问题描述

我正在为JavaScript实践创建一个小东西，但出现一个我不明白为什么会发生的错误。

浏览器（chrome，firefox）在控制台中给我以下错误消息：“未捕获的TypeError：无法在script.js：12读取null的属性'querySelectorAll'”，但是当我在JSfiddle中尝试代码时，一切都是按预期工作。浏览器允许使用JavaScript，因此通常它应该可以正常工作。

通常，根据HTML DOM querySelectorAll() Method，浏览器应正确显示代码。

另一个问题是：如何避免输入太多if？如果要使用JavaScript开关，应该如何编写？

//find the url of the page
// const findUrl = window.location.href;
const findUrl = "https://www.example.com/en/";
console.log(findUrl);

if (findUrl.match(/en/)) {
  console.log("The match has been found!");
  //select the paragraph inside the div with id #texts
  let findP = document.getElementById("texts").querySelectorAll("p");
  //define a variable with the new text
  let newtxtEN = "A very long text in English to replace the lorem ipsum";
  //replace the lorem ipsum text
  findP[0].innerText = newtxtEN;
}

if(findUrl.match(/fr/)) {
   console.log("The match has been found!");
  //select the paragraph inside the div with id #texts
  let findP = document.getElementById("texts").querySelectorAll("p");
  //define a variable with the new text
  let newtxtFR = "Je ne parle pas français";
  //replace the lorem ipsum text
  findP[0].innerText = newtxtFR;
}

if(findUrl.match(/de/)) {
   console.log("The match has been found!");
  //select the paragraph inside the div with id #texts
  let findP = document.getElementById("texts").querySelectorAll("p");
  //define a variable with the new text
  let newtxtDE = "Ich bin kein Deutscher";
  //replace the lorem ipsum text
  findP[0].innerText = newtxtDE;
}

#texts {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  color: blue;
}
p {
  padding: 10px;
  font-family: Arial,Helvetica,sans-serif;
}

<div id="texts">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Ut,consequuntur.
  </p>
</div>

解决方法

您可以使用对象数组避免所有重复代码。

//find the url of the page
// const findUrl = window.location.href;
const findUrl = "https://www.example.com/en/";
console.log(findUrl);

const langs = [{
    pattern: /en/,text: "A very long text in English to replace the lorem ipsum"
  },{
    pattern: /fr/,text: "Je ne parle pas français"
  },{
    pattern: /de/,text: "Ich bin kein Deutscher"
  }
];

let found = false;
for (let i = 0; i < langs.length; i++) {
  if (findUrl.match(langs[i].pattern)) {
    console.log("The match has been found!");
    let findP = document.getElementById("texts").querySelectorAll("p");
    findP[0].innerText = langs[i].text;
    found = true;
    break;
  }
}
if (!found) {
  console.log("The match was not found");
}

#texts {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  color: blue;
}

p {
  padding: 10px;
  font-family: Arial,Helvetica,sans-serif;
}

<div id="texts">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut,consequuntur.
  </p>
</div>

关于为什么会出现此错误，请参见Why does jQuery or a DOM method such as getElementById not find the element?

,

我们无法在此处重现您的问题，并且代码可以按您的预期工作，因此我们可能无法为您提供简明的答案。

但是，您的代码非常过时，并且因为您使用的是.getElementsByTagName()，所以您使用的是“活动”节点列表，这可能会损害页面和really shouldn't be used的性能。此外，由于您只对节点列表中找到的第一个元素感兴趣，因此仅收集所有匹配项以将除第一个元素之外的所有元素都扔掉也是一种浪费。

最后，您有一堆不需要的重复代码。请参阅下面的代码以获取更合适的解决方案。

//find the url of the page
// const findUrl = window.location.href;
const findUrl = "https://www.example.com/en/";
console.log(findUrl);

let matchFound = "not ";

// You only need to do this once,not in each of your if statements
// since the result isn't going to change. And use .querySelector(),// not .getElementsByTagName().
let findP = document.getElementById("texts").querySelector("p");

// Instead of 3 separate if statements,use else if so that once you
// have a true condition,the other statemens won't be processed.
if (findUrl.match(/en/)) {
  findP.textContent = "A very long text in English to replace the lorem ipsum";
  matchFound = "";
} else if(findUrl.match(/fr/)) {
  findP.textContent = "Je ne parle pas français";
  matchFound = "";
} else if(findUrl.match(/de/)) {
  findP.textContent = "Ich bi)n kein Deutscher";
  matchFound = "";
}

console.log("The match was " + matchFound + "found."); 

#texts {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  color: blue;
}
p {
  padding: 10px;
  font-family: Arial,sans-serif;
}

<div id="texts">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Ut,consequuntur.
  </p>
</div>