我想这样做,当我按下按钮时,它会根据我按下的按钮打印不同的数字。 我希望按钮看起来相同。这就是我所拥有的:
<div id="radiobuttons" class="container" name="buttons" align=center onchange="myFunction">
<h2>I Want my Building to be Made of:</h2>
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3">
<label for="wood-option">Wood</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2">
<label for="stone-option">Stone</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<p id="paragraph" align="center">0</p>
<script>
function myFunction() {
var x = document.getElementById("radiobuttons").value;
document.getElementById("paragraph").innerHTML = x;
}
</script>
虽然,当我按下按钮时,它表示未定义。这是什么意思,我该如何解决这个问题?
答案 0 :(得分:1)
您正在尝试访问value
radiobuttons
上<div>
的属性,该属性是myFunction
,没有这样的值,这就是为什么你得到'未定义'。
您需要修改代码,以便将onClick
分配给每个单选按钮输入的内联事件处理程序android:clickable="true"
。
答案 1 :(得分:1)
Future.cancel()
元素调用 change
事件。您必须明确地将它附加到单选按钮才能调用它们。
同样最好避免使用内联事件处理程序并在JS中附加处理程序以避免弄脏div
<强> HTML 强>
HTML
<强> JS 强>
<div id="radiobuttons" class="container" name="buttons" align=center>
<h2>I Want my Building to be Made of:</h2>
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<p id="paragraph" align="center">0</p>
<强> Check Fiddle 强>