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

1 Like

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

1 Like

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 () {
	      initShoppingList();
};

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

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

function handleItemForm(event, formRef) {
	if(event.preventDefault){
		(event.preventDefault());
	}
	 addItemToShoppingList();
	formRef.reset();

	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);

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

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

}

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

}

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.


https://www.youtube.com/results?search_query=debugging+javascript