HTML/Javascript Forms Checkbox Value Not Displaying

Question

Pretty Straight forward problem.

When the user hits the "add" button and the checkmark is checked I would like the value to say "Smoker" in the class="household".

When the checkmark is not checked I would like the value to say "Non-smoker"

Currently, my "if else" statement isn't firing. Been looking everywhere to fix this. Can anyone help?

Side Note: No jQuery, Cannot edit the HTML. Only Pure Javascript.

HTML

<ol class="household"></ol>
    <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">submit</button>
        </div>
    </form>

JS

 function validate(form) {

        fail = validateAge(form.age.value)
        fail += validateRel(form.rel.value)

        if (fail == "") return true
        else {
            alert(fail);
            return false
        }
    }

    function validateAge(field) {
        if (isNaN(field)) return "No age was entered. \n"
        else if (field < 1 || field > 200)
            return "Age must be greater than 0. \n"
        return ""
    }

    function validateRel(field) {
        if (field == "") return "Please select a relationship \n"
        return ""

    }


    document.querySelector("form").onsubmit = function() {
        return validate(this)

    }



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


    }


    count = 0;

    function createinput() {
        field_area = document.querySelector('.household')
        var li = document.createElement("li");
        var p1 = document.createElement("p");
        var p2 = document.createElement("p");
        var p3 = document.createElement("p");
        var x = document.getElementsByName("age")[0].value;
        var y = document.getElementsByName("rel")[0].value;
        var z = document.getElementsByName("smoker")[0].value.checked;


        if( z === undefined) {
            return ("Non smoker \n")

        }
        else {
           return ("Smoker \n")

        }


        p1.innerHTML = x;
        p2.innerHTML = y;
        p3.innerHTML = z;
        li.appendChild(p1);
        li.appendChild(p2);
        li.appendChild(p3);
        field_area.appendChild(li);
        //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++
    }

Answer 1

The first problem is you are not getting the checkbox status right way. It should be document.getElementsByName("smoker")[0].checked instead of document.getElementsByName("smoker")[0].value.checked.

The second problem is you used return in if else. If you use return then the following codes of the function will not execute.

Change

var z = document.getElementsByName("smoker")[0].value.checked;

if( z === undefined) {
    return ("Non smoker \n")
}
else {
    return ("Smoker \n")
}

to

var z = document.getElementsByName("smoker")[0].checked;

if (!z) {
    z = "Non smoker \n";
} else {
    z = "Smoker \n";
}

Answer 2

Because you have only one "household" element you can add the following handler:

document.querySelectorAll('[name="smoker"]')[0].onclick = function() {
 document.getElementsByClassName('household')[0].textContent = 
                  this.checked ? 'Smoker' : 'Non-smoker';

}

The example:

function validate(form) {

  fail = validateAge(form.age.value)
  fail += validateRel(form.rel.value)

  if (fail == "") return true
  else {
    alert(fail);
    return false
  }
}

function validateAge(field) {
  if (isNaN(field)) return "No age was entered. \n"
  else if (field < 1 || field > 200)
    return "Age must be greater than 0. \n"
    return ""
}

function validateRel(field) {
  if (field == "") return "Please select a relationship \n"
  return ""

}


count = 0;

function createinput() {
  field_area = document.querySelector('.household')
  var li = document.createElement("li");
  var p1 = document.createElement("p");
  var p2 = document.createElement("p");
  var p3 = document.createElement("p");
  var x = document.getElementsByName("age")[0].value;
  var y = document.getElementsByName("rel")[0].value;
  var z = document.getElementsByName("smoker")[0].checked;


  if( !z ) {
    z =  "Non smoker";

  }
  else {
    z = "Smoker";

  }


  p1.innerHTML = x;
  p2.innerHTML = y;
  p3.innerHTML = z;
  li.appendChild(p1);
  li.appendChild(p2);
  li.appendChild(p3);
  field_area.appendChild(li);
  //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++
}

document.querySelector("form").onsubmit = function() {
  return validate(this)

}



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


}

document.querySelectorAll('[name="smoker"]')[0].onclick = function() {
  document.getElementsByClassName('household')[0].textContent = this.checked ? 'Smoker' : 'Non-smoker'
}

<ol class="household"></ol>
<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">submit</button>
    </div>
</form>