onchange事件的“undefined”错误

时间:2016-12-19 22:53:46

标签: javascript html

我想这样做,当我按下按钮时,它会根据我按下的按钮打印不同的数字。 我希望按钮看起来相同。这就是我所拥有的:

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

虽然,当我按下按钮时,它表示未定义。这是什么意思,我该如何解决这个问题?

2 个答案:

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