object object error? Javascript

Magic

Magic

Posting Freak
Oct 11, 2012
1,026
196
So I am trying to make a simple reminder program in JavaScript and instead of writing the put in reminder it prints [object Object]

HTML: 
<HTML>
<HEAD>
<TITLE>
Reminder script
</TITLE>

<script language="Javascript">
var str;

function createReminder() {
    var r1 = prompt("Add a reminder");
    return r1;
    }
   
function addReminder(){
str = new createReminder();
}

function showReminder() {
    document.write(str+"<br>");
    }
   
</script>

<input type="button" value="Add reminders" onclick="addReminder();">
<input type="button" value="Show reminders" onclick="showReminder();">


</HEAD>
<BODY>

</BODY>
</HTML>

Thanks in advance <3x
 
Sort by date Sort by votes
Heaplink

Heaplink

Developer & Designer
Nov 9, 2011
510
173
Don't use document.write - it's bad, slow and really stupid. If you wan't to do DOM manipulation the easiest thing to do is using jQuery.

Now for your problem: You cannot write out JavaScript objects, arrays and like to the DOM. The DOM doesn't understand that kind of stuff. If you wan't to see what is in the object use console.log (or console.dir) and look in the Developer Tools of your browser to see output.

If you wan't to output to the DOM (page) you have to iterate the list of items, that being an array. So for instance you wan't your list of items to look something like this:

Code: 
[
{
    "text": "My new reminder",
    "date": "<maybe some date here as string>"
}
]

This is an array with an object. You can add multiple objects to this array and iterate with either for-loop or forEach function:

Code: 
myArray.forEach(function(reminder) {
    // output e.g. reminder.text and reminder.date
    // or do DOM manipulation.
});

or a simple faster for loop that is browser compatible:

Code: 
for(var i = 0, l = myArray.length; i < l; ++i) {
var reminder = myArray[i];
// DOM Manipulation
}
 
Upvote 0 Downvote
Magic

Magic

Posting Freak
Oct 11, 2012
1,026
196
Heaplink said:
Don't use document.write - it's bad, slow and really stupid. If you wan't to do DOM manipulation the easiest thing to do is using jQuery.

Now for your problem: You cannot write out JavaScript objects, arrays and like to the DOM. The DOM doesn't understand that kind of stuff. If you wan't to see what is in the object use console.log (or console.dir) and look in the Developer Tools of your browser to see output.

If you wan't to output to the DOM (page) you have to iterate the list of items, that being an array. So for instance you wan't your list of items to look something like this:

Code: 
[
{
    "text": "My new reminder",
    "date": "<maybe some date here as string>"
}
]

This is an array with an object. You can add multiple objects to this array and iterate with either for-loop or forEach function:

Code: 
myArray.forEach(function(reminder) {
    // output e.g. reminder.text and reminder.date
    // or do DOM manipulation.
});

or a simple faster for loop that is browser compatible:

Code: 
for(var i = 0, l = myArray.length; i < l; ++i) {
var reminder = myArray[i];
// DOM Manipulation
}
Click to expand...
But the reminder needs to show up as a list for the person to read, It might be a stupid program but I need it for school. This would just print it to the log?
 
Upvote 0 Downvote
Heaplink

Heaplink

Developer & Designer
Nov 9, 2011
510
173
Use console.log to DEBUG your output. If you wan't to output it to the DOM (the HTML page) you'll need to iterator using a for-loop. I gave you the answer above.

And by the way. Put your HTML and script tag in the <body> tag. The script should be the last in <body> tag.
 
Last edited by a moderator:
Upvote 0 Downvote
Magic

Magic

Posting Freak
Oct 11, 2012
1,026
196
Heaplink said:
Use console.log to DEBUG your output. If you wan't to output it to the DOM (the HTML page) you'll need to iterator using a for-loop. I gave you the answer above.
Click to expand...
Sorry, I'm super noob at JS. Just learning at the moment. Thanks for your reply. I will have another look at it when I get home. I am at school atm.

I'm still stuck on this. I don't know what to do with the code you gave me :l
 
Last edited by a moderator:
Upvote 0 Downvote
Adil

Adil

DevBest CEO
May 28, 2011
1,278
716
Code: 
function Reminder() {
}

Reminder.prototype.addReminder = function() {
  this.reminder_data = prompt('What is your reminder?');
}

var r = new Reminder();
r.addReminder();
console.log(r.reminder_data);
This should work.
It creates a reminder class, adds the method 'addReminder' to the prototype chain, and sets an instance variable.
I suggest watching Douglas Crockford's JavaScript talks, and reading through mdn.
:)
 
Upvote 0 Downvote
Magic

Magic

Posting Freak
Oct 11, 2012
1,026
196
Adil said:
Code: 
function Reminder() {
}

Reminder.prototype.addReminder = function() {
  this.reminder_data = prompt('What is your reminder?');
}

var r = new Reminder();
r.addReminder();
console.log(r.reminder_data);
This should work.
It creates a reminder class, adds the method 'addReminder' to the prototype chain, and sets an instance variable.
I suggest watching Douglas Crockford's JavaScript talks, and reading through mdn.
:)
Click to expand...
Thanks bro, Me and the teacher figured it out eventually. I can post how he did it?
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top