Question

我的.js文件与HTML文件位于同一位置，而我想要做的就是当我点击单选按钮时，显示信息。我得到了5个按钮中的4个。最后一个是显示错误而不是.js文件中的Var。

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

.js文件只是。

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

谢谢！

Answer 1

我做了一次改变：

使用getElementById而不是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

你得到[object HTMLInputElement]的原因是因为caramel的值是通过作为全局变量引用一个元素。带有id或name的HTML中的元素可以是JavaScript中窗口的全局变量。因此，如果元素具有id="caramel"或name="caramel"，则它将作为JS中的caramel对该元素进行处理。一个简单的解决方案是为var caramel使用不同的名称（例如Caramel）或更改HTML元素中id/name的值。

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

2 个答案: