0
以下のコードに問題があります。これは、idを持つページ上のセクションを返すことになっているので、私はidを削除し、それを不可視の別のセクションに渡して、新しいものを見えるようにします。これらは、クリックイベントハンドラに関連付けられています。何が起こるかは、次のウィンドウが数秒間現れて消えてしまうことです。私はそれを必要とし、次のボタンをクリックすると次のセクションが表示されます。 ループと何か関係があるかもしれないと思っていますが、何が分かりません。私は何が欠けていますか？要素が表示されてループが消えるようにする
編集：HTML、CSS JSのすべてが追加されましたので、すべてがそこにあります。
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;
}
これは私が信じることを処理する方法ではありません。あなたの要素を識別するためにid属性を使用します。次に、 '表示'スタイルを使用してそれを隠す/表示します。または、クラスを使用します。あなたが 'not-that-id'要素のためのスタイリングを持っていないので、おそらく消えています。あなたのCSSで設定します：＃section-id .visible {display：block;}＃section-id {display：none;}、要素から可視クラスを削除します。 –