Highlighted

JS struct and id issue

LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

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,

 

^ _ ^

TOPICS
Bootstrap, Browser, Code, Download install and licensing, Error, Extensions, How to, Import and export, Interface, Other, Performance, Preview, Product issue, Publish, Server side applications

Views

522

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

JS struct and id issue

LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

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,

 

^ _ ^

TOPICS
Bootstrap, Browser, Code, Download install and licensing, Error, Extensions, How to, Import and export, Interface, Other, Performance, Preview, Product issue, Publish, Server side applications

Views

523

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 19, 2020 0
LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

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;}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2020 0
LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

"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,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2020 0
LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

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>

 

 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2020 0
LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

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,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2020 0
LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2020 0
LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

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,

 

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2020 0
LEGEND ,
Feb 19, 2020

Copy link to clipboard

Copied

Most probably its because youre using Gimli[""+this.title] (square brackets) and + which is different to using a period - Gimli.greet()

 

But l cant test this at the moment but for sure l think thats where the issue may lie as its not being recognised as a function.

 

The way you currently have it set up works for non functions but not for when you need to evoke a function

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 19, 2020 0
osgood_ LATEST
LEGEND ,
Feb 20, 2020

Copy link to clipboard

Copied

Another option would be:

 

<script>
$('button').on('click',function(){
var txt = this.innerText || this.textContent;
var title = this.getAttribute('title')
switch(title){
case 'greet()':
$('#displayThis').html(txt + ": " + (Gimli.greet()));
break;
default:
$('#displayThis').html(txt + ": " + Gimli[title]);
}
});
</script>

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 20, 2020 1