如何将HTML下拉选中的选项值作为JavaScript函数中的变量使用？

Hey Brandon, great job diving into your first programming project—random card draws are such a fun way to learn! Let's break down what's going on with your code and fix that issue step by step.

Key Issues in Your Current Code #

First, let's spot the main problems holding your code back:

1. Your <select> tag isn't closed properly—you placed the <input> element directly inside it, which breaks the DOM structure. Always close your <select> with </select> before adding other elements.
2. When you grab document.getElementById("hearts"), you're getting the entire dropdown element, not the selected option's value. Right now you're trying to treat this element like an array, which won't work.
3. You have separate variables (hd12, hd11, hd10) for each deck, but you need a way to map the selected option's value (like "hd12") to the corresponding array.

Fixed Solution #

The simplest fix is to store all your decks in a single object, where the keys match the value attributes of your dropdown options. This lets you easily look up the right deck using the selected value. Here's the full corrected code:

Fixed HTML

<select id="hearts">
  <option value="hd12">-12</option>
  <option value="hd11">-11</option>
  <option value="hd10">-10</option>
</select> <!-- Added closing tag here -->
<input type="button" onclick="drawFunction()" value="Draw A Card">
<p id="draw"></p>

Fixed JavaScript

// Store all decks in an object—keys match the dropdown option values
const decks = {
  hd12: ["AH"],
  hd11: ["KH", "AH"],
  hd10: ["QH", "KH", "AH"]
};

function drawFunction() {
  // Get the dropdown element
  const selectElement = document.getElementById("hearts");
  // Grab the value of the selected option
  const selectedDeckKey = selectElement.value;
  // Fetch the corresponding deck array from our object
  const selectedDeck = decks[selectedDeckKey];
  
  // Calculate a random index for the deck
  const randomIndex = Math.floor(Math.random() * selectedDeck.length);
  // Pick the random card from the deck
  const randomCard = selectedDeck[randomIndex];
  
  // Display the result
  document.getElementById("draw").innerHTML = randomCard;
}

What Changed & Why #

• Deck Object: By grouping all decks into an object, we can use the selected option's value as a "key" to access the correct array (e.g., decks["hd12"] gives us ["AH"]). This is way cleaner and safer than trying to reference variables by string names.
• Selected Value: selectElement.value directly gives us the value attribute of the chosen dropdown option—exactly what we need to pick the right deck.
• Random Card Logic: We use Math.floor(Math.random() * selectedDeck.length) to generate a valid index for the deck array, then use that index to grab a random card.

Bonus UX Tip #

For a nicer user experience, add a default disabled option to your dropdown to guide users to pick a deck first:

<select id="hearts">
  <option selected disabled>Choose a deck</option>
  <option value="hd12">-12</option>
  <option value="hd11">-11</option>
  <option value="hd10">-10</option>
</select>

内容的提问来源于stack exchange，提问作者Brandon