Javascript &引用；“未定义”；onchange事件出错

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

<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
函数myFunction（）{
var x=document.getElementById（“单选按钮”）.value；
document.getElementById（“段落”）.innerHTML=x；
}

---

虽然，当我按下一个按钮，它说未定义。这意味着什么？我如何解决这个问题？

您试图访问

单选按钮上的
值的属性，该属性是一个没有此类值的
，这就是您得到“未定义”的原因

您需要修改代码，以便将
myFunction
分配给每个单选按钮输入的内联事件处理程序
onClick
。
change
事件不会为
div
元素调用。您必须将它显式地附加到单选按钮，才能调用它们

另外，最好避免使用内联事件处理程序，并在JS中附加处理程序，以避免弄脏
HTML

HTML

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


我希望我的建筑由以下材料构成：


砖


木材


石


0

JS

var radioButtons = document.querySelectorAll('input[type=radio]');

for (var i = 0; i < radioButtons.length; i++) {
  radioButtons[i].addEventListener('change', function() {
    if (this.checked) {
      document.getElementById("paragraph").innerHTML = this.value;
    }
  });
}

var radioButtons=document.querySelectorAll（'input[type=radio'）；
对于（var i=0；i

您能让它输出一个变量而不是打印它吗？提前谢谢@NathanChan您不能从处理程序的调用返回值。你能做的最好的事情就是，拥有一个全局变量并设置变量的值。我的意思是你能让它改变一个变量吗。