1
私のクラスのフォームで作業しています。フォームのポイントは、メインキャンパスまたは北にラジオボタン（オプションボタン）をクリックすると、JavaScript内でフォームに情報が入力されることです。javascriptイベントリスナー関数
私の問題は、メインキャンパスクリックと北向きの2つのイベントリスナーがあることです。しかし、任意のラジオボタンをクリックすると、北の機能からの情報のみが入力されます。以下のコードを追加します。
問題を複製する場合は、コードを入力してラジオボタンをクリックし、情報がどのように変化しないかを確認してください。
<!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コードです。 –