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.

    Javascript:

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

//1.)  the DOM is ready

$(document).ready(function()
{

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";
    }
    else 
    {
    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";
    }
    else 
    {
    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";
    }
    else 
    {
    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";
    }
    else 
    {
    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;
    //document.
    }

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

    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;
}


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 Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How to set readonly property of textbox from css

    how to give multiple colors in the same cell in a full calendar?

    How to stop CSS/HTML navigation menu wrapping at different resolutions?

    How do I set the height of an iframe with the min-height property in the body?

    How to make a background color stretch to left and right of viewport in Safari Browsers

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    How to create a dropdown with lu and li tags like this

    How can I slide the sidebar out of view and make the content flexbox resize to fill the void?

    How to set class on div that is inside of repeater in code behind?

    How to change list item color with JQuery

    What is WebKit and how is it related to CSS?

    How to get rid of space between buttons and content/paragraph? (CSS)

    how to move css element with scrolling left with Jquery?

    How to apply my class from css to checkbox? [duplicate]

    How to underline gaps created with CSS columns property?

    How to push image (behind canvas) to front in order for its onclick function to work

    How do I vertically align multiple text next to an image with CSS?

    how to set a specific css class to a widget in gtk3? (c)

    using css, how to position image so when resizing window, image will not move

    How to resize a div on drag? [Issue with rotation]

    How to create a responsive top bar with CSS

    How to visually re-order elements in a scrolling dropdown input div?

    How to adapt CSS image container to different browser sizes

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    How to make a horizontal div scroll bar float like a fixed CSS div

    How to find the highest z-index using jQuery

    How to make simple_form input field wider with CSS?

    How to get my app to fill the full height on mobile?