«undefined» Ошибка с onchange Событие

Question

Я хочу сделать это, когда я нажму кнопку, он напечатает другое число, в зависимости от того, какую кнопку я нажимаю. Я хочу, чтобы кнопки выглядели одинаково. Это то, что у меня есть:

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

Хотя, когда я нажимаю кнопку, это говорит о неопределенности. Что это значит и как я могу это исправить?

Answer 1

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> 

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

Answer 2

Вы пытаетесь получить доступ к свойству value на radiobuttons который является <div>, что не имеет такого значения, поэтому вы получаете «неопределенными».

Вы хотите изменить свой код так, что myFunction назначаются обработчик события рядного onClick каждого радио кнопки ввода вместо этого.