Javascript: function associated with create element not working

Question

I have a select element from createElement which I want to have replaced with a text input element with an onchange event, but my code for it doesn't work. Here's the code (the select element itself is appended to other div elements that are also created):

var countess = 0;
function adadd(){
    var child = document.getElementById("geneadd");
    if (child.value === "add"){
        countess++;
        if (countess < 2) {
            var divi=document.createElement("div");
            divi.name = "diviena";
            divi.id = "divienid";
            divi.class = "table";
            var elemdivi = document.getElementById("fieldsetid");
            elemdivi.appendChild(divi);
        }
        var divii=document.createElement("div");
        divii.name = "divienaa" + countess;
        divii.id = "divienidd" + countess;
        var elemdivii = document.getElementById("divienid");
        elemdivii.appendChild(divii);

        var sell=document.createElement("select");
        sell.id = "den3erw" + countess;
        sell.name = "oute3erw" + countess;
        sell.onchange = "lechangefinal()";
        var har = document.getElementById(divii.id);
        har.appendChild(sell);

        var opt=document.createElement("option");
        opt.id = "disept" + countess/*<?php echo $varia; ?>*/;
        opt.value = "";
        var nar = document.getElementById(sell.id);
        sell.appendChild(opt);
        document.getElementById(opt.id).innerHTML="Select Gene...";

        //...more options in between...

        var opta=document.createElement("option");
            opta.id = "other" + countess/*<?php echo $varia; ?>*/;
            opta.value = "other";
            var nari = document.getElementById(sell.id);
            sell.appendChild(opta);
            document.getElementById(opta.id).innerHTML="other...";
    }
}

And this is the function that I want to be working on the create element:

function lechangefinal(){
    for (var iii = 0; iii <= 100; iii++){
        var childi = document.getElementById("den3erw" + iii);
        if (childi.value === "other"){
            parent.removeChild(childi);
            var inpuat=document.createElement("input");
            inpuat.type = "text";
            inpuat.name = "2";
            var elemi=document.getElementById("divienidd" + iii);
            elemi.appendChild(inpuat);
        }
    }
}

have you checked the console? did you get any errors? what part of it is not working? the remove of the `select` or the addition of the `input`? — Harry, Aug 24 '13 at 09:33
Why are you using such a messy and complicated way of adding elements, why not just make a parent div with createElement, and just set its `innerHTML` to the html you want shown? — Patrick Evans, Aug 24 '13 at 09:34
@Harry it's the remove select that doesn't work but I didn't checked the console yet.. — Earendil, Aug 24 '13 at 09:38

Patrick Evans · Accepted Answer · 2013-08-24T10:21:26.753

JSFiddle demo of below code

For your replacement problem you want replaceChild

var parent = document.querySelector("#parentID");

var inpuat = document.createElement("input");
inpuat.type = "text";
inpuat.name = "2";

var theSelectToReplace = document.querySelector("#den3erw");

parent.replaceChild(inpuat,theSelectToReplace);

You will have to tailor it to your specific needs but that is the basic way of replacing one element with another.

Also a cleaner way of creating a lot of html at once without using a bunch of createElements

All on one line (not very readable)

var parentDiv = document.createElement('div');
parentDiv.innerHTML = '<div class="someclass" id="someid"><select id="myselect"><option value="somevalue">Some value</option><option value="somesecondvalue">Some second value</option></select></div>';

More readable but needs a \ needs to be at the very end, without whitespace or anything else behind it at the end of each line

var parentDiv = document.createElement('div');
parentDiv.innerHTML = '\
   <div class="someclass" id="someid">\
      <select id="myselect">\
         <option value="somevalue">Some value</option>\
         <option value="somesecondvalue">Some second value</option>\
      </select>\
   </div>\
';

Or using concatenation to avoid having to use \ and worrying about wither or not there are white spaces behind it.

var parentDiv = document.createElement('div');
parentDiv.innerHTML = '<div class="someclass" id="someid">'+
      '<select id="myselect">'+
      '<option value="somevalue">Some value</option>'+
      '<option value="somesecondvalue">Some second value</option>'+
      '</select>'+
      '</div>';

Just add in concatenations where needed to set like id's or class names, values etc.

Okay it seems to me that something might be getting lost in the maze of `createElement` so I'll try to cleanup the code, thanks. — Earendil, Aug 24 '13 at 10:25
also take a look at the JSFiddle i have linked at the top of the answer it has code that is commented that you can play with — Patrick Evans, Aug 24 '13 at 10:29
There is a point that I totally forgot to mention while setting the initial question: I want this function for an `` so that whenever I click that button it adds one more select element, which can't be done while using `innerHTML`. — Earendil, Aug 24 '13 at 18:01
`document.querySelector("#someid").onclick = function(e) { };` where `#someid` is the id, or whatever selector you want to use, of the button you want and the code you want executed goes inbetween the { }; But has to be after the `parentDiv` has been added to the DOM. — Patrick Evans, Aug 24 '13 at 18:31
Actually since I had this function on a button that added this bunch of elements each time I click it, it was a mess with the elements Ids, so as you have on fiddle, `var parent = this.parentNode;` and `var theSelectToReplace = this;` solved the problem; `this` did the trick. Thanks alot — Earendil, Aug 26 '13 at 11:39

Javascript: function associated with create element not working

1 Answers1

Linked