Newbie JS help

Question

nettee 0 Newbie Poster

14 Years Ago

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>

javascript

3 Contributors
5 Replies
83 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by nettee

ryoonnet 0 Newbie Poster

14 Years Ago

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>

Taywin 312 Posting Virtuoso

14 Years Ago

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 14 Years Ago by Taywin because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

nettee 0 Newbie Poster · Answer 1 · 2010-10-28T16:45:44+00:00

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

thanks for replying

nettee 0 Newbie Poster · Answer 2 · 2010-10-28T16:45:59+00:00

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

thanks for replying

nettee 0 Newbie Poster · Answer 3 · 2010-11-10T08:35:19+00:00

nettee 0 Newbie Poster

14 Years Ago

thank you for your help