5 replies to this topic

[Demonslay]

First of all not sure if this is the right board for a JavaScipt question, so I apologize if my judgement was wrong... (it says 'Web').

Anyways, what I am trying to do, is use a form, and have JavaScript find the value of a selected option in a select element, and load that into a function.
In my case, I have made a dynamic image compiler (or whatever you want to call it), and I have a previewer table. I use a pic() function that simply changes the image source of an image in the preview table, simple stuff.
Now, I have one select menu where you can choose your hair, and another where you can have a head accessory. But, then I have a helmet you can choose from, and using logic, your hair wouldn't be visible (in the game its for anyways) and you obviously can't have a head accessory like a cavalier on your head at the same time. So, I have when a helmet is selected, it changes the hair slot to the helmet preview picture, and make the head accessory null (src=''). Now, this can be frustrating though, if someone decides they don't want the helmet. They have to re-click on the hair and head accessory for them to show in the table again. I want so that they simply click 'None' in the helmet select menu, and it will revert the hair and accessory slots back to the values of the respective select menus.

First off, here is the page.

Ok, so I tried to make my own function, similar to the pic() function I was using, and this is what it looks like.

function revert(img_name) {
	var getImg = document.getElementById[img_name].value;
	getImg = getImg + ".png";
	document[img_name].src = "dinty_kit/previews/" + img_name + "/" + getImg;
}

I figured I could simply pass it the image id, and it would be able to put it into this code and it would be alright. But nothing happens when I click it.

Here is how I am trying to use it.

<option value="none" onclick="revert('hair'); revert('head');" selected="selected">None</option>

I have my id's and name and all set properly, I suspect it just has to do with my function. I'm terrible at JavaScript.

Is what I'm trying even possible? I've seen how JavaScript can return the value of something using that DOM object reference, but Im just not sure if I'm using it correctly...

Edited by Demonslay, 09 July 2006 - 12:53 AM.

[rc69]

Well first, getElementById() is a function, not an array. Second, they particular way you're using it doesn't work in IE (or at least it never has for me).

So try this:

function revert(img_name) {
	var img = document.getElementById(img_name);
	var getImg = img.value + ".png";
	img.src = "dinty_kit/previews/" + img_name + "/" + getImg;
}

That should work a little bit better for you.

[Demonslay]

Ah, your code makes alot more sense to me now.
I was using array brackets because that's how I saw it with the pic function I was using before. Now I see, it was using the document as an array.

Anyways, it still doesn't work, it doesn't do anything at all.
In Firefox it plain out doesn't do anything when you click the 'None', and some reason I just realized in IE the entire pic function doesn't work. Does IE support the onclick event handler? Or will I need to change it to onfocus?

Edited by Demonslay, 09 July 2006 - 01:10 PM.

[rc69]

Another common way of using the DOM to select stuff is document.all[], so i simply use the following to select elements. I also use the onChange event handler in the select tag and have never had any problems with it.
For more info on events, i highly recommend quirksmode.org, without that site, i never woulda done half the stuff i've done with JS.

<script type="text/javascript">
function getElement(id){
	return (document.getElementById ? document.getElementById(id) : document.all[id]);
}

function revert(obj) {
	var img_name = obj.form.elements['foo'].options[obj.form.elements['foo'].selectedIndex].value;
	var img = document.getElement(img_name);
	var getImg = img.value + ".png";
	img.src = "dinty_kit/previews/" + img_name + "/" + getImg;
}
</script>

<select name="foo" onChange="revert(this);">
	<option value="hair">Hair</option>
</select>

gl.

[Demonslay]

Well, I think you're getting it mixed up now. I want so that when the 'None' option in the Helmets select option is selected, it grabs the option that is active in the Hair select menu.
I tried your function and and it still doesn't work anyways. I modified it several times and tried several things, but no luck still.

Oh, by the way, what the heck does 'foo' mean? I see it alot with JavaScript and PHP, but I've never seen it desribed why it's used.

Edited by Demonslay, 10 July 2006 - 01:47 PM.

[Matthew.]

Foo is a commonly used coding word when you got nothing to call a variable etc etc. e.g

$foo = ($bar > $foo) ? $bar : $foo;

Just a random word really

Quote

The term originates from computer programming and other technical contexts, and is commonly used in examples by hackers and programmers. ...

Edited by .Matt, 10 July 2006 - 02:03 PM.