Get innerHtml of an created element by Javascript

Question

I created an element by

a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);

and when i try to get innerHtml of the Class select-selected it returns "undefined"

The goal is to switch between Select Option depending the first Choice.

Here's the code on CodeOpen

Thanks to the community of StackOverflow.

score 0 · Answer 1 · answered Aug 08 '19 at 13:09

The problem is from your method firstChoice

function firstChoice() {
  var y = document.getElementById("categoryChosen");
  var z = document.getElementsByClassName("select-selected");
  y.style.background = "green";
  y.innerHTML = z.innerHTML;
}

getElementsByClassName returns a list (hence the plural at "Elements"). And since Arrays (or NodeLists, to be more precise) have no innerHTML property, z.innerHTML is undefined.

score -1 · Answer 2 · answered Aug 08 '19 at 13:11

I suppose the problem lies in var z = document.getElementsByClassName("select-selected"), in your codepen:

function firstChoice() {
  var y =       document.getElementById("categoryChosen");
  var z =document.getElementsByClassName("select-selected");
  y.style.background = "green";
  y.innerHTML = z.innerHTML; // <- here's the problem
}

getElementsByClassName does not return an Element, it returns a NodeList, from where you have to get the first item to do what you try to do:

var z =document.getElementsByClassName("select-selected")[0]; // <- the [0]

Get innerHtml of an created element by Javascript

2 Answers2