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

时间：2019-11-11 21:02:13

标签： javascript html css

在JavaScript中，我试图检查必填字段是否为空。我正在遍历数组，并尝试在输入字段为空的情况下更改输入字段的背景。

但是这样做没有按预期进行。

using UnityEngine;

public class Example : MonoBehaviour
{
    public GameObject target;

    void Reset()
    {
        //Output the message to the Console
        Debug.Log("Reset");
        if (!target)
            target = GameObject.FindWithTag("Player");
    }
}

这是我的HTML文件

document.getElementById(String(fields[i])).style.color("red");

这是我的css文件

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

2 个答案:

答案 0 :(得分：1)

您不能以这种方式使用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>

答案 1 :(得分：0)

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;
        }
    }
}
相关问题
最新问题