已检查按钮的值未定义

Question

我正在尝试使用冰淇淋选择机器解决一个问题，用户可以选择不同的选项并获得相应的结果。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

结果应该是根据你选择的选项在最后一行选择结果。我使用不同的方法来点击按钮，但没有一个正常工作。

我无法点击除第一个按钮之外的所有按钮，但我仍然在我的所有变量上获得未定义的值。请指导我点击并存储在变量中的事件。

Answer 1

您没有className flavor

的任何元素

相反，请使用：

var flavorOptions = document.getElementsByName('flavor');

这同样适用于所有其他人

var sauceOptions = document.getElementsByName('sauce');
var sprinklesOptions = document.getElementsByName('sprinkles');
var fruitsOptions = document.getElementsByName('fruits');

Answer 2

哟必须在所有控件上分配class，然后在你的js代码中访问它们。你正在访问基于索引的数据，这不是一个好习惯。 尽量避免这种情况。

var flavorOptions = document.getElementsByClassName('fruits');
if (flavorOptions .checked)
{
    // ..
}