Errors in JavaScript undefined erros

Errors in JavaScript undefined erros


I am new, new to JavaScript and I have to complete this pre -work section for my coding boot camp I am enrolled in. In order for me not to get dropped form the class I have to complete these projects. I keep running into problems such as, ‘undefined error codes’, I am not sure how to remedy these errors or where even to start.

Another problem, my one of my JavaScript files is not functioning at all no matter what code I use. Is the file damaged, should I delete and start over?
I am new, new. No idea where to start to troubleshoot.


i believe ‘undefined’ usually means you are trying to use a variable with no value assigned to it

you should post your code here in between triple back-ticks like this:

code goes here

so your code is monospaced and easy to read like this

Or if you can, put it in a codepen


Like @camelcamper said,
If you could post your code, it will be easier for us to help you.


OK great! I will take those screenshots and paste them here. Thank u


Instead of screenshot.
You can put your code inside these:

``` your code here```

window.onload = function () {

function initShoppingList() {
	let form = document.getElementById("item-form");

	form.addEventListener("submit", (event) => {
		handleItemForm(event, form);

function handleItemForm(event, formRef) {

	return false;

function addItemToShoppingList(){
	let itemName = document.getElementById("item-name");
	let itemAmount = document.getElementById("item-amount");
	let id = getRandomInt(0, 10000000);

	let itemHtml = createListItemHtml( itemName.value, itemAmount.value, id);
	console.log("Item HTML: ",itemHtml);
	let itemListRef = document.getElementById("shopping-list");
	itemListRef.insertAdjacentHTML("afterend", itemHtml);

function setDeleteButtonEvent(id){
	let deleteButton = document.getElementById("button" + id);
	deleteButton.addEventListener("click",() => {

function createListItemHtml(itemName, itemAmount, id){
	return   `<li id="item${id}">
            ${itemName.value} - ${itemAmount.value}
              <button id="button$[id}" type="button">Delete Item</button>


function removeListItem(id) {
	let listItem = document.getElementById("item"+ id);


function getRandomInt(min, max){
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random()* (max - min)) + min; //maximum
}   ```


Would be nice to see the actual DOM content.

What are itemName.value, itemAmount.value supposed to contain?

If you console.log({itemName}, {itemAmount}) do they contain a value property?

If you console.log(typeof itemName.value, typeof itemAmount.textContent) what do you get?

What is the result of ${itemName.value} - ${itemAmount.value} supposed to be?

Besides logging to the console, i would strongly suggest learning to use the debugger and stepping through code, observing values, logical conditions, the execution flow etc.