JavaScript-如何将“ message” div更改为黄色

debugcn 发表于 Dev

广广

我想知道如何将“消息” div更改为黄色。以下是我的js，html和css文件。另外，我想知道如何使数据验证有效。“男性”一词不会打印出来，只会显示字母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;
}

马克C.

首先，消息div为黄色。其次，您将明确获得选中的单选按钮的值，您将其标识为“value="M"查看此处”？：var Gender = $('input[name=gender]:checked').val();<===这就是M的来源。

value="Male"如果这是您想要的结果，则应该使用。

另外，在此行上：$("div").filter("#message").css("backgroundColor", "yellow");。当您知道元素的ID时，就不需要过滤整个DOM。只需使用$("#message").css("backgroundColor", "yellow");

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。