How to write this in javascript???

Zangetsu · 22-05-2008, 05:57 PM

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 · 22-05-2008, 06:16 PM

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

Code:

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

Thats all,

Zangetsu · 23-05-2008, 10:48 AM

Quote:

Originally Posted by rohan_shenoy

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

Code:

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

Thats all,

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 · 23-05-2008, 01:06 PM

Your HTML page will be

Code:

<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

Code:

function colorChanger() {

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

Zangetsu · 23-05-2008, 04:03 PM

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

Code:

<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)

Code:

 <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 · 23-05-2008, 04:16 PM

^
shortcut:

Code:

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

JS:

Code:

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

Code:

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

Popular Categories

Popular Articles

Content Categories

Sister Sites

Follow Us

Facebook Channels

Digit Magazine