CODEWITHSUNDEEP
javascriptvariablesconsoleundefined
Calvin Su
Calvin Su

Reputation: 13

JavaScript Variable displayed as undefined when it has been assigned a value

// Initialise Variables
	// type: 1 = primary	2 = secondary	3 = refined
var food = {
	name:'food',
	type:1,
	total:0,
	increment:1,
	secondary:'skins',
	secondaryChance:0.1
},
wood = {
	name:'wood',
	type:1,
	total:0,
	increment:1,
	secondary:'herbs',
	secondaryChance:0.1
},
stone = {
	name:'stone',
	type:1,
	total:0,
	increment:1,
	secondary:'ore',
	secondaryChance:0.1
},
skins =  {
	name:'skins',
	type:2,
	total:0,
	refined:'leather',
	increment:1
},
herbs =  {
	name:'herbs',
	type:2,
	total:0,
	refined:'belief',
	increment:1
},
ore =  {
	name:'ore',
	type:2,
	total:0,
	refined:'metal',
	increment:1
},
leather = {
	name:'leather',
	type:3,
	total:0,
	increment:0.5
},
belief = {
	name:'belief',
	type:3,
	total:0,
	increment:0.5
},
metal = {
	name:'metal',
	type:3,
	total:0,
	increment:0.5
}

// Clicker type (who created the resource)
player = 0
gatherer = 0

// Called when primary resource is clicked
	
function primaryResourceClick(resource){
	resource.total += resource.increment;
	console.log(resource + resource.total);
	x = Math.random();
	console.log(x);
	if (resource.name == 'food'){
		document.getElementById("food").innerHTML = food.total;
		if (x < food.secondaryChance) {
			skins += skins.increment;
			document.getElementById("skins").innerHTML = skins.total;
			console.log(skins + skins.total);
		}
	}
	if (resource.name == 'wood') {
		document.getElementById("wood").innerHTML = wood.total;
		if (x < wood.secondaryChance) {
			herbs += herbs.increment;
			document.getElementById("herbs").innerHTML = herbs.total;
			console.log(herbs + herbs.total);
		}
	}
	if (resource.name == 'stone') {
		document.getElementById("stone").innerHTML = stone.total;
		if (x < stone.secondaryChance) {
			ore += ore.increment;
			document.getElementById("ore").innerHTML = ore.total;
			console.log(ore + ore.total)
		}
	}
};
<html>
<head>
		<title>Village</title>
	
		<link rel="stylesheet" type="text/css" href="interface.css" />

		<script language="javascript" src="main.js"></script>
</head>

<body>

<div id="resources">
	<div id="primaryResources">
		<h4>Primary Resources</h4>
		<table id="primaryResourcesDisplay">
			<tr>
				<td><button type="button" onclick="primaryResourceClick(food)">Gather Food</button></td>
				<td>Food:</td>
				<td><span id="food">0</span></td>
			</tr>
			<tr>
				<td><button type="button" onclick="primaryResourceClick(wood)">Cut Wood</button>
				<td>Wood:</td>
				<td><span id="wood">0</span></td>
			</tr>
			<tr>
				<td><button type="button" onclick="primaryResourceClick(stone)">Mine Stone</button>
				<td>Stone:</td>
				<td><span id="stone">0</span></td>
			</tr>
		</table>
	</div>
	<div id="secondaryResources">
		<h4>Secondary Resources</h4>
		<table id="secondaryResourcesDisplay">
			<tr>
				<td>Skins:</td>
				<td><span id="skins">0</span></td>
				
				<td>Leather:</td>
				<td><span id="leather">0</span></td>
			</tr>
			<tr>
				<td>Herbs:</td>
				<td><span id="herbs">0</span></td>
				
				<td>Belief:</td>
				<td><span id="belief">0</span></td>
			</tr>
			<tr>
				<td>Ore:</td>
				<td><span id="ore">0</span></td>
				
				<td>Metal:</td>
				<td><span id="metal">0</span></td>
			</tr>
		</table>
	</div>
</div>

</body>
<html>

Whenever any of the secondary resources is updated, it shows as undefined. I've tried logging some data to the console, the console also shows the variable as undefined. What's even stranger is that the console not showing any errors.

Upvotes: 1

Views: 70

Answers (1)

graemeboy
graemeboy

Reputation: 610

The problem was attempting to increment the object skins by skins.increment, rather that skins.total by skins.increment. More of a typo than anything else. Resolved in comments.

Upvotes: 1

Related Questions