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

Question

I'd like to know how to change a "message" div to yellow. 我想知道如何将“消息” div更改为黄色。 Below are my js, html, and css files. 以下是我的js，html和css文件。 Also, I'd like to know how to make the data validations work. 另外，我想知道如何使数据验证有效。 The word Male doesn't print out, only the letter M. “男性”一词不会打印出来，只会显示字母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;
}

Answer 1

First of all, the message div is yellow. 首先，消息div 为黄色。 Second, you're explicitly getting the value of the checked radio button, which you identify as value="M" See here? 其次，您将显式获取选中的单选按钮的值，并将其标识为value="M"在这里看到？ : var Gender = $('input[name=gender]:checked').val(); ： var Gender = $('input[name=gender]:checked').val(); <=== That's where M comes from. <===这就是M的来源。

You should just use value="Male" if that's your desired result. 如果这是您想要的结果，则应该只使用value="Male" 。

Also, on this line: $("div").filter("#message").css("backgroundColor", "yellow"); 另外，在此行上： $("div").filter("#message").css("backgroundColor", "yellow"); . 。 You don't need to filter the entire DOM when you know the ID of the element. 当您知道元素的ID时，就不需要过滤整个DOM。 Just use $("#message").css("backgroundColor", "yellow"); 只需使用$("#message").css("backgroundColor", "yellow");

Answer 2

I am not sure this is what you have asked for, I guess with message div you mean the textarea. 我不确定这是否是您要的内容，我想对div消息来说，您的意思是文本区域。

Either way, i revamped your code, you do not need the doc.ready() for submits in general. 无论哪种方式，我都修改了您的代码，一般而言，您不需要doc.ready（）进行提交。

The commented out JS of mine is fully functional, will work, the code on line 29-32 我的注释掉的JS功能齐全，可以正常工作，代码在29-32行

$("#mysubmit").click(function(){
$(".spanFirst").fadeIn(1000).fadeOut(2300);
});

Is just simulating what would happen if first name field was empty, click submit and see:-) 只是模拟如果名字字段为空会发生什么，请单击提交并查看：-)

The code following under that is the PHP code, this will work with this Html, JS, just the JS needs bit amendment, if you want, i will do that for you. 下面的代码是PHP代码，它将与该Html，JS一起使用，只是JS需要进行一些修改，如果您愿意，我会为您完成。

http://codepen.io/damianocel/pen/dYKBNL http://codepen.io/damianocel/pen/dYKBNL

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-11-01 18:27:03

解决方案2
0 2015-11-01 21:00:14

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-11-01 18:27:03

解决方案2 0 2015-11-01 21:00:14

解决方案1
0 已采纳 2015-11-01 18:27:03

解决方案2
0 2015-11-01 21:00:14