jquery - JavaScript- How to change "message" div to yellow -
i'd know how change "message" div yellow. below js, html, , css files. also, i'd know how make data validations work. word male doesn't print out, letter m.
javascript: // assignment 7 javascript , jquery alert ("this test."); //1.) dom ready $(document).ready(function() { alert("the dom ready."); //2.) submitform function var submitform = function() { //alert("this second test."); var first_name = ""; var last_name = ""; var gender = ""; var experience = ""; var firstname = document.getelementbyid("first_name").value; var lastname = document.getelementbyid("last_name").value; //from stack overflow (mar '12) var gender = $('input[name=gender]:checked').val(); /*var m = male; var f = female; var male; var female; var gender = $('input[name=gender]:checked').val(); if (gender = m) { gender = male; } else (gender = f) { gender = female; } */ var years = document.getelementbyid("years").value; var errorfoundflag = false; //3.) data validation if (firstname == "") { errorfoundflag = true; document.getelementbyid("first_error").textcontent = "you must enter first name."; document.getelementbyid("first_error").style.color = "red"; } else { document.getelementbyid("first_error").textcontent = ""; } if (lastname == "") { errorfoundflag = true; document.getelementbyid("last_error").textcontent = "you must enter last name."; document.getelementbyid("last_error").style.color = "red"; } else { document.getelementbyid("last_error").textcontent = ""; } if (gender == "") { errorfoundflag = true; document.getelementbyid("gender_error").textcontent = "you must choose gender."; document.getelementbyid("gender_error").style.color = "red"; } else { document.getelementbyid("gender_error").textcontent = ""; } if (years == "-") { errorfoundflag = true; document.getelementbyid("years_error").text = "you must select number."; document.getelementbyid("years_error").style.color = "red"; } else { document.getelementbyid("years_error").textcontent = ""; } //4.) output employment status if (errorfoundflag == false) { var mymsg = " <h2> employment stats </h2> " + firstname + " " + lastname + "<br>" + "you a: " + gender + "<br>" + "you have: " + years + " years experience" ; document.getelementbyid("message").innerhtml = mymsg; //document. } //make div yellow book p.281 $("div").filter("#message").css("backgroundcolor", "yellow"); } //end submitform function //5.) onload function window.onload = function() { document.getelementbyid("mysubmit").onclick = submitform; } }) //end document ready html: <!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>assignment 7</title> <link rel="stylesheet" href="asgn7_pham.css"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="asgn7_pham1.js"></script> </head> <body> <div id="top"> <h1>assignment 7</h1> <h3>enter employment statistics</h3> <form> <br> <label for="first_name">first name:</label> <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span> <br> <label for="last_name">last name:</label> <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span> <br> male <input type="radio" name="gender" value="m"> female <input type="radio" name="gender" value="f"> <span class="error" id="gender_error"></span> <br> years experience: <select id="years" size="1"> <option value="-">-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> <span class="error" id="years_error"></span> <br><br> <input type="button" id="mysubmit" value="submit form"> <br> </form> </div> <div id="message"> </div> </body> </html> css: /* type selectors */ article, aside, figure, figcaption, footer, header, nav, section { display: block; } * { margin: 10; padding: 10; } body { font-family: verdana, arial, helvetica, sans-serif; width: 650px; background-color: silver; } h1 { font-size: 150%; } h2 { font-size: 120%; padding: .25em 0 .25em 25px; } p { padding-bottom: .25em; padding-left: 25px; } .error { color: red; }
first of all, message div is yellow. second, you're explicitly getting value of checked radio button, identify value="m" see here? : var gender = $('input[name=gender]:checked').val(); <=== that's m comes from.
you should use value="male" if that's desired result.
also, on line: $("div").filter("#message").css("backgroundcolor", "yellow");. don't need filter entire dom when know id of element. use $("#message").css("backgroundcolor", "yellow");
Comments
Post a Comment