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

Question

我正在创建一个用于练习 JavaScript 的小东西，但我遇到了一个我无法理解为什么会发生的错误。

浏览器（chrome、firefox）在控制台中给我以下错误消息：“Uncaught TypeError: Cannot read property 'querySelectorAll' of null at script.js:12”，但是当我尝试 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>

Answer 1

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

//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?

Answer 2

我们无法在此处重现您的问题，并且代码可以按您的意愿运行，因此我们可能无法为您提供简明的答案。

但是，您的代码非常过时，并且因为您使用的是.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, Helvetica, sans-serif;
}

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