if function between combobox and text using javascript

[vvomble]

i'm desperately seeking some javascript advice.

I'm currently using wysiwyg webbuilder 8.

I have one of my combo boxes linking to another but i want the first box to affect text on the page the text id is text23 and here is the coding i am using at the moment

<script type="text/javascript">
function fillSecondCombo()
{
   var combo1 = document.getElementById('Combobox3');
   var combo2 = document.getElementById('Combobox4');
   var selected = combo1.options[combo1.options.selectedIndex].value;
   
   if (selected == 1)
   {
      combo2.options.length = 1;
      combo2.options[0] = new Option("999 Million Forza 3 Credits", "1");

   }
   else
   if (selected == 2)
   {
     combo2.options.length = 5;
     combo2.options[0] = new Option("999 Million Forza 4 Credits", "1");
     combo2.options[1] = new Option("750 Million Forza 4 Credits", "2");
     combo2.options[2] = new Option("500 Million Forza 4 Credits", "3");
     combo2.options[3] = new Option("400 Million Forza 4 Credits", "4");
     combo2.options[4] = new Option("300 Million Forza 4 Credits", "5");
     combo2.options[5] = new Option("200 Million Forza 4 Credits", "6");
     combo2.options[6] = new Option("100 Million Forza 4 Credits", "7");
     combo2.options[7] = new Option("75 Million Forza 4 Credits", "8");
}
   else
   if (selected == 3)
   {
      combo2.options.length = 4;
      combo2.options[0] = new Option("2k Gamerscore Increase", "7");
      combo2.options[1] = new Option("5k Gamerscore Increase", "8");
      combo2.options[2] = new Option("10k Gamerscore Increase", "9");
      combo2.options[3] = new Option("25k Gamerscore Increase", "10");
}
   else
   if (selected == 4)
   {
      combo2.options.length = 4;
      combo2.options[0] = new Option("1 Purchased", "7");
      combo2.options[1] = new Option("2 Purchased", "8");
      combo2.options[2] = new Option("3 Purchased", "9");
      combo2.options[3] = new Option("4 Purchased", "10");
   }
   else
   if (selected == 5)
   {
      combo2.options.length = 4;
      combo2.options[0] = new Option("1 Purchased", "7");
      combo2.options[1] = new Option("2 Purchased", "8");
      combo2.options[2] = new Option("3 Purchased", "9");
      combo2.options[3] = new Option("4 Purchased", "10");
   } 
   else
   if (selected == 6)
   {
      combo2.options.length = 4;
      combo2.options[0] = new Option("1 Purchased", "7");
      combo2.options[1] = new Option("2 Purchased", "8");
      combo2.options[2] = new Option("3 Purchased", "9");
      combo2.options[3] = new Option("4 Purchased", "10");
   }
  else
   {
      combo2.options.length = 0;
   }
}
</script>

this is the only thing i need to complete the site i am working on

 

[vacunita]

So what is the problem?

Something as straight forward as

document.getElementById('text23').innerHTML="New Text I want to modify in text23";

wherever you require it in your if statements should be enough.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[vvomble]

i'm totally new to javascript so i don't know where that would be placed


i'm pants at explaining this stuff so here's an image

basically combo3 already changes combo4 but depending on what is selected on combo3 i want text23 to change.

 

[vacunita]

That would be placed inside your if statements. But only you know what it needs to say, and when it needs to say it.

For instance if you need the text23 message to say "[blue]Hello[/blue]" when the selected value for your combo box is say [red]3[/red]. you;d put this inside the if statement for that value and set the innerHTML to whatever you want it to say.

...
if (selected == [red]3[/red])
   {
      combo2.options.length = 4;
      combo2.options[0] = new Option("2k Gamerscore Increase", "7");
      combo2.options[1] = new Option("5k Gamerscore Increase", "8");
      combo2.options[2] = new Option("10k Gamerscore Increase", "9");
      combo2.options[3] = new Option("25k Gamerscore Increase", "10");

      document.getElementById('text23').innerHTML="[blue]Hello[/blue]";
}
...

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[vvomble]

this isn't working for me...

is there a way i can have pre-defined text for text23 set so

like MESSSAGE1="hello" MESSAGE2="goodbye"

then if combobox2= x then text23=MESSAGE1


I don't know if that is possible or where to start

 

[vacunita]

It is possible, but that won't make whatever error your having go away, since in the end its the same basic logic.

Your original post said:

i want the [red]first box[/red] to affect text on the page the text id is text23

I took that to mean combo1 as in your picture that would be Combobox3 which is referred to as combo1 in the JS variables.

Now you are saying you want combobox2, which I take it means you really want your Combobox4 in the picture, referred to as combo2 in the JS variables.

If you want to affect the text based on the second combobox (Combobox4 a.k.a combo2) then its a totally different thing.

And would require a bit more code, the logic is essentially the same, except you'd need to call another function from your combobox2.

What exactly is it you want then?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[vvomble]

sorry i did mean the first box i'm getting confused my brains fried trying to figure this one out

 

[vacunita]

O.k then, so when an option from the first Combobox a.k.a Combobox3 in your picture is selected you want to show some specific text in your text23 element.

No just so everything is clear. your text23 is not a textbox , textarea, but rather an html element suhc as a span or a div and it has an ID of text23.

Such as:

<span id="text23"></span>

If that is accurate, then the code above should work.
Now if you want to have predefined messages you can do so as well.

NOTE: the "..." three periods are there to to mean there's more code below in a similar fashion as the existing one, they should not be in your final code.

[gray]
function fillSecondCombo()
{
   var combo1 = document.getElementById('Combobox3');
   var combo2 = document.getElementById('Combobox4');
   var selected = combo1.options[combo1.options.selectedIndex].value;
var [red]instructiontext[/red]=document.getElementById('text23');
var [blue]Message1[/blue]="Text for message one";
var [green]Message2[/green]="Text for message two";
...
   
   if (selected == 1)
   {
      combo2.options.length = 1;
      combo2.options[0] = new Option("999 Million Forza 3 Credits", "1");
[red]instructiontext[/red].innerHTML = [blue]Message1[/blue];

   }
   else
   if (selected == 2)
   {
     combo2.options.length = 5;
     combo2.options[0] = new Option("999 Million Forza 4 Credits", "1");
     combo2.options[1] = new Option("750 Million Forza 4 Credits", "2");
     combo2.options[2] = new Option("500 Million Forza 4 Credits", "3");
     combo2.options[3] = new Option("400 Million Forza 4 Credits", "4");
     combo2.options[4] = new Option("300 Million Forza 4 Credits", "5");
     combo2.options[5] = new Option("200 Million Forza 4 Credits", "6");
     combo2.options[6] = new Option("100 Million Forza 4 Credits", "7");
     combo2.options[7] = new Option("75 Million Forza 4 Credits", "8");
     [red]instructiontext[/red].innerHTML = [green]Message2[/green];

}
...
[/gray]

The basic logic is you get a reference to your text element via getElementById, and then you change its innerHTML property which controls the contents of the element.

If you aren't getting he expected results look at the Error console for the browser you are using. Newer IE's have the f12 Developer tool bar you can get to from the Tools menu, and Firefox has the Error Console also in the Tools Menu.

They'll show you any Javascript errors you might have.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[vvomble]

It wasn't working so i made a compromise and made it a text area that will have to do big thanks

 

[vacunita]

glad I could help. FYI no way to know why it didn't work. What exactly where you using before the text area?

Actual HTML being used would have helped.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[vvomble]

its just called text in wysiwyg

i never thought i could have just checked what it was on the html look up which appears as

<div id="wb_Text1">
<span style="color:#000000;font-family:Arial;font-size:13px;">Double click to edit</span>
</div>

can i just say thanks for all your help. I had posted this on w3schools forums and after 13 hours all i got back was what i said but in jargon. I will highly recommend you guys and if you'd like even post a link to this site on mine.

I'll also let you see the full site once it's complete.

 

[vacunita]

That's why it wasn't working. Its ID wasn't actually text23. So it could not find the correct element.

First rule of JS: make sure the ID is what you think it is.

For linking and other types of credit, contact the owner Dave for things you can do.

Feedback

BTW: All we do here is volunteer.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech