Create object from a form

Hello, Im trying to make a simple to-do list in plain javascript. The idea is to take user input from a form and make one object out of that, and finally place it in an array whick should collect all objects.
This is my code:

HTML:

<form>
	<div id="todo-input"><input id="name" type="text" placeholder="name" name="name">
		<input  id="location" type="text" placeholder="location" name="location">
		<input id="date" type="text" placeholder="date" name="date">
		<input  id="description" type="text" placeholder="description" name="description">
		<input type="submit" name="">

	</form>

JavaScript

class Todo {
	constructor(name,location, date, description){
		this.name =name,
		this.location = location,
		this.date = date,
		this.description = description
	}
}


list= [];

   var form = document.querySelector("form");
    form.onsubmit = function(){
    	
    	name = document.getElementById("name").value
    	location =  document.getElementById("location").value;
    	date =  document.getElementById("date").value;
    	description = document.getElementById("description").value

    	newTask = new Todo(name, location, date, description)
    	list.push(newTask)
    }

It gives me an error when i try to print out object:

VM88:1 Uncaught ReferenceError: newTask is not defined
at :1:1

I could only guess that this error occurres because object is created in a local scope of function, any other opinions or solutions?

The only thing that I can think of would be to use a class expression instead of a class declaration.

HTH,

^ _ ^

That can be if you print it from where it doesn’t exist. And since there is no print out code to see in the posted example …

1 Like

It works for me in Chrome Console.

Maybe just adding var = new Todo(… ) or adding semicolon at the end of the line, you can skip “newTask is not defined”.

Tryed all of these, and its not working…

You also have to prevent the default action of the submit event, or the page will get reloaded when you click the submit button. Also you should by all means declare your variables, or you’ll get an error right away in strict mode.

This is my code with preventing default action of the form:

HTML :

<form>
	    <input id="name" type="text" placeholder="name" name="name">
		<input id="lokacija"  type="text" placeholder="location" name="lokacija">
		<input id="date" type="text" placeholder="date" name="date">
		<input id="description" type="text" placeholder="description" name="description">
		<input id ="send" type="submit">
		</form>

JavaScript:

class Todo {
	constructor(name,lokacija, date, description){
		this.name =name,
	  this.lokacija = lokacija,
	  this.date = date,
		this.description = description
	}
}


var prevent = function(){
  var form = document.querySelector("form").addEventListener("submit", function(event){

  event.preventDefault();

})
}

prevent();


  var data = document.getElementById("send").addEventListener("click", function(){


    var newTask = new Todo();   
       newTask.name = document.getElementById("name").value ; 
       newTask.lokacija = document.getElementById("lokacija").value;
       newTask.date = document.getElementById("date").value;
       newTask.description = document.getElementById("description").value;   
       alert(newTask.name);

  })

On alert ( newTask.name) it prints out the name, but later on when i try to call object in global scopte it doesnt work.

That’s because the code only runs when the event happens.

1 Like

Ok, i just solved it by preventing default action of form inside of submit button event function.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.