Fatal编程技术网
  • javascript/
  • 使用循环更改Javascript中的背景色

使用循环更改Javascript中的背景色

javascript html css

使用循环更改Javascript中的背景色,javascript,html,css,Javascript,Html,Css,在JavaScript中，我试图检查必填字段是否为空。我在数组上循环，如果输入字段为空，则尝试更改输入字段的背景 然而，这样做并不像预期的那样有效 document.getElementById(String(fields[i])).style.color("red"); 这是我的Html文件 <!DOCTYPE html> <html lang="en"> <head> <title>Contact Us</title>

在JavaScript中，我试图检查必填字段是否为空。我在数组上循环，如果输入字段为空，则尝试更改输入字段的背景

然而，这样做并不像预期的那样有效

document.getElementById(String(fields[i])).style.color("red");
这是我的Html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact Us</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/contact_form.css">
    <script type='text/javascript'>
        function validateForm() {
            var fname = document.forms["_contact_form"]["fname"].value;
            var lname = document.forms["_contact_form"]["lname"].value;
            var email = document.forms["_contact_form"]["email"].value;
            var input_message = document.forms["_contact_form"]["input_message"].value;


            var fields = new Array;
            var fields = [fname, lname, email, input_message];

            for (i=0;i<fields.length;i++){

                if (fields[i].length == 0){
                    alert("Please Fill The Required Fields");
                    document.getElementById(String(fields[i])).style.color("red");
                    return false;

            }
        }
    }

    </script>
</head>
<body>
    <div class="container">
        <div class="form-wrap">
            <div class="contact-title">
                <div id="circle-container">
                        <div id="circle-effect">
                        <div class="circle" id="fifthLayer"></div>
                        <div class="circle" id="fourthLayer"></div>
                        <div class="circle" id="thirdLayer"></div>
                        <div class="circle" id="secondLayer"></div>
                        <div class="circle" id="firstLayer">Contact Me!</div>
                        </div>
                    </div>
            </div>

            <form name = "_contact_form" class="contact-form" onsubmit="return validateForm()" action="contactform.php" method="POST">
                <div class="div-input-form">
                    <label class="input-label">First Name: </label>
                    <input id="fname" class="user-input" type="text" name="firstName" placeholder="First Name">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Last Name: </label>
                    <input id = "lname" class="user-input" type="text" name="lastName" placeholder="Last Name">

                </div>

                <div class="div-input-form">
                    <label class="input-label">Email: *</label>
                    <input id = "email" class="user-input" type="text" name="email" placeholder="Enter email addess">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Phone:</label>
                    <input class="user-input" type="text" name="phone" placeholder="Enter phone number">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Gender:</label>
                    <input type="radio" class="radio-radio" name = "gender" value="Male"> Male </br>
                    <input type="radio" class="radio-radio" name = "gender" value="Female"> Female </br>
                    <input type="radio" class="radio-radio" name = "gender" value="Other"> Other </br> </br>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Occupation:</label>
                    <select name = "dropdown" class="select-occ">
                        <option value="Student">Student</option>
                        <option value="Teacher">Teacher</option>
                    </select>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Age:</label>
                    <input type="radio" class="radio-radio" name = "age" value="18orBelow"> 15 or Below </br>
                    <input type="radio" class="radio-radio" name = "age" value="19to21"> 16 to 20 </br>
                    <input type="radio" class="radio-radio" name = "age" value="21orAbove"> 21 or above </br> </br>
                </div>

                <div class="div-input-form">
                </br>
                    <label class="input-label">How Did You Hear About Us:</label>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Internet Search<br>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Friends or Family<br>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Other<br> </br>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Message: *</label>
                    <textarea id="input_message" class="user-input" name="message" placeholder="Your Comment..."></textarea>
                </div>

                <div class="div-submit-button" >
                    <button id ='submit' name = 'submit-button' class="submit-button">Submit</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
你不能那样使用
style.color
。您正在尝试更改数组中项目的颜色，而不是项目本身的颜色。而且这不是改变背景颜色的方法。我向必需元素添加了一个名为
required
的类。然后我得到了这些项目，并在
for循环中使用它们。这可能不是获得答案的最佳方式，但你会想要这样的答案。我添加了用于确定需要在
警报中填充哪个错误字段的功能。如果您确实填写了错误，则在下次提交表单时，红色背景将消失。希望这能帮助你走上正轨



*{
边际：0px；
填充：0px；
框大小：边框框；
}
正文，html{
背景：#DCD8D7；
身高：100%；
字体系列：Helvetica，无衬线；
}
p{
字体系列：Helvetica；
字体大小：14px；
线高：1.7；
颜色：#616060；
边际：0px；
}
输入{
大纲：无；
边界：无；
}
文本区{
大纲：无；
边界：无；
}
.集装箱{
宽度：100%；
最小高度：100vh；
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
填充：10px；
背景：透明；
位置：相对位置；
}
.表格包装{
宽度：770px；
背景：#fff；
边界半径：10px；
溢出：隐藏；
位置：相对位置；
}
.联系方式{
宽度：100%；
位置：相对位置；
z指数：1；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
对齐项目：居中；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
填充：64px 15px 64px 15px；
}
.联系人姓名：：之前{
内容：“；
显示：块；
位置：绝对位置；
z指数：-1；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景色：rgba（54,84,99,0.7）；
}
.联络表格{
宽度：100%；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
填充：43px 88px 57px 190px；
}
.div输入表格{
宽度：100%；
位置：相对位置；
边框底部：1px实心#b2b2b2；
边缘底部：26px；
}
.输入标签{
字体系列：Helvetica；
字体大小：15px；
颜色：#808080；
线高：1.2；
文本对齐：右对齐；
位置：绝对位置；
顶部：14px；
左：-105px；
宽度：80px；
}
.用户输入{
字体系列：Helvetica；
字体大小：15px；
颜色：#525050；
线高：1.4；
显示：块；
宽度：100%；
背景：透明；
填充：0 5px；
}
用户输入{
高度：45px；
}
textarea.user-input{
最小高度：115px；
填充顶部：14px；
填充底部：13px；
}
.div提交按钮{
宽度：100%；
显示器：flex；
柔性包装：包装；
填充顶部：8px；
}
.提交按钮{
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：0 20px；
最小宽度：160px；
宽度：100%；
高度：50px；
背景色：#3b88bb；
边界半径：25px；
字体系列：Helvetica；
字体大小：16px；
颜色：白色；
线高：1.2；
}
.无线电广播
{
-webkit外观：无；
外观：无；
显示：内联块；
位置：相对位置；
背景色：#f1f1；
颜色：rgb（92,91,91）；
顶部：10px；
高度：25px；
宽度：25px；
边界：0；
边界半径：40px；
光标：指针；
右边距：7px；
大纲：无；
}
.收音机：选中：：之前
{
位置：绝对位置；
字体：13px/1“开放式Sans”，无衬线；
左：8px；
顶部：5px；
内容：'\02143'；
变换：旋转（40度）；
}
.复选框
{
边界半径：5px；
显示：内联块；
右边距：7px；
高度：10px；
宽度：10px；
}
.选择occ{
显示：块；
字体大小：14px；
字体系列：无衬线；
字号：700；
颜色：rgb（53,51,51）；
线高：1.5；
填充：7px；
宽度：100%；
最大宽度：100%；
框大小：边框框；
保证金：0；
边框：1px实心#aaa；
盒影：0 1px 0 1px rgba（0,0,0,04）；
边界半径：10px；
-moz外观：无；
-webkit外观：无；
背景色：#fff；
背景重复：不重复，重复；
背景位置：右。7em顶部50%，0；
背景尺寸：.65em自动，100%；
}
#圆形容器{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：35vw；
高度：35vh；
位置：相对位置；
}
.圆圈{
宽度：30vh；
高度：30vh；
位置：绝对位置；
边界半径：50%；
}
#第一层{
字体大小：23px；
字体系列：“奥斯瓦尔德”，无衬线；
字母间距：1.5px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
颜色：白色；
字体大小：粗体；
过渡：1s；
}
#第二层{
背景色：#CCCCFF；
过渡：1s；
不透明度：0.5；
}
#第三层{
背景色：黑色；
过渡：1s；
不透明度：0.5；
}
#第四层{
背景颜色：矢车菊蓝；
过渡：1s；
不透明度：0.5；
}
#第五层{
背景色：#FFFF99；
过渡：1s；
不透明度：0.5；
}
#循环效应{
位置：相对位置；
宽度：30vh；
高度：30vh；
边界半径：50%；
溢出：隐藏；
}
#圆圈效果：悬停#第二层{
转换：转换（0px，75px）；
}
#圆圈效果：悬停#第三层{
转换：转换（0px，-75px）；
}
#圆圈效果：悬停#第四层{
转换：转换（75px，0px）；
}
#圆圈效果：悬停#第五层{
转换：转换（-75px，0px）；
}



联系我们
函数validateForm（）{
var fname=document.forms[“\u contact\u form”][“fname”].value；
var lname=document.forms[

* {
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box;
}

body, html {
  background: #DCD8D7;
    height: 100%;
    font-family: Helvetica, sans-serif;
}

p {
    font-family: Helvetica;
    font-size: 14px;
    line-height: 1.7;
    color: #616060;
    margin: 0px;
}

input {
    outline: none;
    border: none;
}

textarea {
  outline: none;
  border: none;
}

.container {
  width: 100%;  
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: transparent;
  position: relative;
}

.form-wrap {
  width: 770px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.contact-title {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 64px 15px 64px 15px;
}

.contact-title::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(54,84,99,0.7);
}

.contact-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 43px 88px 57px 190px;
}

.div-input-form {
  width: 100%;
  position: relative;
  border-bottom: 1px solid #b2b2b2;
  margin-bottom: 26px;
}

.input-label {
  font-family: Helvetica;
  font-size: 15px;
  color: #808080;
  line-height: 1.2;
  text-align: right;

  position: absolute;
  top: 14px;
  left: -105px;
  width: 80px;
}

.user-input {
  font-family: Helvetica;
  font-size: 15px;
  color: #525050;
  line-height: 1.4;
  display: block;
  width: 100%;
  background: transparent;
  padding: 0 5px;
}

input.user-input {
  height: 45px;
}

textarea.user-input {
  min-height: 115px;
  padding-top: 14px;
  padding-bottom: 13px;
}

.div-submit-button {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 8px;
}

.submit-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 160px;
  width: 100%;
  height: 50px;
  background-color: #3b88bb;
  border-radius: 25px;
  font-family: Helvetica;
  font-size: 16px;
  color: white;
  line-height: 1.2;
}

.radio-radio
{
     -webkit-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #f1f1f1;
     color: rgb(92, 91, 91);
     top: 10px;
     height: 25px;
     width: 25px;
     border: 0;
     border-radius: 40px;
     cursor: pointer;     
     margin-right: 7px;
     outline: none;
}
.radio-radio:checked::before
{
     position: absolute;
     font: 13px/1 'Open Sans', sans-serif;
     left: 8px;
     top: 5px;
     content: '\02143';
     transform: rotate(40deg);
}

.checkbox
{
     border-radius: 5px;
     display: inline-block;
     margin-right: 7px;
     height: 10px;
     width: 10px;
}

.select-occ {
  display: block;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 700;
    color: rgb(53, 51, 51);
    line-height: 1.5;
    padding: 7px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

#circle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35vw;
    height: 35vh;
    position:relative;
}

.circle {
  width: 30vh;
    height: 30vh;
    position: absolute;
    border-radius: 50%;
}

#firstLayer {
    font-size: 23px;
    font-family: "Oswald", sans-serif;
    letter-spacing: 1.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    transition: 1s;
}

#secondLayer {
    background-color: #CCCCFF   ;
    transition: 1s;
    opacity: 0.5;
}

#thirdLayer {
    background-color: black;
    transition: 1s;
    opacity: 0.5;
}

#fourthLayer {
    background-color: cornflowerblue;
    transition: 1s;
    opacity: 0.5;
}
#fifthLayer {
    background-color: #FFFF99;
    transition: 1s;
    opacity: 0.5;
}

#circle-effect {
    position:relative;
    width: 30vh;
    height: 30vh;
    border-radius: 50%;
    overflow: hidden;
}

#circle-effect:hover #secondLayer {
    transform: translate(0px, 75px);
}
#circle-effect:hover #thirdLayer {
    transform: translate(0px, -75px);
}
#circle-effect:hover #fourthLayer {
    transform: translate(75px, 0px);
}
#circle-effect:hover #fifthLayer {
    transform: translate(-75px, 0px);
}



function validateForm() {

    var fields = [{name:'fname', value:''}, {name:'lname', value:''}, {name:'email', value:''}, {name:'input_message', value:''}];

    fields[0].value = document.forms["_contact_form"]["lname"].value;
    fields[1].value = document.forms["_contact_form"]["email"].value;
    fields[2].value = document.forms["_contact_form"]["input_message"].value;

    for (i=0;i<fields.length;i++){
        if (fields[i].value.length == 0) {
            alert("Please Fill The Required Fields");
            document.getElementById(fields[i].name).style.color("red");
            return false;
        }
    }
}