0
Ich habe ein Problem mit dem folgenden Code. Das soll den Abschnitt auf der Seite zurückbringen, die eine ID hat, also kann ich die ID dann entfernen und sie einem anderen Abschnitt geben, der unsichtbar ist, den neuen sichtbar machend. Diese sind an einen click eventhandler gebunden. Was passiert, ist, dass das nächste Fenster für einen Bruchteil einer Sekunde erscheint und dann verschwindet. Ich brauche es, um zu bleiben, und beim nächsten Klick auf die Schaltfläche sollte der nächste Abschnitt erscheinen usw. Ich glaube, es könnte etwas mit der Schleife zu tun haben, aber ich kann nicht herausfinden, was. Was vermisse ich?Elemente erscheinen und verschwinden Schleife
Edit: Ich fügte alles HTML, CSS JS jetzt so alles ist da.
JS
var sections = document.querySelectorAll("section");
var btns = document.querySelector("input[type='submit']");
//*
This part should switch to the next ingredient selection
*//
function next(){
var i=0;
while (i+1 <= sections.length) {
if (sections[i].hasAttribute ("id")) {
sections[i].removeAttribute("id");
i=i+1;
sections[i].setAttribute("id","visible");
break;
} }}
btns.addEventListener('click', next);
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pete's Pizzeria</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Mr+Dafoe|Nothing+You+Could+Do|Yellowtail|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="mainh1">Pete's pizzeria</h1>
<main>
<section id="visible">
<header>
<h1>Choose your size!</h1>
</header>
<form>
<p>Personal<input type="radio" name="size" value="personal" checked><span class="price" data-price="6">$6.00</span> </p>
<p>Medium<input type="radio" name="size" value="medium"><span class="price" value=10>$10.00</span> </p>
<p>Large<input type="radio" name="size" value="large"><span class="price" data-price="14">$14.00</span></p>
<p>Extra Large <input type="radio" name="size" value="extralarge"><span class="price" data-price="16">$16.00</span></p>
<input type="submit" value="Next">
</form>
</section>
<section>
<header>
<h1>Nice to meat you!</h1>
<p>The first meat item is complimentary. All additional meat items cost $1 each.</p>
</header>
<form>
<p>Pepperoni<input type="checkbox" name="meat" value="pepperoni" checked></p>
<p>Sausage<input type="checkbox" name="meat" value="sausage" ></p>
<p>Canadian Bacon<input type="checkbox" name="meat" value="canadianBacon" ></p>
<p>Ground Beef <input type="checkbox" name="meat" value="groundBeef"></p>
<p>Anchovy <input type="checkbox" name="meat" value="anchovy"></p>
<p>Chicken <input type="checkbox" name="meat" value="chicken"></p>
<input type="submit" value="Next">
</form>
</section>
<section>
<header>
<h1>How cheesy<br>are you?</h1>
</header>
<form>
<p>Regular<input type="radio" name="cheese" value="regularcheese" checked></p>
<p>No cheese<input type="radio" name="cheese" value="nocheese" ></p>
<p>Extra Cheese <span data-price="3">(+$3.00)</span><input type="radio" name="cheese" value="extracheese"></p> <input type="submit" value="Next">
</form>
</section>
<section>
<header>
<h1>Everyone bites<br>the crust</h1>
</header>
<form>
<p>Plain Crust<input type="radio" name="crust" value="plainCrust" checked></p>
<p>Garlic Butter Crust<input type="radio" name="crust" value="garlicButterCrust" ></p>
<p>Cheese Stuffed Crust <span data-price="3">(+$3.00)</span><input type="radio" name="crust" value="cheeseStuffedCrust" ></p>
<p>Spicy Crust<input type="radio" name="crust" value="spicyCrust"></p>
<p>House Special Crust<input type="radio" name="crust" value="houseSpecialCrust"></p>
<input type="submit" value="Next">
</form>
</section>
<section>
<header>
<h1>Our pizzas are saucy</h1>
</header>
<form>
<p>Marinara sauce<input type="radio" name="sauce" value="marinaraSauce" checked></p>
<p>White sauce<input type="radio" name="sauce" value="garlicButterCrust" ></p>
<p>Barbeque sauce<input type="radio" name="sauce" value="BBQsauce" ></p>
<p>No Sauce<input type="radio" name="sauce" value="noSauce"></p>
<input type="submit" value="Next">
</form>
</section>
<section>
<form>
<header>
<h1>Always eat your veggies</h1>
The first type of veggie is complimentary. All additional veggie items cost $1 each.
</header>
<p>Tomatoes<input type="checkbox" name="veggies" value="tomatoes" checked></p>
<p>Onions<input type="checkbox" name="veggies" value="onions" ></p>
<p>Olives<input type="checkbox" name="veggies" value="olives" ></p>
<p>Green Peppers<input type="checkbox" name="veggies" value="greenPeppers"></p>
<p>Mushrooms<input type="checkbox" name="veggies" value="mushrooms"></p>
<p>Pineapple <input type="checkbox" name="veggies" value="pineapple"></p>
<p>Spinach <input type="checkbox" name="veggies" value="spinach"></p>
<p>Jalapeno <input type="checkbox" name="veggies" value="jalapeno"></p>
<input type="submit" value="Next">
</form>
</section>
<section id="tally">
<h1>The bottom line</h1>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
<p>testPizzaIngredient <span>$10</span></p>
</section>
</main>
<script src="scripts.js"></script>
</body>
</html>
CSS
body {
margin: 0 0 auto auto;
background-image: url(images/food-pizza-box-chalkboard.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
font-family: 'Roboto', sans-serif;
}
/*
==============================================================
Pete's pizzera title
==============================================================
*/
#mainh1 {
font-family: 'Nothing You Could Do', cursive;
color: white;
position: absolute;
top: 2rem;
left: 3rem;
font-size: 2.5rem;
text-shadow: 1px 1px 2px #ffffff;
}
/*
==============================================================
The box with the content
==============================================================
*/
section {
background-color: rgba(255,255,255,0.5);
position: absolute;
top:0 0;
margin-left: 3rem;
margin-top: 8rem;
padding: 1.5rem;
border-radius: 15px;
border: 5px solid rgba(232, 232, 232,0.5);
width: 15rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
display: none;}
/*
==============================================================
The class that will hide all boxes unless the person clicks on next, in which case the next is going to appear.
==============================================================
*/
#visible {
display: block;
}
/*The title of the box*/
h1 {
font-family: 'Nothing You Could Do', cursive;
font-size: 1.7rem;
margin:0;
}
/*
==============================================================
aligning the check and radio buttons vertically
==============================================================
*/
input[type="checkbox"],input[type="radio"]{
display: inline-block;
position: absolute;
right: 1rem;
}
/*
==============================================================
aligning the prices vertically
==============================================================
*/
span {
display: inline-block;
position: absolute;
right: 4rem;
}
/*
==============================================================
line-spacing of paragraphs in the forms
==============================================================
*/
form p {
padding: 0;
margin: 0.5rem;
}
/*
==============================================================
Formatting of the "Next" button
==============================================================
*/
input[type="submit"] {
width: 100px;
margin-top: 25px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
padding: 0.25rem;
}
/*
==============================================================
The box with the content
==============================================================
*/
#tally {
background-color: rgba(255,255,255,0.7);
position: absolute;
top:0;
right: 15rem;
padding: 1.5rem;
border-radius: 15px;
border: 5px solid rgba(232, 232, 232,0.5);
width: 15rem;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5)
}
#tally h1 {
top: 2rem;
}
#tally p {
margin: 0.3rem;
}
Dies ist nicht, wie Sie damit umgehen wollen, ich glaube ... Sie verwenden das ID-Attribut, um Ihr Element zu identifizieren. Dann verwenden Sie den "Display" -Stil, um es zu verstecken/zu enthüllen. Oder verwende eine Klasse. Es verschwindet wahrscheinlich, weil Sie kein Styling für "Nicht-die-ID" -Elemente haben. Legen Sie in Ihrem CSS fest: # section-id .visible {display: block;} # section-id {display: none;}, dann fügen Sie die sichtbare Klasse aus den Elementen hinzu. –