JavaScript创建元素不起作用

时间:2015-12-17 11:39:01

标签: javascript html wordpress

我试图将菜单页面添加到我的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上的这两个隐藏元素用于存储上个季节等。

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

这个js函数没有效果我用chrome检查它。有人知道这个问题吗? 非常感谢

1 个答案:

答案 0 :(得分:2)

首先,你有id dublicate: <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/