Jump to content

Send Parameter To The "document.getelementbyid("_");" Statement?


Recommended Posts

Hi folks,Please be gentle on me! I just started learning JavaScript three weeks ago from one of those "TeachYourself in 24 hours" books. I'm half-way through the book right now and at the end of each chapter, there's a "Try it Yourself" section where they list the HTML & corresponding JS scripts for what you've learned in the chapter... You re-create them in whatever program you're using and try it out in the browser. THEN, there's a "Exercise" section where you can further "explore" JavaScript features for the chapter, but this section only offers simple hints on how to do it. Needless to say, the hints aren't enough. Below are the scripts for creating a page that enables you to directly control the colors used in the page's text (utilizing Javascript to manipulate CSS).The code below works fine. But, the "exercise" says this:Now that you have three different changeable elements, there is quite a bit of repetition in the script. Create a single ChangeColor function that takes a parameter for the element to change, and modify the onChange event handlers to send the appropriate element id value as a parameter to this function.here's the problem: I tried to create arguments for a single "ChangeColor" function, but I think the document.getElementById("____"); statement won't accept my parameter.... I think that's the problem.... How would I complete the "exercise"? Please help! I'm pulling my hair out!!!Here's my html:

<html><head><title>Controlling Styles with JavaScript</title><script language="javascript" type="text/javascript" src="styles.js"></script></head><body><h1 id="head1">Controlling Style Sheets with JavaScript</h1><hr><h2 id="subheader">Here's a subhead</h2><p id="p1">Select the color for paragraphs and headings using the form below. The colors you specified will be dynamically changed in this document.  The change occurs as soon as you change the value of either of the drop-down lists in the form.</p><form name="form1"><b>Heading color: </b><select name="heading" onChange="changehead();"><option value="black">Black</option><option value="red">Red</option><option value="blue">Blue</option><option value="green">Green</option><option value="yellow">Yellow</option></select><br><b>Subhead color: </b><select name="subhead" onChange="changesubhead();"><option value="black">Black</option><option value="red">Red</option><option value="blue">Blue</option><option value="green">Green</option><option value="yellow">Yellow</option></select><br><b>Body text color: </b><select name="body" onChange="changebody();"><option value="black">Black</option><option value="red">Red</option><option value="blue">Blue</option><option value="green">Green</option><option value="yellow">Yellow</option></select></form></body></html>

and here's my JS:

function changehead() {    i = document.form1.heading.selectedIndex;    headcolor= document.form1.heading.options[i].value;    document.getElementById("head1").style.color = headcolor;}function changesubhead() {    i= document.form1.subhead.selectedIndex;    subcolor = document.form1.subhead.options[i].value;    document.getElementById("subheader").style.color= subcolor;   }function changebody (){    i = document.form1.body.selectedIndex;    doccolor= document.form1.body.options[i].value;    document.getElementById("p1").style.color = doccolor;}

Link to comment
Share on other sites

If you want a variable value in the getElementById() method, just omit the quotation marks:

var x = "myElement";document.getElementById(x).style.backgroundColor = "red";

Your book seems a little outdated:

  • You can remove the <form> element since you're not sending any form data anywhere.
  • The language attribute of the <script> element is deprecated.
  • Your page is missing a DOCTYPE declaration
  • Change the name attribute on your <select> elements for id, and then use getElementById() to access the <select> elements:
    i = document.getElementById("heading").selectedIndex;subcolor = document.getElementById("subhead").options[i].value;

Link to comment
Share on other sites

What a load of ~@#?~}': , why don't you read what is required in the exercise, and provide it.create javascript code:function changecolor (x, y){document.getElementById(x).style.color = y;}change onchange value to: onChange="changecolor('id_element_value',this.value);"example:<select name="heading" onChange="changecolor('head1',this.value);"><select name="subhead" onChange="changecolor('subheader',this.value);"><select name="body" onChange="changecolor('p1',this.value);">

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...