List item can't be added using javascript

Question

I checked all the code and there is nothing wrong with it. When I check the "vegetables" radio button, write something in the text field and hit add, it doesn't add the element.

function add() {
  var item;
  item = document.getElementById("item").value;
  if (document.getElementById("1").checked) {
    var li = document.createElement(li);
    text = document.createTextNode(item);
    li.appendChild(text);
    document.getElementById("1v").appendChild(li);
  }
}

<section>
  <h1>Welcome to your shopping List!</h1>
  <h2>Type in the item, choose its type, and hit add !!</h2>
  <div id="blue">
    <form action="">
      <label for="task">I need :</label><br>
      <input type="text" placeholder="Example : Apples" id="item" name="item"><br>
      <br>
      <label for="type">which is :</label><br>
      <div class="">
        <input type="radio" id="1" name="type" value="Vegetables">
        <label for="">Vegetables</label><br>
      </div>
      <br>
      <button id="add" onclick="add()">Add !</button>
</section>
</form>
</div>
<br>
<footer id="white">
  <div>
    <table border="bold">
      <th>Vegetables</th>
      <tbody>
        <tr>
          <td>
            <ol id="1v"></ol>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</footer>

Answer 1

2 quick fixes to your code (personally, I would rewrite the whole thing):

1. add type="button" to the button. It will prevent the button from defaulting to a submit.

2. Syntax error in var li = document.createElement(li);. the li should be in quotes:

var li = document.createElement('li');

Answer 2

You have several problems:

• You are using a form, so when you click the button, the form submits and you leave the page. In your case, you aren't really going to submit data anywhere, so you really don't even need the form element or to specify name attributes for your fields.
• You don't have li in quotes, so you aren't actually creating an <li> element. Without quotes, the system thinks li is a variable, but since you don't have a variable called that, a new Global variable is created with a value of undefined, so your code executes as: document.createElement("undefined"), which does actually create: <undefined></undefined>, but since that isn't an actual HTML element, nothing is rendered for it, except the text you placed inside it (but no numbering):

var li;
let el = document.createElement(li);

console.log(el);

• You are using label incorrectly. A <label> element correlates to a form-field element (i.e. input, select, textarea) as a way to have a "caption" for that element. To use it, you should set its for attribute to the id of the form-field its associated with or you can not use for and just nest the form-field its associated with inside of the label. label is not just for text you want to display.
• Your HTML is not nested properly and you are missing elements.
• Tables should really not be used for anything but displaying tabular data. They should not be used for layout. Since you are creating new ordered list items for each item added, you should not use a table. But, even when you do, you can't just have th. th must be inside of tr, which would then be inside of thead. A footer element is meant to provide "the fine print" content at the end of a section. Producing your list isn't that kind of content and shouldn't be in a footer.

Here's all of that put toghether:

// Get your DOM references just once
const item = document.getElementById("item");
const list = document.getElementById("1v");
const veg = document.getElementById("type");

// Don't use inline HTML event attributes to set up events.
// Do your event binding in JavaScript, not HTML.
document.getElementById("add").addEventListener("click", add);

function add() {
  if (veg.checked) {
    var li = document.createElement("li");  // <-- Need quotes around the element name
    li.textContent = item.value;
    list.appendChild(li);
  }
}

table,th,td { border:1px solid black; }

<section>
  <h1>Welcome to your shopping List!</h1>
  <h2>Type in the item, choose its type, and hit add !!</h2>
  <div id="blue">
      I need : <input type="text" placeholder="Example : Apples" id="item"><br>
      <br>
      which is : <input type="checkbox" id="type" value="Vegetables"> Vegetables
      <div><button id="add">Add !</button></div>
  </div>
</section>
<br>
<footer id="white">
  <div>
    Vegetables
      <ol id="1v"></ol>
  </div>
</footer>