Skip to main content
WolfShade
WolfShade
Legend
February 19, 2020
Question

JS struct and id issue

  • February 19, 2020
  • 2 replies
  • 930 views

Hello, all,

 

I am trying to increase my understanding of JavaScript structs (commonly referred to as 'associative array').

 

I did a Google search and found an example creating an object called "Gimli".  Now structs can contain strings, integers, or even functions.  But if you reference a function, you need to append () to the function name.

 

Just playing around, trying to learn, I've got the following, but the last button is not working, even though I use () in the id attribute.

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gimli test</title>
	<script src="jquery-1.11.3.js"></script>
	<script>
		var Gimli = {
			name: "Gimli",
			race: "Dwarf",
			weapon: "axe",
			age: "139",
			greet: function(){return 'Hi, my name is $(this.name)!';}
			}
	</script>
</head>

<body>
	<div id='displayThis'>&nbsp;</div>
	<div id='chooseThis'>
		<button id="name">Name</button>
		<button id="race">Race</button>
		<button id="weapon">Weapon</button>
		<button id="age">Age</button>
		<button id="greet()">Greet</button>
	</div>
	<script>
		$('button').on('click',function(){
			switch(Gimli.hasOwnProperty(this.id)){
				case true:
					alert(Gimli[""+this.id]);
				break;
				default:
					alert('Aint happening');
				break;
				}
			});
	</script>
</body>
</html>

 

Any insight appreciated.

 

V/r,

 

^ _ ^

This topic has been closed for replies.

2 replies

WolfShade
WolfShadeAuthor
Legend
February 19, 2020

So, I did some research, and according to what I found on Google, W3 standards indicate that an id attribute value can contain letters, numbers, underscore _, hyphen -, and period ..  So, I changed all button id's to title, which will allow anything, I think, and it still isn't working.  The function is passing the () of greet, indicating that it should execute a function instead of just returning what's there, and it still comes back as 'undefined'.

 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Gimli test</title>
	<script src="jquery-1.11.3.js"></script>
	<script>
		var Gimli = {
			name: "Gimli",
			race: "Dwarf",
			weapon: "axe",
			age: "139",
			greet: function(){return 'Hi, my name is ' + this.name + '!';}
			}
	</script>
</head>

<body>
	<div id='displayThis'>&nbsp;</div>
	<div id='chooseThis'>
		<button title="name">Name</button>
		<button title="race">Race</button>
		<button title="weapon">Weapon</button>
		<button title="age">Age</button>
		<button title="greet()">Greet</button>
	</div>
	<script>
		$('button').on('click',function(){
			var txt = this.innerText || this.textContent;
			switch(Gimli.hasOwnProperty(this.title)){
				case true:
					$('#displayThis').html(txt + ": " + Gimli[""+this.title]);
				break;
				default:
					$('#displayThis').html('&nbsp;'); alert('Ain\'t happening.');
				break;
				}
			});
	</script>
</body>
</html>

 

V/r,

 

^ _ ^

O
osgood_
Legend
February 19, 2020

Why do you think this will work - 'greet()' when the script is looking for 'greet' similar as its looking for 'name', 'race', 'weapon' etc - 'greet' in the object array is not a function.

 

You have to call that function:

Gimli.greet()

 

At its very simplest:

<script>
var Gimli = {
name: "Gimli",
race: "Dwarf",
weapon: "axe",
age: "139",
greet: function(){return 'Hi, my name is ' + this.name + '!';}
}
alert(Gimli.greet())
</script>

 

 

otherwise you get the 'string'.

 

alert(Gimli.greet)

WolfShade
WolfShadeAuthor
Legend
February 19, 2020

Yes, but I am not comprehending why Gimli['greet()'] is not the same as:

this.title = 'greet()';

alert(Gimli[this.title]);

 

Because this.title _is_ 'greet()'. What changed?

 

V/r,

 

^ _ ^

O
osgood_
Legend
February 19, 2020

Why dont you just add a 'false' switch:

 

<script>
$('button').on('click',function(){
switch(Gimli.hasOwnProperty(this.id)){
case true:
alert(Gimli[""+this.id]);
break;
case false:
alert(Gimli.greet());
break;
default:
alert('Aint happening');
break;
}
});
</script>

 

And change 'greet:" to:

 

greet: function(){return 'Hi, my name is ' + this.name;}

WolfShade
WolfShadeAuthor
Legend
February 19, 2020

"greet: function(){return 'Hi, my name is ' + this.name;}"

 

This last part I wound up doing.  Not sure why the example I was drawing from used $(this.name) inside the string, but it never worked, for me.

 

As far as including a false case, yeah, I could.. but it wouldn't explain to me why alert(Gimli['greet']) works, but when setting this.name to 'greet()' it doesn't.  It _should_ work.  But even setting attributes for title and alt, it doesn't execute the function and instead returns 'undefined'.  SMH..

 

V/r,

 

^ _ ^

O
osgood_
Legend
February 19, 2020

You could tidy it up a bit and use vanilla javascript -

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gimli test</title>
<script>
var Gimli = {
name: "Gimli",
race: "Dwarf",
weapon: "axe",
age: "139",
greet: function(){ return 'Hi, my name is ' + this.name;	
}
}
</script>
</head>

<body>
<div id='displayThis'>&nbsp;</div>
<div id='chooseThis'>
<button id="name">Name</button>
<button id="race">Race</button>
<button id="weapon">Weapon</button>
<button id="age">Age</button>
<button id="greet">Greet</button>
</div>


<script>
const button = document.querySelectorAll('button');
button.forEach(function(but) {
but.onclick = function() {
const id = this.id;
getId(id);
}
})


function getId(id) {
switch(id) {
case 'greet':
alert(Gimli.greet());
break;
default:	
alert(Gimli[id]);
}
}


</script>

</body>
</html>

 

 

 

 

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices