我正在尝试使用冰淇淋选择机器解决一个问题，用户可以选择不同的选项并获得相应的结果。
<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" onclick="chooseFlavor() "class="options-button fruits" value="strawberryflavor" data-text-swap="Pink" data-text-original="Strawberry">Pink</button>
<button name="flavor" onclick="chooseFlavor() "class="ooptions-button fruits" value="chocolateflavor" data-text-swap="Brown" data-text-original="Chocolate">Brown</button>
<button name="flavor" onclick="chooseFlavor() "class="options-button fruits" value="vanillaflavor" data-text-swap="White" data-text-original="Vanilla">White</button>
<button name="flavor" onclick="chooseFlavor() "class="options-button fruits" value="cookiencreamflavor" data-text-swap="BW" data-text-original="CookieNCream">BW</button>
</div>
<div class="second-set-options">
<button name="flavor" onclick="chooseFlavor() "class="options-button fruits" value="raspberryflavor" data-text-swap="Red" data-text-original="Raspberry">Red</button>
<button name="flavor" onclick="chooseFlavor() " class="options-button fruits" value="mintchipsflavor" data-text-swap="Green" data-text-original="Mint Chips">Green</button>
<button name="flavor" onclick="chooseFlavor() "class="options-button fruits" value="peanutbutterflavor" data-text-swap="Yellow" data-text-original="Peanut Butter">Yellow</button>
<button name="flavor" onclick="chooseFlavor() "class="options-button fruits" 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" onclick="chooseSauce()" class="options-button sauce" value="marshmellowsauce" data-text-swap="Marshmellow Man" data-text-original="Marshmellow Sauce">Marshmellow Man</button>
<button name="sauce" onclick="chooseSauce()" class="options-button sauce" 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" onclick="chooseSauce()" class="options-button sauce" value="hotfudgesauce" data-text-swap="Willy Wonka" data-text-original="Hot Fudge Sauce">Willy Wonka</button>
<button name="sauce" onclick="chooseSauce()" class="options-button sauce" 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" onclick="chooseSprinkles()"class="options-button sprinkles" value="yogurtchips" data-text-swap="Snow" data-text-original="Yogurt Chips">Snow</button>
<button name="sprinkles" onclick="chooseSprinkles()"class="options-button sprinkles" value="chocolatechips" data-text-swap="Rainy" data-text-original="Chocolate Chips">Rainy</button>
</div>
<div class="second-set-options">
<button name="sprinkles" onclick="chooseSprinkles()"class="options-button sprinkles" value="mm" data-text-swap="Sunny" data-text-original="M&M">Sunny</button>
<button name="sprinkles" onclick="chooseSprinkles()"class="options-button sprinkles" 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" onclick="chooseFruits()"class="options-button fruits" value="mango" data-text-swap="Angry" data-text-original="Mango">Angry</button>
<button id="order" name="fruits" onclick="chooseFruits()"class="options-button fruits" value="pineapple" data-text-swap="Jealous" data-text-original="Pineapple">Jealous</button>
<button id="order" name="fruits" onclick="chooseFruits()"class="options-button fruits" value="raspberry" data-text-swap="Upset" data-text-original="Raspberry">Upset</button>
<button id="order" name="fruits" onclick="chooseFruits()"class="options-button fruits" value="blueberry" data-text-swap="Sad" data-text-original="Blueberry">Sad</button>
</div>
<div class="second-set-options">
<button id="order" name="fruits" onclick="chooseFruits()"class="options-button fruits" value="strawberry" data-text-swap="Fantastic" data-text-original="Strawberry">Fantastic</button>
<button id="order" name="fruits" onclick="chooseFruits()"class="options-button fruits" 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>
</div>
<script>
var order = document.getElementById('order');
var orderSummary = document.getElementById('order-summary');
var flavorOptions = document.getElementsByName('flavor');
var flavorChosen;
function chooseFlavor() {
console.log("flavor is running");
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;
}
}
var sauceOptions = document.getElementsByName('sauce');
var sauceChosen;
function chooseSauce() {
console.log("sauce is running");
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.getElementsByName('sprinkles');
var sprinklesChosen;
function chooseSprinkles() {
console.log("sprinkles is running");
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.getElementsByName('fruits');
var fruitsChosen;
function chooseFruits() {
console.log("fruits is running");
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);
}
</script>
结果应该是根据你选择的选项在最后一行选择结果。我使用不同的方法来点击按钮，但没有一个正常工作。
我无法点击除第一个按钮之外的所有按钮，但我仍然在我的所有变量上获得未定义的值。请指导我点击并存储在变量中的事件。
答案 0 :(得分：1)
您没有className flavor
相反，请使用：
var flavorOptions = document.getElementsByName('flavor');
这同样适用于所有其他人
var sauceOptions = document.getElementsByName('sauce');
var sprinklesOptions = document.getElementsByName('sprinkles');
var fruitsOptions = document.getElementsByName('fruits');
答案 1 :(得分：1)
哟必须在所有控件上分配class，然后在你的js代码中访问它们。你正在访问基于索引的数据，这不是一个好习惯。
尽量避免这种情况。
var flavorOptions = document.getElementsByClassName('fruits');
if (flavorOptions .checked)
{
// ..
}