javascript事件监听器功能

时间：2017-04-30 19:36:51

标签： javascript

我正在为我的班级使用表单，表单的要点是当我们点击主校园或北方的单选按钮（选项按钮）时，它会使用javascript在表单中填充信息。

我遇到的问题是我有两个事件监听器，一个使用我的功能用于主校园点击，一个用于北部。但是，当您单击任何单选按钮时，只会填充北方函数的信息。我将在下面提供代码。

如果你想复制我的问题，只需拿走代码并点击单选按钮，看看信息是如何变化的。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>T.A.S.K. Pet Products</title>
        <!-- 
         Author:  YOUR NAME 
        -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <script src="modernizr.custom.40753.js"></script>
        <link rel="stylesheet" href="projectm.css">
    </head>
    <body>
        <div class="container">
        <h1>T.A.S.K. Pet Products by YOUR NAME</h1>
        <article id="contentstart">
            <h2>Customer Information</h2>
                <form action="results.html">
                    <fieldset class="name-info">
                        <label for="fnameinput">
                            First name
                            <input type="text" id="fnameinput" name="fnameinput">
                        </label>
                        <label for="lnameinput">
                            Last name
                            <input type="text" id="lnameinput" name="lnameinput">
                        </label>
                    </fieldset>
                    <fieldset class="address-options">
                        <legend>Please select default T.A.S.K. location.</legend>
                        <div class="two-column">
                            <input type="radio" id="main" name="taskaddress">
                            <label for="main">Main Location</label>
                        </div>
                        <div class="two-column">
                            <input type="radio" id="north" name="taskaddress">
                           <label for="north">North Location</label>
                        </div>
                    </fieldset>
                    <fieldset class="contact-info">
                        <label for="streetinput">
                            Street Address
                            <input type="text" id="streetinput" name="streetinput">
                        </label>
                        <label for="cityinput">
                            City
                            <input type="text" id="cityinput" name="cityinput">
                        </label>
                        <label for="stateinput">
                            State
                            <input type="text" id="stateinput" name="stateinput">
                        </label>
                        <label for="zipinput">
                            Zip
                        <input type="text" id="zipinput" name="zipinput">
                        </label>
                    </fieldset>
                    <fieldset class="submitbutton">
                        <input type="submit" id="submit" value="Submit">
                    </fieldset>
                </form>
            </article>
            <aside>
                 <h3>What&rsquo;s New for your Pet</h3>
                 <img src="images/pets.jpg">
                 <p>Sponge chew toys</p>
                 <p>Special Leashes</p>
                 <p>Glow Collars</p>
                 <p>Diet Food</p>
                 <p>Veggie Treats</p>
                 <p>Cushy Beds </p>
                 <p>Grooming Brushes</p>
                 <p>Bowls and Dishes</p>
            </aside>
            <footer>
                 <p>Helping you help you pets &bull; (623) 555-4321</p>
            </footer>
        </div>  
        <script src="projectm.js"></script>
    </body>
</html>


html {
   font-size: 20px;
}
a, article, body, div, fieldset, figcaption, figure, footer, form, header, h1, 
h2, h3, img, input, label, legend, li, nav, p, section, textarea, ul {
   border: 0;
   padding: 0;
   margin: 0;
}
img {
   max-width: 100%;
   height: auto;
   width: auto;
   padding-left: 2em;
}

/* body and page container */
body {
   font-family: "Alegreya Sans", Arial, Helvetica, sans-serif;
}

.container {
 /*  background-color: #a17f43; */
   max-width: 1000px;
   margin: 0 auto;
   overflow: auto;
   border: 2px solid olive;
   border-radius: 15px;
   background: rgb(140,198,63);
}

h1, h2, h3, p {
   font-family: Verdana, Geneva, sans-serif;
} 

h1 {
   text-align: center;
   font-size: 1.6em;
   padding: 1%;
}

h2 {
   font-size: 1.2em;
   padding-bottom: 2%;
}
h3 {
   padding-bottom: 2%;
   font-size: 1em;
   font-style: italic;
   text-align: center;
}

/* main content */
article {
   width: 62%;
   padding-left: 1.4em;
   padding-top: 2%;
   float: left;
   background-color: #ffff99;
}

/* sidebar */
aside {
   padding: 2%;
   width: 31%;
   float: right;
   background-color: #c8f098;
}
aside p {
   padding-left: 2em;
}

/* form styles */
form {
   font-family: Arial, Helvetica, sans-serif;
}
.two-column {
   width: 46%;
   padding: 2%;
   float: left;
}
.two-column label {
   margin-left: 1em;
   font-weight: bold;
}
.two-column p:first-of-type {
   padding-top: 0.6em;
}

/* fieldset styles */
fieldset {
   padding: 0 2% 1em;
}
legend {
   font-size: 1.2em;
   font-weight: bold;
}
.submitbutton {
   text-align: center;
   display: none;
}
.show {
   display: block;
}

/* field styles */
input {
   border: 1px solid #ccc;
   margin-bottom: 0.2em;
   padding: 0.1em;
   font-size: 1em;
}
.contact-info input {
   display: inline-block;
   position: absolute;
   left: 8em;
}
#lnameinput, #streetinput { width: 15em; }
#fnameinput, #cityinput { width: 10em; }
#stateinput { width: 2em; }
#zipinput { width: 5em; }
#signup {
   padding: 0.2em;
   border: 3px solid black;
   font-size: 1.2em;
   border-radius: 10px;
   background-color: rgb(246,224,65);
}
#submit {
   padding: 0.4em 0.6em;
   margin: 0;
   display: inline-block;
   font-size: 1em;
   background-color: rgb(170,189,126);
   border-radius: 10px;
}

/* label styles */
label {
   padding-top: 0.2em;
   font-size: 1.1em;
}
.name-info label {
   display: block;
   position: relative;
   margin-bottom: 0.4em;
}
.contact-info label {
   display: block;
   position: relative;
   margin-bottom: 0.4em;
}

/* footer section */
footer {
   padding: 0.6em;
   background-color: black;
   color: floralwhite;
   text-align: center;
   clear: both;
}
footer p {
   margin: 0.4em;
}

var mainOption = document.querySelector("#main");
var northOption = document.querySelector("#north");
var streetInput = document.querySelector("#streetinput");
var cityInput = document.querySelector("#cityinput");
var stateInput = document.querySelector("#stateinput");
var zipInput = document.querySelector("#zipinput");
var submitButton = document.querySelector(".submitbutton");


var form = document.querySelector("form");

var submitButton = document.querySelector(".submitbutton");



/* selectMain function - populates form fields with Main address information */

function selectMain() {
        streetInput.value = "6000 W Olive Ave";
        cityInput.value = "Glendale";
        stateInput.value = "AZ";
        zipInput.value = "85302";

        if (form.checkValidity() === true) {
            submitButton.className = "submitbutton show";
        }

}





/* selectNorth function - populate form fields with North address information */


function selectNorth () {
    streetInput.value = "5727 West Happy Valley Road";
    cityInput.value = "Phoenix";
    stateInput.value = "AZ";
    zipInput.value = "85310";

    if (form.checkValidity() === true) {
            submitButton.className = "submitbutton show";
        }


}


/* Create event listeners for button clicks */

form.addEventListener("click", selectMain, false);
form.addEventListener("click", selectNorth, false);

1 个答案:

答案 0 :(得分：0)

您正在为整个click标记指定form听众，这就是您点击的位置无关紧要的原因，它总是将输入中的新内容与您{ {1}}函数，即分配给它的最后一个selectNorth()，尝试使用：

addEventListener

请参阅：

document.getElementById('main').addEventListener("click", selectMain, false);
document.getElementById('north').addEventListener("click", selectNorth, false);

  let mainOption = document.querySelector("#main"),
    northOption   = document.querySelector("#north"),
    streetInput   = document.querySelector("#streetinput"),
    cityInput     = document.querySelector("#cityinput"),
    stateInput    = document.querySelector("#stateinput"),
    zipInput      = document.querySelector("#zipinput"),
    submitButton  = document.querySelector(".submitbutton"),
    form          = document.querySelector("form");

  /* selectMain function - populates form fields with Main address information */
  function selectMain() {
    streetInput.value = '6000 W Olive Ave';
    cityInput.value   = 'Glendale';
    stateInput.value  = 'AZ';
    zipInput.value    = '85302';
    if (form.checkValidity() === true) {
      submitButton.className = 'submitbutton show';
    }    
  }

  /* selectNorth function - populate form fields with North address information */
  function selectNorth () {
    streetInput.value = '5727 West Happy Valley Road';
    cityInput.value   = 'Phoenix';
    stateInput.value  = 'AZ';
    zipInput.value    = '85310';
    if (form.checkValidity() === true) {
      submitButton.className = 'submitbutton show';
    }    
  }

  /* Create event listeners for button clicks */
  document.getElementById('main').addEventListener( 'click', selectMain, false);
  document.getElementById('north').addEventListener('click', selectNorth, false);
html {
       font-size: 20px;
    }
    a, article, body, div, fieldset, figcaption, figure, footer, form, header, h1, 
    h2, h3, img, input, label, legend, li, nav, p, section, textarea, ul {
       border: 0;
       padding: 0;
       margin: 0;
    }
    img {
       max-width: 100%;
       height: auto;
       width: auto;
       padding-left: 2em;
    }

    /* body and page container */
    body {
       font-family: "Alegreya Sans", Arial, Helvetica, sans-serif;
    }

    .container {
     /*  background-color: #a17f43; */
       max-width: 1000px;
       margin: 0 auto;
       overflow: auto;
       border: 2px solid olive;
       border-radius: 15px;
       background: rgb(140,198,63);
    }

    h1, h2, h3, p {
       font-family: Verdana, Geneva, sans-serif;
    } 

    h1 {
       text-align: center;
       font-size: 1.6em;
       padding: 1%;
    }

    h2 {
       font-size: 1.2em;
       padding-bottom: 2%;
    }
    h3 {
       padding-bottom: 2%;
       font-size: 1em;
       font-style: italic;
       text-align: center;
    }

    /* main content */
    article {
       width: 62%;
       padding-left: 1.4em;
       padding-top: 2%;
       float: left;
       background-color: #ffff99;
    }

    /* sidebar */
    aside {
       padding: 2%;
       width: 31%;
       float: right;
       background-color: #c8f098;
    }
    aside p {
       padding-left: 2em;
    }

    /* form styles */
    form {
       font-family: Arial, Helvetica, sans-serif;
    }
    .two-column {
       width: 46%;
       padding: 2%;
       float: left;
    }
    .two-column label {
       margin-left: 1em;
       font-weight: bold;
    }
    .two-column p:first-of-type {
       padding-top: 0.6em;
    }

    /* fieldset styles */
    fieldset {
       padding: 0 2% 1em;
    }
    legend {
       font-size: 1.2em;
       font-weight: bold;
    }
    .submitbutton {
       text-align: center;
       display: none;
    }
    .show {
       display: block;
    }

    /* field styles */
    input {
       border: 1px solid #ccc;
       margin-bottom: 0.2em;
       padding: 0.1em;
       font-size: 1em;
    }
    .contact-info input {
       display: inline-block;
       position: absolute;
       left: 8em;
    }
    #lnameinput, #streetinput { width: 15em; }
    #fnameinput, #cityinput { width: 10em; }
    #stateinput { width: 2em; }
    #zipinput { width: 5em; }
    #signup {
       padding: 0.2em;
       border: 3px solid black;
       font-size: 1.2em;
       border-radius: 10px;
       background-color: rgb(246,224,65);
    }
    #submit {
       padding: 0.4em 0.6em;
       margin: 0;
       display: inline-block;
       font-size: 1em;
       background-color: rgb(170,189,126);
       border-radius: 10px;
    }

    /* label styles */
    label {
       padding-top: 0.2em;
       font-size: 1.1em;
    }
    .name-info label {
       display: block;
       position: relative;
       margin-bottom: 0.4em;
    }
    .contact-info label {
       display: block;
       position: relative;
       margin-bottom: 0.4em;
    }

    /* footer section */
    footer {
       padding: 0.6em;
       background-color: black;
       color: floralwhite;
       text-align: center;
       clear: both;
    }
    footer p {
       margin: 0.4em;
    }

相关问题
最新问题