在 DIV 中選擇 P 在瀏覽器控制台中會出錯，但在 JsFiddle 中工作正常。 為什么？

Question

我正在創建一個用於練習 JavaScript 的小東西，但我收到一個錯誤，我無法理解為什么會發生這種錯誤。

瀏覽器（chrome、firefox）在控制台中給了我以下錯誤消息：“未捕獲的類型錯誤：無法在 script.js:12 處讀取 null 的屬性 'querySelectorAll'”，但是當我在 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>

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>

至於為什么會出現該錯誤，請參閱為什么 jQuery 或諸如 getElementById 之類的 DOM 方法找不到該元素？

Answer 2

我們無法在此處重現您的問題，並且代碼按您的意圖工作，因此我們可能無法給您一個簡潔的答案。

但是，您的代碼非常過時，並且因為您使用的是.getElementsByTagName()您使用的是“實時”節點列表，這會損害您的頁面性能， 因此不應該使用。 此外，由於您只對節點列表中的第一個找到的元素感興趣，因此收集所有匹配項僅將除第一個之外的所有匹配項都扔掉也是一種浪費。

最后，您有一堆不需要存在的重復代碼。 請參閱下面的代碼以獲得更合適的解決方案。

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