# How to write this in javascript???



## Zangetsu (May 22, 2008)

I want 2 design a html page which 
has following elements:

1> A line of text....e.g Welcome to my site <username>
2> a select box with options as colors (red,blue,green)

whenever the user selects a particular option...the text which has the user name 
displayed already,shud change....dynamically to dat color.

Is it possible in javascript....

pls help...


----------



## victor_rambo (May 22, 2008)

Yes this is possible:
1. Give the username display line an 'id'(eg: <span id="username_display">Welcome Rohan</span>)
2. Set three radio buttons, one each for red, green and blue colors.
3. Whenever a radio button is clicked, use 

```
document.getElementById("username_display").style["color"]="red";
```

Thats all,


----------



## Zangetsu (May 23, 2008)

rohan_shenoy said:


> Yes this is possible:
> 1. Give the username display line an 'id'(eg: <span id="username_display">Welcome Rohan</span>)
> 2. Set three radio buttons, one each for red, green and blue colors.
> 3. Whenever a radio button is clicked, use
> ...



cant i use it for dropdown selection box....??? 
i m new 2 javascript...
pls give me whole codes 2 use...(if there r any )


----------



## siddes (May 23, 2008)

Your HTML page will be



```
<html>
<head>
<script>

</script>

</head>
<body>
<h1 id="welcome">Welcome</h1>

<select id="colorSelect">
<Option value="red">Red</option>
<Option value="blue">Blue</option>
<Option value="green">Green</option>
</select>

<input type="button" value="Change Color" onclick="colorChanger()">

</body>

</html>
```


Withing the <script> include this



```
function colorChanger() {

var welcomeText = document.getElementById("welcome");
var textColor = document.getElementById("colorSelect").value;
welcomeText.style.color=textColor;
}
```


----------



## Zangetsu (May 23, 2008)

^Cool...mine is almost same....got dat finally 

```
<html>
 <head>
 <title>Welcome to this Page User</title>
</head>
 <body>
 <form>
 <p>Welcome to this Page <b id="userName">User</b></p>
<br><br>
 <select id="color" type="select-one" onchange="changeColor()">
 <option value="0">Pink</option>
 <option value="1">Red</option>
 <option value="2">Blue</option>
 <option value="3">Green</option>
 </select>
 </form>
 </body>
 </html>
```

script (shud be in head)


```
<script type="text/javascript">
 function changeColor()
  {
    if (document.getElementById('color').value==0)
      {
        document.getElementById('userName').style.color ='pink';
      }
     else if (document.getElementById('color').value==1)
      {
        document.getElementById('userName').style.color ='red';
      }else if (document.getElementById('color').value==2)
      {
        document.getElementById('userName').style.color='blue'; 
      }else if (document.getElementById('color').value==3)
      {
      document.getElementById('userName').style.color='green';
      }
  }
  </script>
```


----------



## victor_rambo (May 23, 2008)

^
shortcut:


```
<select>
<option onclick="changeColor('red')">Red</option>
<option onclick="changeColor('green')">Green</option>
<option onclick="changeColor('blue')">blue</option>
</select>
```

JS:

```
function changeColor(color)
{
document.getElementById("userName").style["color"]=color;
}
```

Another shorter way:

Just put the below snippet. No need to include another function inside script tag

```
<select>
<option onclick="document.getElementById('userName').style['color']=this.innerHTML;">Red</option>
<option onclick="document.getElementById('userName').style['color']=this.innerHTML;">Green</option>
<option onclick="document.getElementById('userName').style['color']=this.innerHTML;">Blue</option>
</select>
```


----------

