JavaScript create element not working

Question

I'm trying to add a menu page to my wordpress site for series script. To easy understand "bolum" means episode and "sezon" means season.

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>

and these 2 hidden elements on my html for storing last season etc.

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

This js function has no effect i'm checking it with chrome.Has anyone know the problem ? Thanks so much

Fix: var last_div=document.getElementById("bolumler-"+(yeni_sezon-1)); — Vixed
– Vixed, Commented Dec 17, 2015 at 11:58

Maxim Mazurok · Accepted Answer · 2015-12-17 12:04:23Z

2

First of all, you have id dublicate: <li id=sezon-active> and <input id=sezon-active>

Also, "bolumler-"+yeni_sezon-1 equals NaN, it should be "bolumler-"+(yeni_sezon-1).

You should rename <a id="sezon" ... to <a id="sezon-1" also to make your code work without errors.

Some more fixes made, here is working code: https://jsfiddle.net/maxim_mazurok/4fj15hav/

edited Dec 17, 2015 at 12:04

answered Dec 17, 2015 at 11:49

Maxim Mazurok

4,2002 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kenarsuleyman Over a year ago

Thanks so much i didn't know that i have to use brackes while making subtraction. I should learn js syntax before coding something :)

Maxim Mazurok Over a year ago

@SüleymanKenar it is because of type conversion in javascript. You wrote that: string+number-number. String+number = string (concantination). But string-number does not make no sense. Glad to help :)

Collectives™ on Stack Overflow

JavaScript create element not working

Javascript

HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Javascript

HTML

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related