时间戳

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

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

问题描述

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

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

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

控制台中的浏览器错误

另一个问题是：我怎样才能避免输入这么多 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>

标签： javascriptif-statementswitch-statementgoogle-chrome-devtools

解决方案

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

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

至于为什么会出现该错误，请参阅为什么 jQuery 或诸如 getElementById 之类的 DOM 方法找不到元素？

推荐阅读