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

Question

我正在用 JavaScript 创建一个小东西来练习，我收到一个错误，我不明白为什么会这样。

浏览器（chrome、firefox）在控制台中给我以下错误消息：“Uncaught TypeError: Cannot read 属性 'querySelectorAll' of null at script.js :12"，但是当我在 JSFiddle 中尝试代码时，一切都按预期工作。 JavaScript 在浏览器中是允许的，所以通常它应该可以正常工作。

按照HTML DOM querySelectorAll() Method正常，浏览器应该能正确显示代码。

另一个问题是：我怎样才能避免输入这么多 if's？如果我想用一个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>

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

Selecting a P inside a DIV gives error in browser console but in JsFiddle works fine. Why?

javascript

if-statement

switch-statement

google-chrome-devtools