1
我正在爲我的課程使用表單，而表單的要點是當我們單擊主校園或北部的單選按鈕（選項按鈕）時，它會在使用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’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 • (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);
不想閱讀所有內容，甚至不想滾動瀏覽。你能否將代碼縮減到相關部分。 – Thomas
你不必閱讀代碼托馬斯我只是提供它，所以你可以複製我通常看到的所有你真正需要看的是我的javascript代碼 –