0

I am very new to js, getting very confused. I need three button's on the bottom using onclick.First button - change color scheme, second button - different color scheme and the third button - needs to return back to the original color scheme.

thank you inadvanced

<html>
<head>
<title>My Table Page</title>
<script language="JavaScript">
<!--
function changeColors()
{
document.body.style.backgroundColor="seagreen";
document.getElementById('firsttable').style.backgroundColor="darkseagreen";
document.getElementById('secondtable').style.backgroundColor="palegreen";
document.getElementById('firsttable').style.border="3";

document.body.style.backgroundColor="khaki";
document.getElementById('firsttable').style.backgroundColor="beige";
document.getElementById('secondtable').style.backgroundColor="burlywood";
document.getElementById('firsttable').style.border="3";
}
//-->
</script>
</head>
<body>
<table border="0" id="firsttable" cellpadding="0" style="background-color:cornflowerblue">
<tr>
<td colspan="2"><img src="FraserHome.jpg" width="100%" /></td>
</tr>
<tr><td width="220">
<table border="2" id="secondtable" style="background-color:lightsteelblue">
<tr>
<td width="200" align="center"><a href="http://www.chisholm.vic.edu.au">
Chisholm Home</a></td></tr>
<tr>
<td width="200" align="center">About Us</td></tr>
<tr>
<td width="200" align="center">Our Products</td></tr>
<tr>
<td width="200" align="center">Links</td></tr>
</table>
</td>
<td colspan=1 width="650"><p>Welcome to the new website. We are now using tables to help layout<br />
our web pages. I hope you like the new look. <br /></p></td></tr>
</table>
<p></p>
<form>
<input type="button" value="Click for shades of green" onClick="changeColors();">
<input type="button" value="Click for shades of yellow-brown" onClick="changeColors();">
<input type="button" value="return to original colour" onClick="changeColors();">

</form>
</body>
</html>
3
Contributors
5
Replies
6
Views
7 Years
Discussion Span
Last Post by nettee
0

I am very new to js, getting very confused. I need three button's on the bottom using onclick.First button - change color scheme, second button - different color scheme and the third button - needs to return back to the original color scheme.

thank you inadvanced

<html>
<head>
<title>My Table Page</title>
<script language="JavaScript">
<!--
function changeColors()
{
document.body.style.backgroundColor="seagreen";
document.getElementById('firsttable').style.backgroundColor="darkseagreen";
document.getElementById('secondtable').style.backgroundColor="palegreen";
document.getElementById('firsttable').style.border="3";

document.body.style.backgroundColor="khaki";
document.getElementById('firsttable').style.backgroundColor="beige";
document.getElementById('secondtable').style.backgroundColor="burlywood";
document.getElementById('firsttable').style.border="3";
}
//-->
</script>
</head>
<body>
<table border="0" id="firsttable" cellpadding="0" style="background-color:cornflowerblue">
<tr>
<td colspan="2"><img src="FraserHome.jpg" width="100%" /></td>
</tr>
<tr><td width="220">
<table border="2" id="secondtable" style="background-color:lightsteelblue">
<tr>
<td width="200" align="center"><a href="http://www.chisholm.vic.edu.au">
Chisholm Home</a></td></tr>
<tr>
<td width="200" align="center">About Us</td></tr>
<tr>
<td width="200" align="center">Our Products</td></tr>
<tr>
<td width="200" align="center">Links</td></tr>
</table>
</td>
<td colspan=1 width="650"><p>Welcome to the new website. We are now using tables to help layout<br />
our web pages. I hope you like the new look. <br /></p></td></tr>
</table>
<p></p>
<form>
<input type="button" value="Click for shades of green" onClick="changeColors();">
<input type="button" value="Click for shades of yellow-brown" onClick="changeColors();">
<input type="button" value="return to original colour" onClick="changeColors();">

</form>
</body>
</html>

try this....

<html>
<head>
<title>My Table Page</title>
<script language="JavaScript">
<!--
function changeColors(color)
{
document.body.style.backgroundColor=color;


}

</script>
</head>
<body>
<table border="0" id="firsttable" cellpadding="0" style="background-color:cornflowerblue">
<tr>
<td colspan="2"><img src="FraserHome.jpg" width="100%" /></td>
</tr>
<tr><td width="220">
<table border="2" id="secondtable" style="background-color:lightsteelblue">
<tr>
<td width="200" align="center"><a href="http://www.chisholm.vic.edu.au">
Chisholm Home</a></td></tr>
<tr>
<td width="200" align="center">About Us</td></tr>
<tr>
<td width="200" align="center">Our Products</td></tr>
<tr>
<td width="200" align="center">Links</td></tr>
</table>
</td>
<td colspan=1 width="650"><p>Welcome to the new website. We are now using tables to help layout<br />
our web pages. I hope you like the new look. <br /></p></td></tr>
</table>
<p></p>
<form>
<input type="button" value="Click for shades of green" onClick="changeColors('seagreen');">
<input type="button" value="Click for shades of yellow-brown" onClick="changeColors('khaki');">
<input type="button" value="return to original colour" onClick="changeColors('white');">

</form>
</body>
</html>
0

Thank you that's great but i also need the tables to change colour.

thanks for replying

0

Thank you that's great but i also need the tables to change colour.

thanks for replying

0

nettee:

You could use JavaScript to manipulate color, but it would be quite messy.

// !modified from ryoonnet code above
<html>
<head>
<title>My Table Page</title>
<script language="text/javascript">
<!--
function changeColors(colorSet) {
  switch (colorSet) {
    case 1:
      document.body.style.backgroundColor="seagreen";
      document.getElementById('firsttable').style.backgroundColor="darkseagreen";
      document.getElementById('secondtable').style.backgroundColor="palegreen";
      document.getElementById('firsttable').style.border="3";
      break
    case 2:
      document.body.style.backgroundColor="khaki";
      document.getElementById('firsttable').style.backgroundColor="beige";
      document.getElementById('secondtable').style.backgroundColor="burlywood";
      document.getElementById('firsttable').style.border="3";
      break
    default:
      document.body.style.backgroundColor="white";
      document.getElementById('firsttable').style.backgroundColor="cornflowerblue";
      document.getElementById('secondtable').style.backgroundColor="lightsteelblue";
      document.getElementById('firsttable').style.border="0";
  }
}
-->
</script>
</head>

<body>
<table border="0" id="firsttable" cellpadding="0" style="background-color:cornflowerblue">
<tr>
<td colspan="2"><img src="FraserHome.jpg" width="100%" /></td>
</tr>
<tr><td width="220">
<table border="2" id="secondtable" style="background-color:lightsteelblue">
<tr>
<td width="200" align="center"><a href="http://www.chisholm.vic.edu.au">
Chisholm Home</a></td></tr>
<tr>
<td width="200" align="center">About Us</td></tr>
<tr>
<td width="200" align="center">Our Products</td></tr>
<tr>
<td width="200" align="center">Links</td></tr>
</table>
</td>
<td colspan=1 width="650"><p>Welcome to the new website. We are now using tables to help layout<br />
our web pages. I hope you like the new look. <br /></p></td></tr>
</table>
<p></p>
<form>
<input type="button" value="Click for shades of green" onClick="changeColors(1);">
<input type="button" value="Click for shades of yellow-brown" onClick="changeColors(2);">
<input type="button" value="return to original colour" onClick="changeColors(0);">

</form>
</body>
</html>

Though, it would be better and cleaner to manage color scheme using CSS...

Edited by Taywin: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.