Simple html and javascript files - Some part of the javaScript isn't working -
i have no idea why script isn't working. when unchecked boldface , italic checkbox, supposed make text "web design" normal. , also, alignment , backgroundcolor javascript aren't working @ all. appreciate if can help.
<!doctype html> <html> <head> <meta charset="utf-8"> <title> <!-- put page title here --> </title> <style> td{border:1px solid;} </style> </head> <body> <form action="" method="get"> <table> <tr> <td width="300px"> <span id="textmessage">web design</span></td> </tr> <tr> <td></td> <td><span>boldface</span></td> <td><input type="checkbox" name="type" id="typebold" value="boldface" onclick="setbold();" /></td> <td ></td> <td><span>italicized</span></td> <td><input type="checkbox" name="type" id="typeitalic" value="italics" onclick="setitalic();" /> </td> <td></td> </tr> <tr> <td><span>left</span></td> <td><input type="radio" id="align" name="align" value="left" onclick="setalign();"/></td> <td></td> <td>center</td> <td><input type="radio" id="align" name="align" value="center" onclick="setalign();" /></td> <td></td> <td>right</td> <td><input type="radio" id="align" name="align" value="right" onclick="setalign();"/> </td> <td></td> </tr> <tr> <td>red</td> <td><input type="radio" id="color" name="color" value="red" onclick="setcolor();"/></td> <td></td> <td>blue</td> <td><input type="radio" id="color" name="color" value="blue" onclick="setcolor();" /></td> <td></td> <td>green</td> <td><input type="radio" id="color" name="color" value="green" onclick="setcolor();"/> </td> <td></td> </tr> <tr> <td ><input type="submit" /></td> </tr> </table> </form> <script> function setbold(){ var type = document.getelementbyid("typebold").value; var text = document.getelementbyid("textmessage"); if(type!=null){ text.style.fontweight = "bold"; return false; } else{ text.style.fontweight = "normal"; } } function setitalic(){ var type = document.getelementbyid("typeitalic").value; var text = document.getelementbyid("textmessage"); if(type!=null){ text.style.fontstyle = "italic"; return false; } else{ text.style.fontstyle = "normal"; } } function setalign(){ var type = document.getelementbyid("align").value; var text = document.getelementbyid("textmessage"); if(type=="left"){ text.style.textalign = "left"; return false; } else if (type=="center"){ text.style.textalign = "center"; return false; } else{ text.style.textalign = "right"; return false; } } function setcolor(){ var type = document.getelementbyid("color").value; var text = document.getelementbyid("textmessage"); if(type=="green"){ text.style.backgroundcolor = "lightgreen"; return false; } else if (type=="blue"){ text.style.backgroundcolor = "lightblue"; return false; } else{ text.style.textalign.backgroundcolor = "tomato"; return false; } } </script> </body> </html>
the problem because using value
attribute of checkbox. should using checked
.
your setbold
function should bellow
function setbold() { var ischecked = document.getelementbyid("typebold").checked; var text = document.getelementbyid("textmessage"); if (ischecked) { text.style.fontweight = "bold"; } else { text.style.fontweight = "normal"; } }
you cannot have more 1 element same id
better change them alignleft
, aligncenter
& alignright
.
Comments
Post a Comment