接收[object HTMLInputElement]而不是我的Variable

Question

I have a .js file in the same location as the HTML file and what I am trying to do is when I click on a Radio Button, information displays. I got that working on 4 out of 5 of the buttons. The last one is just displaying the error instead of the Var from the .js file.

<p> <!-- Radio buttons for drinks -->
    <strong>Select your drink:</strong>
    <br /><br />
    <input type="radio" name="drink" onclick="document.drinkList.drinkDesc.value = black" /> Black Coffee
    <br />
    <input type="radio" name="drink" onclick="document.drinkList.drinkDesc.value = loco" /> Loco Mocha
    <br />
    <input type="radio" name="drink" onclick="document.drinkList.drinkDesc.value = vanilla" /> Vanilla Bean Frappuccino
    <br />
    <input type="radio" name="drink" onclick="document.drinkList.drinkDesc.value = pumpkin" /> Pumpkin Spice Latte
    <br />
    <input type="radio" name="drink" onclick="document.drinkList.drinkDesc.value = caramel" /> Caramel Macchiato
    <br />
</p>
<p><!-- Design for output -->
    <textarea name="drinkDesc" cols="120" rows="1" style="background-color: Transparent; border: none; resize: none; overflow: hidden; font: 16px arial; color: #3F3F3F"></textarea>
</p>

And the .js file is just.

var black = "Plain black coffee brewed from our finest of roasted coffee beans."
var loco = "Chocolate mocha flavored, covered in chocolate chips and topped with whipped cream."
var vanilla = "Vanilla flavored iced drink, topped with whipped cream and caramel. (No coffee added)"
var pumpkin = "Pumpkin flavored latte, with espresso and milk mixed together for a delicious beverage."
var caramel = "Steamed milk with vanilla-flavored syrup is marked with espresso and topped with caramel drizzle."

Thank you!

Answer 1

I've made 1 change:

used getElementById instead of document.[elementname]

  var black = "Plain black coffee brewed from our finest of roasted coffee beans." var loco = "Chocolate mocha flavored, covered in chocolate chips and topped with whipped cream." var vanilla = "Vanilla flavored iced drink, topped with whipped cream and caramel. (No coffee added)" var pumpkin = "Pumpkin flavored latte, with espresso and milk mixed together for a delicious beverage." var caramel = "Steamed milk with vanilla-flavored syrup is marked with espresso and topped with caramel drizzle." 

 <p> <!-- Radio buttons for drinks --> <strong>Select your drink:</strong> <br /> <br /> <input type="radio" name="drink" onclick="document.getElementById('drinkDesc').value = black" /> Black Coffee <br /> <input type="radio" name="drink" onclick="document.getElementById('drinkDesc').value = loco" /> Loco Mocha <br /> <input type="radio" name="drink" onclick="document.getElementById('drinkDesc').value = vanilla" /> Vanilla Bean Frappuccino <br /> <input type="radio" name="drink" onclick="document.getElementById('drinkDesc').value = pumpkin" /> Pumpkin Spice Latte <br /> <input type="radio" name="drink" onclick="document.getElementById('drinkDesc').value = caramel" /> Caramel Macchiato <br /> </p> <p> <!-- Design for output --> <textarea id='drinkDesc' cols="120" rows="1" style="background-color: Transparent; border: none; resize: none; overflow: hidden; font: 16px arial; color: #3F3F3F"></textarea> </p> 

Answer 2

The reason why you are getting [object HTMLInputElement] is because the value of caramel is referring to an element via being a global variable. Elements in the HTML with an id or a name could be a global variable to the window in JavaScript. So if an element has id="caramel" or name="caramel" it will reffer to that element as caramel in JS. A simple solution is to use a different name for either the var caramel (such as Caramel ) or change the value of the id/name in the HTML element.