How do I add a div onclick in javascript?

Question

I am making a grocery cart list, where you can add groceries onto the website and it adds all of the prices together. But the problem is, I dont know how to add an item onclick. Here is the link to the site: https://aaryank.codewizardshq.com/GroceryCart/index.html

Here is my html:

<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="page" id="page">
  <title> Your Grocery Cart </title>
  <header>
    <h1> Your Grocery Cart </h1>
  </header>
  <span> <u> Your Items </u> </span>
  <br><br>
  <div class="item" id="item">
  <u><span id="itemSpan"> Item #<span id="itemNumber"></span></span></u>
  <br>
  </div>
  <input type="text" id="itemName"><span>, $<input id="priceInput"></span>
  <br><br>
  <button onclick="addItem()"> + Add an Item + </button>
  <br><br><br><br>
  <span> <u> Total Amount ($) </u> </span>
  <br><br>
  <input type="text" id="outputBox" name="outputBoxName" disabled="disabled">
  <br>
</div>
<script type = "text/javascript" src = "js.js"></script>

I don't have any javascript, just "function addItem(){}".

Answer 1

I suppose what you are looking for is how to create a new DOM element, a DIV in this case, and how to add it somewhere in the DOM, programmatically.

Generally speaking, you first create an element

// Create a new div
var new element = document.createElement("div");

// Set its content to something meaningful
element.innerHTML = "Hi I am new"

then, you need to append this new element as a child of some other element, its "container" so to say. Let's add it to that middle div which you named "page".

// Get a container for your new div
var container = document.getElementById("page");

// Add your new div to the container
container.appendChild(element);

Answer 2

There are two common ways to add a javascript click handler in web development.

The first way is to attach it in the HTML, via an onclick attribute:

<div id="myDiv" onclick="alert('hello, world');">Contents of Div</div>

The second way is to attach it from JavaScript. In script, you will need to have a handle on the DIV element; you can use functions like document.getElementById or document.querySelector to do this. The former takes as its parameter a string which is an element id; the latter takes a CSS-style selector.

Either of these will get a handle to the DIV above:

var myDiv = document.getElementById("myDiv");
var myDiv = document.querySelector("#myDiv");

Once you have the handle, you can use its addEventListener method trigger your function when the event is emitted.

function myFunction() {
  console.log('hello, world');
}
myDiv.addEventListener("click", myFunction);