I seem to have a problem with objects' properties' scope. I would like to output each of the Message objects' title and message properties to a select element, but it is Not Working! What am I doing incorrectly
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function Message(title, message) {
this.title=title;
this.message=message;
this.getTitle = function(){
return this.title;
};
this.getMessage = function(){
return this.message;
};
}
var messages = new Array(
new Message("First Title", "This is the first message"),
new Message("Second Title", "This is another message")
);
function updateSelect () {
$("#cannedMessages_button").empty();
for (c in messages) {
// First try, with getters and setters
$("#cannedMessages_button").append($('<option>', { value : c.getMessage() , text : c.getTitle() }));
// Second try, directly
$("#cannedMessages_button").append($('<option>', { value : c.message , text : c.title }));
}
}
updateSelect();
});
</script>
</head><body>
<form><select id="cannedMessages_button"></select></form>
</body></html>
I can verify that the foreach is in fact running two iterations, but I cannot get the values out of the objects.
for...inover an array which you should not do, but that is not the problem.cis not the element of the array, but the current property name (index). See the MDN documentation