Dynamically accesing a button and creating a list Javascript

Question

Alright, so I am stuck. So the break down of the project is when you enter your age, and select an option from the drop down list when you click add, a list is created and that input is plugged into the list. I have to also show that list somewhere on the page. I hope I explained that correctly.

Anyways, I've been trying everything from trying to create a new div, to creating an unordered list programmatically, and trying to display it within the body under the last div, but my code below doesn't execute when I hit the add button. By the way I CAN NOT edit the HTML in anyway and I CAN NOT use JQuery. I have to use pure Javascript. Any tips or help would be great!

var form = document.getElementsByTagName("form")[0];
form.method = "POST";
form.action = "form-handler";

var add = document.getElementsByClassName('add');
add.onlick = 'addToList()';


var age = document.getElementsByName("age")[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

var dropDown = document.getElementsByName("rel")[0];
dropDown.type = "option";
dropDown.required = true;

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);

//var title = document.createElement("h2");
//title = "Member List";
//newDiv.appendChild(title);*

var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);


function addToList() {
  var li = document.createElement("li");
  //li.setAttribute('id', age.value + dropDown.value);
  li.appendChild(document.createTextNode(age.value + ' ' + dropDown.value));
  ul.appendChild(li);

  return false;

}

<h1>Household List</h1>
<div class="builder">
  <o class="household"></o>
  <form>
    <div>
      <label>Age
          <input type="text" name="age">
        </label>
    </div>
    <div>
      <label>Relationship
          <select name="rel">
            <option value="">---</option>
            <option value="self">Self</option>
            <option value="spouse">Spouse</option>
            <option value="child">Child</option>
            <option value="parent">Parent</option>
            <option value="grandparent">Grandparent</option>
            <option value="other">Other</option>
          </select>
        </label>
    </div>
    <div>
      <label>Smoker?
          <input type="checkbox" name="smoker">
        </label>
    </div>
    <div>
      <button class="add">add</button>
    </div>
    <div>
      <button type="submit" class="GapViewItemselected">submit</button>
    </div>
  </form>
</div>
<pre class="debug"></pre>

You can’t assign a string as an event handler. Use add.onclick = addToList;, or better, add.addEventListener("click", addToList); — James
– James, Commented Dec 31, 2017 at 4:30

Srikant Sahu · Accepted Answer · 2017-12-31 04:36:20Z

There was some syntactical errors in the code, especially the button click event handler. Here is the correct code.

var form = document.getElementsByTagName("form")[0];
form.method = "POST";
form.action = "form-handler";

var add = document.getElementsByClassName('add');
add[0].onclick = addToList;


var age = document.getElementsByName("age")[0];
age.type = "number";
age.required = true;
age.min = "0";
age.max = "120";

var dropDown = document.getElementsByName("rel")[0];
dropDown.type = "option";
dropDown.required = true;

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);

//var title = document.createElement("h2");
//title = "Member List";
//newDiv.appendChild(title);*

var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);


function addToList() {
  var li = document.createElement("li");
  //li.setAttribute('id', age.value + dropDown.value);
  li.appendChild(document.createTextNode(age.value + ' ' + dropDown.value));
  ul.appendChild(li);

  return false;

}

<h1>Household List</h1>
<div class="builder">
  <ol class="household"></o>
  <form>
    <div>
      <label>Age
          <input type="text" name="age">
        </label>
    </div>
    <div>
      <label>Relationship
          <select name="rel">
            <option value="">---</option>
            <option value="self">Self</option>
            <option value="spouse">Spouse</option>
            <option value="child">Child</option>
            <option value="parent">Parent</option>
            <option value="grandparent">Grandparent</option>
            <option value="other">Other</option>
          </select>
        </label>
    </div>
    <div>
      <label>Smoker?
          <input type="checkbox" name="smoker">
        </label>
    </div>
    <div>
      <button class="add">add</button>
    </div>
    <div>
      <button type="submit" class="GapViewItemselected">submit</button>
    </div>
  </form>
</div>
<pre class="debug"></pre>

brk · Accepted Answer · 2017-12-31 04:39:26Z

There are numerous issues in your code

All the for attributes and input attributes can be defined the html instead of using js
button type default is submit ,so add button type="button" in <button class="add">add</button>
add.onlick = 'addToList()'; is wrong ;the function is not a string , replace it with document.getElementsByClassName('add')[0].onclick = addToList;

var age = document.getElementsByName("age")[0];
var dropDown = document.getElementsByName("rel")[0];

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "houseMem");
document.body.appendChild(newDiv);


var ul = document.createElement("ul");
ul.setAttribute("id", "memList");
newDiv.appendChild(ul);

document.getElementsByClassName('add')[0].onclick = addToList;

function addToList() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(age.value + ' ' + dropDown.value));
  ul.appendChild(li);
  return false;

}

<body>
  <h1>Household List</h1>
  <div class="builder">
    <o class="household"></o>
    <form method="POST" action="form-handler">
      <div>
        <label>Age
          <input type="number" name="age" min="0" max="120">
        </label>
      </div>
      <div>
        <label>Relationship
          <select name="rel" required>
            <option value="">---</option>
            <option value="self">Self</option>
            <option value="spouse">Spouse</option>
            <option value="child">Child</option>
            <option value="parent">Parent</option>
            <option value="grandparent">Grandparent</option>
            <option value="other">Other</option>
          </select>
        </label>
      </div>
      <div>
        <label>Smoker?
          <input type="checkbox" name="smoker">
        </label>
      </div>
      <div>
        <button class="add" type="button">add</button>
      </div>
      <div>
        <button type="submit" class="GapViewItemselected">submit</button>
      </div>
    </form>
  </div>


</body>

Thank you, this helps, but I am unable to make changes to the HTML per project specifications. Could I add a type to the add button such as: add.type = ('button'); ?

Ryan · Accepted Answer · 2017-12-31 04:41:06Z

0

There is a problem with your HTML you have an o tag instead of an order list tag. This may fix the code. Also when you click on the add button the form is posted so I would remove the post until the end.

edited Dec 31, 2017 at 4:41

answered Dec 31, 2017 at 4:28

Ryan

1432 silver badges13 bronze badges

Collectives™ on Stack Overflow

Dynamically accesing a button and creating a list Javascript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related