0
これはシンプルな4ステップのアイスクリームオーダープロセスです。 4番目のステップを完了すると、注文概要を印刷することが期待されますが、それはうまくいかないようです。すべての注文要約機能にconsole.logを実行すると、実行されていませんでした。どのステップが間違っていたのだろうか？誰かがこのJavascriptプリント注文サマリー機能が実行されていない理由を教えてもらえますか？
私がしようとしているのは、各ステップでユーザーの選択肢の価値を取得し、それらをまとめて注文要約テキストにすることです。
var order = document.getElementById('order');
var orderSummary = document.getElementById('order-summary');
var flavorOptions = document.getElementsByClassName('flavor');
function chooseFlavor() {
console.log("flavor is running");
var flavorChosen;
if (flavorOptions[0].checked == true) {
flavorChosen = flavorOptions[0].value;
} else if (flavorOptions[1].checked == true) {
flavorChosen = flavorOptions[1].value;
} else if (flavorOptions[2].checked == true) {
flavorChosen = flavorOptions[2].value;
} else if (flavorOptions[3].checked == true) {
flavorChosen = flavorOptions[3].value;
} else if (flavorOptions[4].checked == true) {
flavorChosen = flavorOptions[4].value;
} else if (flavorOptions[5].checked == true) {
flavorChosen = flavorOptions[5].value;
} else if (flavorOptions[6].checked == true) {
flavorChosen = flavorOptions[6].value;
} else if (flavorOptions[7].checked == true) {
flavorChosen = flavorOptions[7].value;
} else if (flavorOptions[8].checked == true) {
flavorChosen = flavorOptions[8].value;
}
}
var sauceOptions = document.getElementsByClassName('sauce');
function chooseSauce() {
console.log("sauce is running");
var sauceChosen;
if (sauceOptions[0].checked == true) {
sauceChosen = sauceOptions[0].value;
} else if (sauceOptions[1].checked == true) {
sauceChosen = sauceOptions[1].value;
} else if (sauceOptions[2].checked == true) {
sauceChosen = sauceOptions[2].value;
} else if (sauceOptions[3].checked == true) {
sauceChosen = sauceOptions[3].value;
}
}
var sprinklesOptions = document.getElementsByClassName('sprinkles');
function chooseSprinkles() {
console.log("sprinkles is running");
var sprinklesChosen;
if (sprinklesOptions[0].checked == true) {
sprinklesChosen = sprinklesOptions[0].value;
} else if (sprinklesOptions[1].checked == true) {
sprinklesChosen = sprinklesOptions[1].value;
} else if (sprinklesOptions[2].checked == true) {
sprinklesChosen = sprinklesOptions[2].value;
} else if (sprinklesOptions[3].checked == true) {
sprinklesChosen = sprinklesOptions[3].value;
}
}
var fruitsOptions = document.getElementsByClassName('fruits');
function chooseFruits() {
console.log("fruits is running");
var fruitsChosen;
if (fruitsOptions[0].checked == true) {
fruitsChosen = fruitsOptions[0].value;
} else if (fruitsOptions[1].checked == true) {
fruitsChosen = fruitsOptions[1].value;
} else if (fruitsOptions[2].checked == true) {
fruitsChosen = fruitsOptions[2].value;
} else if (fruitsOptions[3].checked == true) {
fruitsChosen = fruitsOptions[3].value;
} else if (fruitsOptions[4].checked == true) {
fruitsChosen = fruitsOptions[4].value;
} else if (fruitsOptions[5].checked == true) {
fruitsChosen = fruitsOptions[5].value;
}
}
order.addEventListener('click', printOrder);
function printOrder() {
console.log('order summary');
var orderText = 'You got a ' + flavorChosen + 'icecream with' + sauceChosen + ' ' + sprinklesChosen + 'and ' + fruitsChosen + '.'
var orderP = document.createElement('p');
orderP.innerHTML = orderText;
orderSummary.appendChild(orderP);
}<div class="main">
<div class="owl-carousel owl-theme">
<div class="options item">
<h1 class="steps">Step 1</h1>
<div class="question">What color are you wearing?</div>
<div class="first-set-options">
<button name="flavor" class="options-button flavor" value="strawberryflavor" data-text-swap="Pink" data-text-original="Strawberry">Pink</button>
<button name="flavor" class="options-button" value="chocolateflavor" data-text-swap="Brown" data-text-original="Chocolate">Brown</button>
<button name="flavor" class="options-button" value="vanillaflavor" data-text-swap="White" data-text-original="Vanilla">White</button>
<button name="flavor" class="options-button" value="cookiencreamflavor" data-text-swap="B&W" data-text-original="CookieNCream">B&W</button>
</div>
<div class="second-set-options">
<button name="flavor" class="options-button" value="raspberryflavor" data-text-swap="Red" data-text-original="Raspberry">Red</button>
<button name="flavor" class="options-button" value="mintchipsflavor" data-text-swap="Green" data-text-original="Mint Chips">Green</button>
<button name="flavor" class="options-button" value="peanutbutterflavor" data-text-swap="Yellow" data-text-original="Peanut Butter">Yellow</button>
<button name="flavor" class="options-button" value="coffeeflavor" data-text-swap="Black" data-text-original="Coffee">Black</button>
</div>
</div>
<div class="options item">
<h1 class="steps">Step 2</h1>
<div class="question">Whom do you want to have ice cream with right now?</div>
<div class="first-set-options">
<button name="sauce" class="options-button sauce" value="marshmellowsauce" data-text-swap="Marshmellow Man" data-text-original="Marshmellow Sauce">Marshmellow Man</button>
<button name="sauce" class="options-button" value="peanutbuttersauce" data-text-swap="Mr.Peanut Butter" data-text-original="Peanut Butter Sauce">MR. Peanut Butter</button>
</div>
<div class="second-set-options">
<button name="sauce" class="options-button" value="hotfudgesauce" data-text-swap="Willy Wonka" data-text-original="Hot Fudge Sauce">Willy Wonka</button>
<button name="sauce" class="options-button" value="nosauce" data-text-swap="Alone" data-text-original="No Sauce">Alone</button>
</div>
</div>
<div class="options item">
<h1 class="steps">Step 3</h1>
<div class="question">What's the weather like right now?</div>
<div class="first-set-options">
<button name="sprinkles" class="options-button sprinkles" value="yogurtchips" data-text-swap="Snow" data-text-original="Yogurt Chips">Snow</button>
<button name="sprinkles" class="options-button" value="chocolatechips" data-text-swap="Rainy" data-text-original="Chocolate Chips">Rainy</button>
</div>
<div class="second-set-options">
<button name="sprinkles" class="options-button" value="mm" data-text-swap="Sunny" data-text-original="M&M">Sunny</button>
<button name="sprinkles" class="options-button" value="coconutchips" data-text-swap="Cloudy" data-text-original="Coconut Chips">Cloudy</button>
</div>
</div>
<div class="options item">
<h1 class="steps">Step 4</h1>
<div class="question">How are you feeling right now?</div>
<div class="first-set-options">
<button id="order" name="fruits" class="options-button fruits" value="mango" data-text-swap="Angry" data-text-original="Mango">Angry</button>
<button id="order" name="fruits" class="options-button" value="pineapple" data-text-swap="Jealous" data-text-original="Pineapple">Jealous</button>
<button id="order" name="fruits" class="options-button" value="raspberry" data-text-swap="Upset" data-text-original="Raspberry">Upset</button>
<button id="order" name="fruits" class="options-button" value="blueberry" data-text-swap="Sad" data-text-original="Blueberry">Sad</button>
</div>
<div class="second-set-options">
<button id="order" name="fruits" class="options-button" value="strawberry" data-text-swap="Fantastic" data-text-original="Strawberry">Fantastic</button>
<button id="order" name="fruits" class="options-button" value="healthbar">Energetic</button>
</div>
</div>
<div class="item map-text">Get your "ice-cream of the day" at the nearest J. P. Licks store!
<div id="map"></div>
</div>
</div>
<div class="icecream_image">
<div id="order-summary"></div>
<img class="step1_bowl" src="images/step1_bowl.svg">
<img class="step1_flavor" value="chocolateflavor" src="images/step1_chocolate.svg">
<img class="step1_flavor" value="coffeeflavor" src="images/step1_coffee.svg">
<img class="step1_flavor" value="cookiencreamflavor" src="images/step1_cookiencream.svg">
<img class="step1_flavor" value="maplewalnutflavor" src="images/step1_maplewalnut.svg">
<img class="step1_flavor" value="mintchipsflavor" src="images/step1_mintchips.svg">
<img class="step1_flavor" value="peanutbutterflavor" src="images/step1_peanutbutter.svg">
<img class="step1_flavor" value="raspberryflavor" src="images/step1_respberry.svg">
<img class="step1_flavor" value="strawberryflavor" src="images/step1_strawberry.svg">
<img class="step1_flavor" value="vanillaflavor" src="images/step1_vanilla.svg">
<img class="step2_sauce" value="marshmellowsauce" src="images/step2_marshmallowsauce.svg">
<img class="step2_sauce" value="hotfudgesauce" src="images/step2_hotfudgesauce.svg">
<img class="step2_sauce" value="peanutbuttersauce" src="images/step2_peanutbuttersauce.svg">
<img class="step2_sauce" value="nosauce">
<img class="step3_sprinkles" value="mm" src="images/step3_mm.svg">
<img class="step3_sprinkles" value="yogurtchips" src="images/step3_yogurtchips.svg">
<img class="step3_sprinkles" value="chocolatechips" src="images/step3_chocolatechips.svg">
<img class="step3_sprinkles" value="coconutchips" src="images/step3_coconutchips.svg">
<img class="step4_fruits" value="mango" src="images/step4_mango.svg">
<img class="step4_fruits" value="pineapple" src="images/step4_pinapple.svg">
<img class="step4_fruits" value="raspberry" src="images/step4_respberry.svg">
<img class="step4_fruits" value="blueberry" src="images/step4_blueberry.svg">
<img class="step4_fruits" value="strawberry" src="images/step4_strawberry.svg">
<img class="step4_fruits" value="healthbar" src="images/step4_heathbar.svg">
</div>
コンソールを参照してください。赤いものがありますか？ –
あなたはドライブや何かであなたのイメージを共有してください> –