Javascript onClick doesn't work with button

Question

Pretty Straight forward. My button is not creating the input I need after the click event. I need the fields populated where the class "household" is. I cannot edit HTML only Javascript. Any ideas?

HTML:

        <ol class="household"></ol>
        <div>
            <button class="add">add</button>
        </div>

JS:

    document.getElementsByClassName("add").onclick = function() {
        createinput()
    };

    count = 0;
    function createinput() {
        field_area = document.getElementsByClassName('household')
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = 'field' + count;
        input.name = 'field' + count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
        //create the removal link
        var removalLink = document.createElement('a');
        removalLink.onclick = function() {
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
        var removalText = document.createTextNode('Remove Field');
        removalLink.appendChild(removalText);
        li.appendChild(removalLink);
        count++
    }

Is your JS being loaded after the body? If you're trying to add the listener before the element is created it won't be called. This is why jQuery uses $(document).ready. — damian, Dec 30 '16 at 18:45
Where do you write js code? Js code executes in order of loading scripts. Your should find button when it exist in DOM. — viktarpunko, Dec 30 '16 at 18:46
To expand more on my earlier comment... http://stackoverflow.com/a/34896387/1496080 should help you out — damian, Dec 30 '16 at 18:46
In this exercise I have to write the JS code before the closing body tag. — spidey677, Dec 30 '16 at 18:47
`field_area.appendChild(li) ` also change it to `field_area[0].appendChild(li)` — Ember Freak, Dec 30 '16 at 18:50

Deep · Accepted Answer · 2016-12-30T18:59:54.910

document.getElementsByClassName gives you object of all child elements which have all of the given class names . You will have to attach the event on each element by iterating over the array or by using index.

Here you can use document.querySelector for your example which returns the first Element matching with the selector.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

document.querySelector(".add").onclick = function() {
  createinput()
};

count = 0;

function createinput() {
  field_area = document.querySelector('.household')
  var li = document.createElement("li");
  var input = document.createElement("input");
  input.id = 'field' + count;
  input.name = 'field' + count;
  input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
  li.appendChild(input);
  field_area.appendChild(li);
  //create the removal link
  var removalLink = document.createElement('a');
  removalLink.onclick = function() {
    this.parentNode.parentNode.removeChild(this.parentNode)
  }
  var removalText = document.createTextNode('Remove Field');
  removalLink.appendChild(removalText);
  li.appendChild(removalLink);
  count++
}

<ol class="household"></ol>
<div>
  <button class="add">add</button>
</div>

Solved my problem thanks everyone! – spidey677 Dec 30 '16 at 18:58 — spidey677, Dec 30 '16 at 18:58

score 0 · Answer 2 · answered Dec 30 '16 at 18:48

It should be document.getElementsByClassName("add")[0].onclick As Document.getElementsByClassName():

Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

document.getElementsByClassName("add")[0].onclick = function() {
        createinput()
    };

    count = 0;
    function createinput() {

        field_area = document.getElementsByClassName('household')
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = 'field' + count;
        input.name = 'field' + count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
        //create the removal link
        var removalLink = document.createElement('a');
        removalLink.onclick = function() {
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
        var removalText = document.createTextNode('Remove Field');
        removalLink.appendChild(removalText);
        li.appendChild(removalLink);
        count++
    }

<div>
            <button class="add">add</button>
        </div>

score 0 · Answer 3 · edited May 23 '17 at 12:24

x.getElementsByClassName()

getElementByClassName returns a collection.

x.onclick

onclick is meant for single elements and cannot be directly applied to a collection. Thats why your code is not working.

If you wanted to use a collection then a loop would work as suggested by one of the other answers.

I would have a think about the approach you want to take see this answer on .getElementsByClassName().

Javascript onClick doesn't work with button

3 Answers3