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

Jaoa 发表于 Dev

若阿

在 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>

这是我的 css 文件

* {
    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);
}

金11

你不能那样用style.color。您正在尝试更改数组中某个项目的颜色，而不是该项目本身。这也不是改变背景颜色的方法。我添加了一个调用required所需元素的类。然后我得到了这些项目并在for-loop. 这可能不是获得答案的最佳方式，但您会想要这样的东西。我添加了确定需要在alert错误中填充哪个错误字段的功能。如果您确实填充了错误，则在您下次提交表单时红色背景会消失。希望这可以帮助您走上正轨。

* {
    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);
}

<!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 = document.getElementsByClassName("required");
            for (i=0;i<fields.length;i++){

                if (fields[i].value === ""){
                 alert("Please Enter a " + fields[i].name );
                    fields[i].style.backgroundColor = "red";
                    }
                    else{
                    fields[i].style.backgroundColor = "";
                    
                    }
            }
             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 required" 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 required" 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 required" 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 required" 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>

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

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

编辑于 2021-07-29

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章

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

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

Linux的官方Adobe Flash存储库是否已过时？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

如何检查字符串输入的格式

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

Modbus Python施耐德PM5300

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

用日期数据透视表和日期顺序查询

检查嵌套列表中的长度是否相同

Java Eclipse中的错误13，如何解决？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

如何监视应用程序而不是单个进程的CPU使用率？

如何自动选择正确的键盘布局？-仅具有一个键盘布局

ES5的代理替代

在令牌内联程序集错误之前预期为 ')'

有什么解决方案可以将android设备用作Cast Receiver？

套接字无法检测到断开连接

如何在JavaScript中获取数组的第n个元素？

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

应用发明者仅从列表中选择一个随机项一次

在Windows 7中无法删除文件（2）

ggplot：对齐多个分面图-所有大小不同的分面