Question

以下是相关的javascript代码。我正在将正确的值传递给该方法，该方法用于document.getElementById（tabName）.style.display ='block'行（错误所在）。我创建了新的ID元素，并将其传递给了我。我不明白。

有错误的行：document.getElementById（tabName）.style.display ='block'; 在最后。

感谢您的帮助，我有点新手，可能无法完全理解其中的复杂部分。我真的可以使用帮助。

function addTab() {

  //create a new div element
  const newDiv = document.createElement('div');

  //create the id and add tab content class
  newDiv.id = "newtab"; //sets id name for div
  newDiv.classList.add("tablinks"); //sets class for div

  //give tab some text
  const tabContent = document.createTextNode("Testing the add tab button!");
  newDiv.appendChild(tabContent);

  //create the tab
  var btn = document.createElement("button"); //creates button
  btn.className = "tablinks"; //sets class for button

  //give onclick event to button
  var event = Event;
  btn.onclick = openTab(event, 'newtab');
  document.getElementByClassName("tab").appendChild(btn);

  //add the newly created element and its content into the DOM
  const currentDiv = document.getElementById("addnewtab");
  document.body.insertBefore(newDiv, currentDiv);
}

/* RECENT 10-K NOTIFICATION FEED START */
function openTab(evt, tabName) {

  var i, tablinks;
  let tabcontent = document.getElementsByClassName("tabcontent");

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

  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");



  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(tabName).style.display = 'block';
  evt.currentTarget.className += " active";

}

Answer 1

您看到的错误“无法读取null的属性样式”表示它正在尝试访问style返回的元素的document.getElementById(tabName)属性。

如果未找到此元素（返回null），那么您将确切地看到错误消息。

为避免该错误，建议您在访问style属性之前添加类型保护：

let tabEl = document.getElementById(tabName);
if (tabEl) {
  tablEl.style.display = 'block';
}

Answer 2

似乎没有为Tabname赋予ID的元素。尝试移动：

 const currentDiv = document.getElementById("addnewtab");
 document.body.insertBefore(newDiv, currentDiv);

在addTab函数中（在调用openTab之前）

Answer 3

问题在这里：

  //give onclick event to button
  var event = Event;
  btn.onclick = openTab(event, 'newtab');

您正在分配期间立即调用openTab()事件，而不是单击按钮时调用它。 onclick属性的值必须是一个函数。

您也不应该在此处使用全局Event对象作为参数，它应该接收触发onclick的事件。

使用此：

btn.addEventListener("click", function(event) {
    openTab(event, 'newtab');
});

Answer 4

问题在于您尚未呈现要获取的元素

document.getElementById(tabName).style.display = 'block';

您首先要设置onclick事件，然后将元素实际添加到最后一行的dom中

document.body.insertBefore(newDiv, currentDiv);

所以只需将addTab函数更改为

function addTab() {

    //create a new div element
    const newDiv = document.createElement('div');

    //create the id and add tab content class
    newDiv.id = "newtab"; //sets id name for div
    newDiv.classList.add("tablinks"); //sets class for div

    //give tab some text
    const tabContent = document.createTextNode("Testing the add tab button!");
    newDiv.appendChild(tabContent);

    //create the tab
    var btn = document.createElement("button"); //creates button
    btn.className = "tablinks"; //sets class for button

    //give onclick event to button
    var event = Event;

    //add the newly created element and its content into the DOM
    const currentDiv = document.getElementById("addnewtab");
    document.body.insertBefore(newDiv, currentDiv);

    btn.onclick = openTab(event, 'newtab');
    document.getElementByClassName("tab").appendChild(btn);
}

你去了！

为什么我的JavaScript抛出“无法读取null的属性样式”？

4 个答案: