JavaScript 创建元素不起作用

Question

我正在尝试向我的 WordPress 网站添加一个菜单页面以获取系列脚本。为了便于理解，“bolum”表示剧集，“sezon”表示季节。

Javascript

function addSeason() {
  var main_div = document.getElementById("taxonamy-category");
  var helper_son = document.getElementById("sezon-son");
  var helper_active = document.getElementById("sezon-active");
  var last_active = document.getElementById("sezon-" + helper_active.getAttribute("value"));
  var ul = document.getElementById("sezon-tabs");
  var yeni_sezon = parseInt(helper_son.getAttribute("value"), 10) + 1;
  var li = document.createElement("li");
  var a = document.createElement("a");
  var last_div = document.getElementById("bolumler-" + yeni_sezon - 1);
  var div = document.createElement("div");
  var a2 = document.createElement("a");

  a2.appendChild(document.createTextNode("  +   Yeni Bölüm Ekle"));
  a2.setAttribute("id", "bolum-add");
  a2.setAttribute("onclick", "return addBolum();");
  a2.setAttribute("class", "taxonamy-add-new");
  div.setAttribute("id", "bolumler-" + yeni_sezon);
  div.setAttribute("class", "tabs-panel");
  div.setAttribute("style", "display:block;");
  last_div.setAttribute("style", "display:none;");
  div.appendChild(a2);
  main_div.appendChild(div);
  a.appendChild(document.createTextNode("Sezon " + yeni_sezon));
  a.setAttribute("href", "#sezon-" + yeni_sezon);
  a.setAttribute("id", "sezon");
  a.setAttribute("onclick", "return focusSeason();");
  li.setAttribute("id", "sezon-" + yeni_sezon);
  li.setAttribute("class", "tabs");
  li.appendChild(a);
  ul.appendChild(li);
  last_active.removeAttribute("class");
  helper_active.setAttribute("value", yeni_sezon);
  helper_son.setAttribute("value", yeni_sezon);
}

HTML

<div id="bolumler" class="postbox">
  <h2 class="hndle ui-sortable-handle"><span>Bölümler</span></h2>
  <div class="inside">
    <div id="taxonamy-category" class="categorydiv">
      <ul id="sezon-tabs" class="category-tabs">
        <li class="tabs" id="sezon-1">
          <a id="sezon" onclick="return focusSeason();" href="#sezon-1">Sezon 1</a>
        </li>
      </ul>
      <div id="bolumler-1" class="tabs-panel" style="display:block;">
        <a id="bolum-add" class="taxonamy-add-new" onclick="return addBolum();">    +   Yeni Bölüm Ekle</a>
      </div>
      <div id="category-adder">
        <input type="button" name="add-sez" id="add-sez" class="button button-primary button-large" value="Sezon Ekle" onclick="addSeason()" />
      </div>
    </div>
  </div>
</div>

以及我的 html 上的这 2 个隐藏元素，用于存储上一季等。

<input type="hidden" name="sezon-son" id="sezon-son" value="1" />
<input type="hidden" name="sezon-active" id="sezon-active" value="1" />

这个js函数没有任何效果，我正在用chrome检查它。有人知道这个问题吗？非常感谢

Answer 1

首先，您的 id 重复: <li id=sezon-active>和<input id=sezon-active>

此外，"bolumler-"+yeni_sezon-1等于 NaN，应该是 "bolumler-"+(yeni_sezon-1) .

您应该重命名<a id="sezon" ...至<a id="sezon-1"还可以使您的代码正常运行。

还进行了一些修复，这是工作代码: https://jsfiddle.net/maxim_mazurok/4fj15hav/