我想知道如何将“消息”div 更改为黄色。下面是我的 js、html 和 css 文件。另外，我想知道如何进行数据验证。 Male 这个词没有打印出来，只有字母 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;
}
最佳答案
首先，消息 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");
关于JavaScript-如何将 "message"div 更改为黄色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33465155/