CSS with JavaScript - Cannot read property 'undefined' error -
i tried change colors of select lists header, title , text. added functions changehead(), changetitle() , changebody() this. , bind elements through unique id.
but i'm getting following error
uncaught typeerror: cannot read property 'undefined' of undefined
in function changehead(), after
header = document.form1.heading.options[i].value; and in function changetitle() after
header = document.form1.heading.options[i].value; i'm not sure whether should using 2 different functions or if can done one.
code:
<script> function changehead() { = document.form1.heading.selectedindex; header = document.form1.heading.options[i].value; document.getelementbyid("head1").style.color = header; } function changetitle() { = document.form1.heading.selectedindex; header = document.form1.heading.options[i].value; document.getelementbyid("head2").style.color = header; } function changebody() { = document.form1.body.selectedindex; doccolor = document.form1.body.options[i].value; document.getelementbyid("p1").style.color = doccolor; } </script> </head> <body> <h1 id="head1">controlling styles javascript</h1> <hr> <h2 id="head2">subtitles @ screen. , cery important subtitles!</h2> <hr> <p id="p1">select color paragraphs , headings using form below. colors specified dynamically changed in document. change occurs change value of either of drop-down lists in 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>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> <br> <b>heading second color:</b> <select name="heading" onchange="changetitle();"> <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> questions:
- how circumvent situation errors?
- do need 2 different functions changing head & title, or 1 enough (if yes - how)?
you have 2 selects named "heading". give them different names , javascript stop throwing errors.
here working example: http://jsbin.com/uritid/1/edit
Comments
Post a Comment