为什么我的Javascript不能用HTML/CSS显示选项卡？

我有一个javascript函数，它应该创建一个新选项卡，并在单击“+”选项卡时将其添加到HTML中。然后，会显示这个新选项卡，但是它不会与我的css一起显示。我已经扫描了我的代码很多次，但我不知道我做错了什么。我是HTML/CSS/Javascript新手，来自Java背景，如果有帮助的话

函数addTab（）{
//创建一个新的div元素
const newDiv=document.createElement（“div”）；
//创建id并添加选项卡内容类
setAttribute（“id”，“newtab”）//设置div的id名称
newDiv.className=“tabcontent”；//为div设置类
//给tab一些文本
const tabContent=document.createTextNode（“测试添加选项卡按钮！”）；
newDiv.appendChild（tabContent）；
//创建选项卡
var btn=document.createElement（“按钮”）；//创建按钮
btn.className=“tablinks”；//为按钮设置类
//将onclick事件赋予按钮
var事件=事件；
btn.onclick=openTab（事件“NewTabEvent”）；
document.getElementByClassName（“tab”）.appendChild（btn）；
//将新创建的元素及其内容添加到DOM中
const currentDiv=document.getElementById（“addnewtab”）；
document.body.insertBefore（newDiv，currentDiv）；
}
函数openTab（evt，tabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

#创建新选项卡{
保证金底部：8.09px；
}
/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景图像：线性梯度（-182.9度，rgb（20,90241）50%，rgb（5105256）50%）；
}
/*设置选项卡内按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：8px 10px；
过渡：0.3s；
字体大小：14px；
保证金：4倍；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
边框颜色：rgb（20,90241）；
}

第一选项卡
+
这是第一个标签
这里面的部分不应该太坏。。。对吧?

在运行代码片段中，我看到以下错误“UncaughtTypeError:无法读取null的属性'style'。我建议您尝试使用..of循环getElementsByClassName

例如：

let tabcontent = document.getElementsByClassName("tabcontent");

for (let tab of tabcontent) {
    tab.style.display = "none";
}

---

您是否按F12打开开发人员工具并查看控制台选项卡？这就是您将看到错误的地方，就像我们在这里运行此代码时看到的那样

“uncaughttypeerror:cannotreadproperty'style'of null”

。这意味着，在试图访问某物的

style

属性的行中的某个地方，某物是

null

，而不是您认为它是的对象。控制台将为您提供准确的行号。您将字符串

NewTabEvent

传递到

openTab

，然后它将尝试查找id为

NewTabEvent

的元素，但没有。为什么您认为

document.getElementById（tabName）

应该能够找到id为

NewTabEvent

的元素？您还可以查找id为

addnewtab

的元素，但该元素也不存在。谢谢。出现问题的那一行是javascript openTab函数中的“document.getElementById（tabName）.style.display…”。我不知道这有什么问题。我确信这是“tabName”“变量被作为参数传递，但我不知道我是如何做错的。我很好奇，循环的目的是什么？”？我不知道getElementsByClassName是可以循环使用的。它是否循环遍历所有可用的类名以找到我需要的内容？tab.style.display=“none”的作用是什么？