"undefined" onchangeイベントのエラー

ボタンを押したときに押したいボタンを押すと、別の番号が表示されます。 ボタンが同じに見えるようにします。これは私が持っているものです："undefined" 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>

私はボタンを押すと、それは未定義と言います。これはどういう意味ですか、これをどのように修正できますか？

出典

2016-12-19 Nathan Chan

changeイベントはdiv要素に対して呼び出されません。それらを呼び出すには、ラジオボタンに明示的にアタッチする必要があります。

またそれが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>

を汚す避けるために、インラインのイベントハンドラを避け、JS内のハンドラをアタッチすることは良い考えである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; 
    } 
    }); 
}

Check Fiddle

出典

2016-12-19 23:02:55

変数を出力するのではなく、変数を出力できるようにすることはできますか？前もって感謝します！ –

@ NathanChanハンドラの呼び出しから値を返すことはできません。最高のことは、グローバル変数を持ち、変数の値を設定することです。 –

私は変数を変更できるようにすることを意味します。 –