Updating Objects with functions and displaying an Objects Prop names/values

[Arnsenal]

I am having problems with my code. The inline notes may help you figure out what is going on.

 

1. I dont know if my function is actually incrementing the dynamically created tallyTotal properties.

 

2. I dont know how to display the contents of an object with enumeration.

 

If this is confusing make fun of me and let me know, Ill try to clarify, Thanks for any help! 

 

--Edit, Now that I start to read JScript best practices on the sticky in this forum I see that I must use square bracket notation when referring to objects. Ill try this-- Please still help with other errors

 

HTML

 

	        
                         <div style="display: inline-block;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item1">Item1</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item2">Item2</p>
			</div>
		</div>
		<div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item1">Item1</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item3">Item3</p>
			</div>
		</div>
		<div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item1">Item1</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item4">Item4</p>
			</div>
		</div>
		<div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item1">Item1</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item5">Item5</p>
		        </div>
		</div>
	        <div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item2">Item2</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item3">Item3</p>
			</div>
		</div>
		<div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item2">Item2</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item4">Item4</p>
			</div>
		</div>
		<div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item2">Item2</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item5">Item5</p>
			</div>
		</div>
		<div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item3">Item3</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item4">Item4</p>
			</div>
		</div>
	        <div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item3">Item3</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item5">Item5</p>
			</div>
		</div>
		<div style="display: none;" class="comp-contain">
			<div style="display: inline-block;" class="comp1">
				<p id="Item4">Item4</p>
			</div>
			<em>Or </em>
			<div class="comp2">
				<p id="Item5">Item5</p>
			</div>
		</div>

 

 

JavaScript

 

 

 

var tallyTotal = {};//object that a function will push data to.

 

 

 

$('.comp-contain').css("display","none"); // Hide all Divs so each can be displayed singly.

$('#comparisons div:first-child').css("display","inline-block"); //Show first Div whith 2 options to click on, the user clicks on one to proceed.

 

//this next section is suppose to tally the users clicks of a clicked div with the ID of that div being pushed to the tallyTotal object as a property and its value being incremented up. Then I also change the containing div (comp-contain) css display poperty to none, then display the next sibiling div, which the previous process is repeated until the list of comparisons is done.

 

$('.comp1,.comp2').click(function(tallyTotal){

var ID = $(this).attr('id');

tallyTotal.ID+=1; //Im guessing this is wrong, how do I do this?

$(this).parent().css("display","none");

$(this).parent().next().css("display","inline-block");

});

 

$(".comp-contain:last").click(function(e){

$('#totals').css("display","inline-block");

function display_tally_total() {

var x;

for (x in tallyTotal) {

$('#totals').append('<p>' + x + ' ' + tallyTotal.x + '</p>'); // Also wrong? Trying to Enumerate through the tallyTotal Object, dispaying the property name and its value

}

}

display_tally_total();

});

[haku]

A few things:

 

--Edit, Now that I start to read JScript best practices on the sticky in this forum I see that I must use square bracket notation when referring to objects.

 

Not exactly. Square brackets in JavaScript refer to arrays, though what makes it really confusing is that arrays and objects are mostly the same thing, and can almost always be used interchangabley in JS. The best way to go about it is to use an array for a list of similar objects, and an object for something that needs named elements.

 

Next: Can you tell us what you are trying to do, and how it is not working?

 

Last: Please use code tags around your code, it makes it much easier to read.

 

 

[Arnsenal]

Hi Haku

 

Thanks for the reply. After hours of trying to debug last night I realized that my code is shot all to hell.

 

For example, Im trying to pass jquery objects into a for in statement and I dont know whats going on with the scope of my tallyTotal object. Im trying to combine Jquery selectors and standard JavaScript functions together and its not working out.

 

I have read, in (Java Script: The good Parts) that I should not use and array vs an "array like object" when using strings for the index of the array. Do you argue otherwise?

 

Anyway, Ill get back to this thread tonight and try to clearly explain what Im trying to do.

 

Also if you got a link to a personal sight where you accept donations I would be willing to donate.

 

Thanks, Jerry

[haku]

I have read, in (Java Script: The good Parts) that I should not use and array vs an "array like object" when using strings for the index of the array. Do you argue otherwise?

 

If you are using keys for the index (ie - you are setting the key), then you should use an object. If you are pushing a number of elements into an element, resulting in keys that ascend in value, then you should use an array.

 

Example of good use (note - square brackets denote an array, parenthesis denote an object) :

var myArray = ["Tom", "Dick", "Larry"];
var user1 = {};
user1.name = "Tom";
var user2 = {};
user2.name = "Dick";
var user3 = {};
user3.name = "Jerry";

 

Example of bad use:

var user1 = [];
user1["name"] = "Tom";
var user2 = [];
user2["name"] = "Dick";
var user3 = [];
user3["name"] = "Jerry";

 

Hopefully this makes things a little clearer.

 

Also if you got a link to a personal sight where you accept donations I would be willing to donate.

Thanks for the thought, but I am happy to help for free. I only charge money to clients!

[Arnsenal]

Thanks Haku I think i understand the syntax of objects now.

 

I have one other question about objects and then I will ask series of questions one at a time so that I can break my problem down into easy to handle chunks.

 

1.  How do I use a variable for the property name when creating a new property for an Object:

Does this work?

 

Var someText = "some text";

var tallyTotal = {};

tallyTotal.someText = 1;

 

2. How do I create a new property for an object and increment its value using Jquery?

 

$('.comp1 p,.comp2 p').click(function(){
var someText = this.getAttribute("id",2);
tallyTotal.someText=Number();
tallyTotal.someText++;
});

 

[Arnsenal]

I figured everything out HaKu, thanks for your help!

 

The main issue was resolved with using return statements (returning functions) from within a function that was nested in a j Query Chain.

 

It allowed me to take string data from the dom make it a property name of an Object and increment the value of that property.

 

 

Here is the final code that works if your interested.

 

var arrayIndex = new Array();
var tallyTotal = {};//object that a funtion will push data to.
var totalCompares = $('.comp-contain').size();


$('.comp-contain').css("display","none"); // Hide all Divs so each can be displayed singly.
$('#comparisons div:first-child').css("display","inline-block"); //Show first Div whith 2 options to click on, the user clicks on one to proceed.


function tallysTheTotals (obj,idIndex){

if (obj.hasOwnProperty(idIndex)){
	obj[idIndex]++;
}

else {
	obj[idIndex]=1;
}
}

$('.comp1 p,.comp2 p').click(function(){
var idIndex = this.getAttribute("id",2);
$(this).parent().parent().css("display","none");
$(this).parent().parent().next().css("display","inline-block");
return tallysTheTotals(tallyTotal,idIndex);
});


function display_tally_total(tallyTotal) {
	for (var x in tallyTotal) {
		$('#totals').append('<p>'+ x +':' + tallyTotal[x]+ '</p>'); //enumerate through the tallyTotal Object, dispaying the property name and its value
	}
	$('#featured-content h1').html('The highest score is your highest priority');
}

$(".comp-contain:last").click(function(){
$('#totals').css("display","inline-block");

return display_tally_total(tallyTotal);

});

[haku]

I know I'm late with this, sorry I haven't logged in recently, too busy. I'll answer the questions that you asked:

 

1.  How do I use a variable for the property name when creating a new property for an Object:

Does this work?

 

Var someText = "some text";

var tallyTotal = {};

tallyTotal.someText = 1;

Close! You would do this:

 

Var someText = "some text";

var tallyTotal = {};

tallyTotal[someText] = 1;

I know this is counter intuitive given my last post, but in this case, using square brackets allows for variables to be used to set object properties.

 

2. How do I create a new property for an object and increment its value using Jquery?

 

$('.comp1 p,.comp2 p').click(function(){
var someText = this.getAttribute("id",2);
tallyTotal.someText=Number();
tallyTotal.someText++;
});

$('.comp1 p,.comp2 p').click(function(){
var someText = this.getAttribute("id",2);
if(!tallyTotal[someText])
{
	tallyTotal[someText] = 0;
}
tallyTotal[someText]++;
});