0

It shouldn't be this difficult to show a list of HTML inputs of check-boxes using javascript in a div that i want. what am i missing here.s my list and code. 

var kitchen_work = [
      " Wipe down baseboards",
      " Wipe exterior of cabinets",
      " polish stainless steel appliances",
      " polish microwave interior",
      " clean oven exterior",
      " clean garbage disposal",
      " clean sink fixtures/ drains",
      " sink fixtures/drains",
      " sweep-mop all floors",
      " de-grease any appliances" ];

function show_kitchen() {
  max = kitchen_work.length;
  var x = [];
  var t = [];
  var div = document.createElement("div");
  for (var i=0; i < max; i++) {
    x[i] = document.createElement("input");
    t[i] = document.createTextNode(kitchen_work[i])
    x[i].setAttribute("type", "checkbox")
    x[i].appendChild(t[i])
    console.log(x[i]);
    div.appendChild(x[i]);
  }
  document.getElementsByClassName("left-side").appendChild(div);
  p = document.getElementsByClassName("left-side");
  p.appendChild(div)
  document.getElementsByClassName(left-side).appendChild(div);
  }
<div class="middle-side">

   <button type="button" id="kitchenroom" onclick="show_kitchen()">   kitchen </button>
 </div>

The output I want is printing in the console but wont show inside my Div. although I can use (document.body.appendChild(x)) and it inserts my check-boxes in the bottom of the page but I need it inside a div. I need to be able to replace it with another button of (ex: living room) and show another list.

I could have gone about it the wrong way. Any help's appreciated.

Luis felipe De jesus Munoz
  • 7,454
  • 2
  • 33
  • 53
blaise johnny
  • 13
  • 7
  • if the question's been answered i wouldn't mind being shown where. – blaise johnny Jun 14 '18 at 18:13
  • your last `document.getElementsByClassName(left-side)` should put `left-side` between quotation marks. Also, you're trying to get left-side, but only included the middle-side element in your example. – Jeff Noel Jun 14 '18 at 18:13
  • 1
    let me have a look. – blaise johnny Jun 14 '18 at 18:15
  • The `getElementsByClassName()` function returns an HTMLCollection object (treat it as an array element). To access your HTML element, you need to specify it this way: `document.getElementsByClassName("left-side")[0].appendChild(div);` (notice the `[0]` part). Then it should all be working. Here is a [**demo I made quickly**](http://jsfiddle.net/esjp8kmz/3/). Checkbox inputs need label elements for text to be showing correctly... just FYI ! – Jeff Noel Jun 14 '18 at 18:21
  • okay. so if you look at this photo. the jist of the manipulation is to simply click a button from the Center options. and the left will display a list of what's available with a check-box on each of the items in the list. https://imgur.com/a/f4plya7 . – blaise johnny Jun 14 '18 at 18:24
  • 1
    Yes, you got it to show up. Also you're right i do need to show text alongside the check-boxes – blaise johnny Jun 14 '18 at 18:34
  • i'd like to know what that [0] does. to my knowledge it seems like it treats the body as a list container, and thus, asking it to find a class name, one needs to specify the n'th they want of that class name. :thinking: BTW thank you. – blaise johnny Jun 14 '18 at 18:44
  • The function `getElementsByClassName()` returns an HTMLCollection object (array) of elements (read more about it [**here**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) and [**here**](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). Even if there is only one element in it, it's still an array. So to access the DOM Object you're looking for, you need to use the `[0]` – Jeff Noel Jun 15 '18 at 13:18

0 Answers0