1
Ich arbeite mit einem Formular für meine Klasse und der Punkt des Formulars ist, dass, wenn wir einen Radio-Button (Optionsfeld) mit Haupt-Campus oder Norden klicken es Informationen innerhalb des Formulars mit Javascript.Javascript Event Listener Funktion
Mein Problem, das ich habe, ist, dass ich zwei Event-Listener habe, von denen einer meine Funktion für den Haupt-Campus-Klick und einen für den Norden nutzt. Wenn Sie jedoch auf ein Optionsfeld klicken, werden nur Informationen von der Funktion, die Norden ist, ausgefüllt. Ich werde den folgenden Code einfügen.
Wenn Sie mein Problem replizieren möchten, nehmen Sie einfach den Code und klicken Sie auf die Optionsfelder, um zu sehen, wie sich die Information nicht ändert.
<!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);
Ich möchte nicht all das Zeug lesen oder sogar durchblättern. Können Sie bitte den Code auf die relevanten Teile reduzieren? – Thomas
Sie müssen nicht den Code lesen thomas Ich biete es nur so, dass Sie replizieren können, was ich sehe im Allgemeinen alles, was Sie wirklich brauchen, ist mein Javascript-Code –