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

我正在创建一个小东西来练习JavaScript，我发现一个错误，我不明白为什么会发生

浏览器（chrome、firefox）在控制台中给了我以下错误消息：“UncaughtTypeError:无法读取script.js:12处null的属性'querySelectorAll'，但是当我在JSFIDLE中尝试代码时，一切都正常工作。浏览器中允许使用JavaScript，因此通常情况下它应该可以正常工作

根据正常情况，浏览器应正确显示代码

另一个问题是：我如何避免输入这么多if？如果我想使用JavaScript开关，我应该如何编写它？

//查找页面的url
//const findUrl=window.location.href；
常量findUrl=”https://www.example.com/en/";
控制台日志（findUrl）；
if（findUrl.match（/en/）{
log（“已找到匹配项！”）；
//选择div中id为文本的段落
让findP=document.getElementById（“text”）.queryselectoral（“p”）；
//使用新文本定义变量
让newtxtEN=“一个很长的英文文本来代替lorem ipsum”；
//替换lorem ipsum文本
findP[0]。innerText=newtxtEN；
}
if（findUrl.match（/fr/））{
log（“已找到匹配项！”）；
//选择div中id为文本的段落
让findP=document.getElementById（“text”）.queryselectoral（“p”）；
//使用新文本定义变量
让newtxtFR=“我是法国人”；
//替换lorem ipsum文本
findP[0]。innerText=newtxtFR；
}
if（findUrl.match（/de/）{
log（“已找到匹配项！”）；
//选择div中id为文本的段落
让findP=document.getElementById（“text”）.queryselectoral（“p”）；
//使用新文本定义变量
让newtxtDE=“我在德国”；
//替换lorem ipsum文本
findP[0]。innerText=newtxtDE；
}

#文本{
边框：1px纯黑；
保证金：5px；
填充物：5px；
颜色：蓝色；
}
p{
填充：10px；
字体系列：Arial、Helvetica、无衬线字体；
}

我的同僚们都是精英。
是的，康斯昆特。

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

//查找页面的url
//const findUrl=window.location.href；
常量findUrl=”https://www.example.com/en/";
控制台日志（findUrl）；
常数langs=[{
图案：/en/，
文本：“一个很长的英文文本，以取代lorem ipsum”
},
{
图案：/fr/，
文本：“我是法国人”
},
{
图案：/de/，
文字：“我是德国人”
}
];
让发现=错误；
for（设i=0；i

#文本{
边框：1px纯黑；
保证金：5px；
填充物：5px；
颜色：蓝色；
}
p{
填充：10px；
字体系列：Arial、Helvetica、无衬线字体；
}

我的同僚们都是精英。是的，康斯昆特。

我们无法在此处重现您的问题，代码按照您的意愿工作，因此我们可能无法给您一个简洁的答案

但是，您的代码非常过时，因为您使用的是

.getElementsByTagName（）

，所以您使用的是“活动”节点列表，这可能会影响页面和应用程序的性能。此外，由于您只对节点列表中找到的第一个元素感兴趣，因此收集所有匹配项只是为了丢弃除第一个之外的所有元素也是一种浪费

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

//查找页面的url
//const findUrl=window.location.href；
常量findUrl=”https://www.example.com/en/";
控制台日志（findUrl）；
让matchFound=“not”；
//您只需要执行一次，而不是在每个if语句中执行
//因为结果不会改变。并使用.querySelector（），
//不是。getElementsByTagName（）。
让findP=document.getElementById（“文本”）.querySelector（“p”）；
//不要使用3个单独的if语句，而是使用else if so
//如果情况属实，其他州将不会被处理。
if（findUrl.match（/en/）{
findP.textContent=“替换lorem ipsum的很长英文文本”；
matchfind=“”；
}else if（findUrl.match（/fr/））{
findP.textContent=“我是法国人”；
matchfind=“”；
}else if（findUrl.match（/de/））{
findP.textContent=“Ich bi）n kein Deutscher”；
matchfind=“”；
}
log（“匹配项为“+matchFound+”found”）
#文本{
边框：1px纯黑；
保证金：5px；
填充物：5px；
颜色：蓝色；
}
p{
填充：10px；
字体系列：Arial、Helvetica、无衬线字体；
}


我的同僚们都是精英。
是的，康斯昆特。

我无法解释为什么会出现这种错误，但我可以说，您的方法已经过时，会影响页面的性能。如果您只对给定元素中的第一个
p
感兴趣，请使用
.querySelector（“p”）
而不是
getElementsByTagName（“p”）
，然后使用
[0]
对结果进行索引。请将问题集中在一个主题上。Re:
if
语句；你不是只想要一个简单的带有翻译的对象，不管它是如何生成的吗？（手动，图书馆，…）@ScottMarcus我是个初学者，但谢谢你的提示！接受的答案部分是这样的，但是：因为这是一个已知的字符串，所以不需要使用正则表达式——只需要在主机之后获得URL的第一部分（例如，
en
，