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
– Harry, Commented Aug 24, 2013 at 9: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
– Patrick Evans, Commented Aug 24, 2013 at 9:34
@Harry it's the remove select that doesn't work but I didn't checked the console yet.. — Earendil
– Earendil, Commented Aug 24, 2013 at 9:38

Patrick Evans · Accepted Answer · 2013-08-24 10:21:26Z

1

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.

edited Aug 24, 2013 at 10:21

answered Aug 24, 2013 at 9:59

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

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

5 Comments

Earendil Over a year ago

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.

Patrick Evans Over a year ago

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

Earendil Over a year ago

There is a point that I totally forgot to mention while setting the initial question: I want this function for an <input type"button"> so that whenever I click that button it adds one more select element, which can't be done while using innerHTML.

Patrick Evans Over a year ago

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.

Earendil Over a year ago

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

Collectives™ on Stack Overflow

Javascript: function associated with create element not working

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related