Some Help?

[Nanopy]

I am a PHP guy, Javascript confuses me to an extreme.

I was wondering if anyone knew a way where I could do the following:

Have multiple chained select forms, the values of which are combined and displayed.

I'm trying to use Javascript to change the style of text based on the items selected. So if someone had the color red, and a border selected, the script would dynamically change the style of some text to display that.

Sorry if this sounds a bit confusing, it's hard for me to explain. If anyone could be of any help it would be much appreciated.

Thanks

[Twey]

CSS is the easiest way to do this.

<script type="text/javascript">
var e = document.getElementById('changeable').style;
</script>
Font weight:
<select onchange="e.fontWeight = this.value;">
  <option value="lighter">Lighter</option>
  <option value="normal">Normal</option>
  <option value="bold">Bold</option>
  <option value="bolder">Bolder</option>
</select>
Colour: <!-- I'm British, before you ask -->
<select onchange="e.color = this.value;">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
Background colour:
<select onchange="e.backgroundColor = this.value;">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
Text decoration:
<select onchange="e.textDecoration = this.value;">
  <option value="underline">Underline</option>
  <option value="overline">Overline</option>
  <option value="line-through">Strikethrough</option>
  <option value="none">None</option>
</select>
<p id="changeable">
Blah de blah.
</p>

[jscheuer1]

That's ingenious! But, to work, the script needs to be at the end or executed onload. It would also be a nice touch to set the initial style properties of the element (paragraph) to the initial selections.

[Twey]

That's ingenious!

Why thank you!

But, to work, the script needs to be at the end or executed onload.

I don't quite understand. The script (if you mean the <script> element [all one line of it]) should be executed when the browser parses it. This is perfectly fine for the purposes. Am I missing something?

It would also be a nice touch to set the initial style properties of the element (paragraph) to the initial selections.

You're right. Add:

<script type="text/javascript">
var i, s=document.getElementsByTagName("select");
for(i=0;i<s.length;i++) if(s[i].onchange.indexOf("e.") > -1) s[i].onchange();
</script>

to the end of the script.

[jscheuer1]

But, to work, the script needs to be at the end or executed onload.

I don't quite understand. The script (if you mean the <script> element [all one line of it]) should be executed when the browser parses it. This is perfectly fine for the purposes. Am I missing something?

Well, I tried it and the script (all one line of it) needed to be after the element it references, at least. I cannot understand your code for setting the initial properties but will give it a shot. I was playing around with the script and settled on just adding the selected attribute to the options that described the default state of the text, adding options if needed. It is a fine point of the select element but, you are supposed to designate a selected option anyway because some browsers will default select differently from one another otherwise, unless this is unimportant to the page's design.

[jscheuer1]

I understand the additions now but needed to convert toString() before evaluating:

<script type="text/javascript">
<!--
var e = document.getElementById('changeable').style;
var i, s=document.getElementsByTagName("select");
for(i=0;i<s.length;i++)
if(s[i].onchange.toString().indexOf("e.") > -1)
s[i].onchange();
//-->
</script>

[mwinter]

I understand the additions now but needed to convert toString() before evaluating:

Checking for the occurance of 'e.' is far from a robust solution, particularly when you consider that something as common as '.style.' would match.

Checking the class attribute is the most common solution:

if(/(^|\s+)...(\s+|$)/.test(s[i].className)) {

replacing the ellipsis with whatever class name you choose.

Mike

[jscheuer1]

Agreed but, I was just making Twey's code work. He seems to have a love of short, nondescript variable names.

[Twey]

Oh, I see.
Final revised code:

<p id="changeable">
Blah de blah.
</p>
Font weight:
<select class="pchanger" onchange="document.getElementById('changeable').style.fontWeight = this.value;">
  <option value="lighter">Lighter</option>
  <option value="normal">Normal</option>
  <option value="bold">Bold</option>
  <option value="bolder">Bolder</option>
 </select>
Colour:
<select class="pchanger" onchange="document.getElementById('changeable').style.color = this.value;">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
Background colour:
<select class="pchanger" onchange="document.getElementById('changeable').style.backgroundColor = this.value;">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
Text decoration:
<select class="pchanger" onchange="document.getElementById('changeable').style.textDecoration = this.value;">
  <option value="underline">Underline</option>
  <option value="overline">Overline</option>
  <option value="line-through">Strikethrough</option>
  <option value="none">None</option>
</select>
<script type="text/javascript">
var i, s=document.getElementsByTagName("select");
for(i=0;i<s.length;i++) if(/(^|\s+)pchanger(\s+|$)/.test(s[i].className)) s[i].onchange();
</script>

/EDIT: Mike also loves short, non-descriptive variable names There's a difference between the way I'd name a real variable and the way I'd name a quick alias masquerading as a variable, especially when they're defined in the very last line. Not a long reference.

[jscheuer1]

I got that but, I'm begining to wonder if you test your own code very often. This latest doesn't work either, you left 'style' out of the onchange events. Here is a working version:

Font weight:
<select class="pchanger" onchange="pchange.fontWeight = this.value;">
  <option value="lighter">Lighter</option>
  <option value="normal">Normal</option>
  <option value="bold">Bold</option>
  <option value="bolder">Bolder</option>
</select>
Colour: <!-- I'm British, before you ask -->
<select class="pchanger" onchange="pchange.color = this.value;">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="black">Black</option>
</select>
Background colour:
<select class="pchanger" onchange="pchange.backgroundColor = this.value;">
  <option value="white">White</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
Text decoration:
<select class="pchanger" onchange="pchange.textDecoration = this.value;">
  <option value="underline">Underline</option>
  <option value="overline">Overline</option>
  <option value="line-through">Strikethrough</option>
  <option value="none">None</option>
</select>
<p id="changeable">
Blah de blah.
</p>
<script type="text/javascript">
<!--
var pchange = document.getElementById('changeable').style;
var i, s=document.getElementsByTagName("select");
for(i=0;i<s.length;i++)
if(s[i].className=='pchanger')
s[i].onchange();
//-->
</script>