JavaScript- How to change “message” div to yellow

Tags: javascript,jquery,html,css

Problem :

I'd like to know how to change a "message" div to yellow. Below are my js, html, and css files. Also, I'd like to know how to make the data validations work. The word Male doesn't print out, only the letter M.


// Assignment 7 JavaScript and jQuery
alert ("This is a test.");

//1.)  the DOM is ready


alert("the DOM is ready.");

//2.)  the submitForm function

  var submitForm = function()
  //alert("This is a 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 a First Name.";
    document.getElementById("first_error").style.color = "red";
    document.getElementById("first_error").textContent = "";
    if (lastName == "")
    errorFoundFlag = true;
    document.getElementById("last_error").textContent = "You must Enter a Last Name.";
    document.getElementById("last_error").style.color = "red";
    document.getElementById("last_error").textContent = "";
    if (Gender == "")
    errorFoundFlag = true;
    document.getElementById("gender_error").textContent = "You must Choose a Gender.";
    document.getElementById("gender_error").style.color = "red";
    document.getElementById("gender_error").textContent = "";
    if (Years == "-")
    errorFoundFlag = true;
    document.getElementById("years_error").text = "You must Select a Number.";
    document.getElementById("years_error").style.color = "red";
    document.getElementById("years_error").textContent = "";

//4.)  output employment status

    if (errorFoundFlag == false)
    var myMsg = " <h2> Employment Stats for </h2> " + firstName + " " + lastName +
                                        "<br>" +
                                        "You are a: " + Gender +
                                        "<br>" +
                                        "You have:  " + Years + " years experience" ;
    document.getElementById("message").innerHTML = myMsg;

    //make div yellow from 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                                     


<!DOCTYPE html>
<html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Assignment 7</title>
    <link rel="stylesheet" href="Asgn7_Pham.css">
    <script src=""></script>
    <script src="Asgn7_Pham1.js"></script>

    <div id="top">
    <h1>Assignment 7</h1>
    <h3>Enter Employment Statistics</h3>
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
        Male <input type="radio" name="gender" value="M">
        Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
        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>

        <span class="error" id="years_error"></span>

        <input type="button" id="mysubmit" value="Submit Form">

    <div id="message">


/* 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;

Solution :

First of all, the message div is yellow. Second, you're explicitly getting the value of the checked radio button, which you identify as value="M" See here? : var Gender = $('input[name=gender]:checked').val(); <=== That's where M comes from.

You should just use value="Male" if that's your desired result.

Also, on this line: $("div").filter("#message").css("backgroundColor", "yellow");. You don't need to filter the entire DOM when you know the ID of the element. Just use $("#message").css("backgroundColor", "yellow");

    CSS Howto..

    How to locate element inside css footer

    How to apply disabled style of dropdownlist

    How can I simply freeze the first row of my table using pure Javascript, no plugins?

    How to make a floated element take the entire width of its parent

    how to make dynamically loaded image with different width and height responsive in css

    How to use an image more than one place in CSS

    how to move canvas along with a centered canvas

    How do I get pictures side by side (responsive)

    How do I get this text using Jsoup?

    How to apply css rules to html element using ExtJS?

    how to creating a separator line which is always in the middle (center)

    CSS - Get image to show text overlayed on top of the image on hover?

    How to expand a div to its content width WHEN it is larger than its parent?

    How can I vertically align two floated divs?

    How can I change css for every DOM object in the page in SAPUI5

    how to center image + text in an li Element

    how to create a half bordered circle(only css, not js or even svg)?

    How to display sub menu horizontally?

    How do I combine this 2 sets of coding together to form a mega drop down nav

    How to improve this code to combine/compress CSS using PHP [closed]

    How to set
  • Backgound color?
  • How to vertically align inline-block elements with height set and test with browser tools

    How to upgrade web project with latest fancy Bootstrap & SASS

    CSS: Double-Border, how to [duplicate]

    How to override display: table cell

    How to create Curved & Overlapping Menu Tabs in CSS

    How to animate my element in my case?

    What CSS properties govern how a webpage reacts to window resizing?

    How would I go about editing the polar clock counter clockwise?

    div height is not showing properly