[英]JavaScript- How to change “message” div to yellow
我想知道如何将“消息” 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;
}
首先,消息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");
我不确定这是否是您要的内容,我想对div消息来说,您的意思是文本区域。
无论哪种方式,我都修改了您的代码,一般而言,您不需要doc.ready()进行提交。
我的注释掉的JS功能齐全,可以正常工作,代码在29-32行
$("#mysubmit").click(function(){
$(".spanFirst").fadeIn(1000).fadeOut(2300);
});
只是模拟如果名字字段为空会发生什么,请单击提交并查看:-)
下面的代码是PHP代码,它将与该Html,JS一起使用,只是JS需要进行一些修改,如果您愿意,我会为您完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.