"undefined" Error with onchange Event

Question

I want to make it so when I press a button, it will print a different number depending on which button I press. I want the buttons to look the same. This is what I have:

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

Although, when I press a button, it says undefined. What does this mean, and how can I fix this?

Sushanth -- · Accepted Answer · 2016-12-19 23:02:55Z

1

change event is not invoked for a div element. You will have to attach it to the radio buttons explicitly for them to be invoked.

Also it is a good idea to avoid inline event handlers and attach the handlers in JS to avoid dirtying the 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

answered Dec 19, 2016 at 23:02

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nathan Chan Over a year ago

Can you make it so it outputs a variable instead of printing it? Thanks in advance!

Sushanth -- Over a year ago

@NathanChan You cannot return a value from the invocation of the handler. The best think you can do is, have a global variable and set the value of the variable.

Nathan Chan Over a year ago

I meant can you make it change a variable.

Pineda · Accepted Answer · 2016-12-19 22:58:49Z

1

You're trying to access a property of value on radiobuttons which is a <div> that has no such value, this is why you're getting 'undefined'.

You'll want to modify your code so that myFunction is assigned to the inline event handler onClick of each radio button input instead.

answered Dec 19, 2016 at 22:58

Pineda

7,5933 gold badges34 silver badges47 bronze badges

Collectives™ on Stack Overflow

"undefined" Error with onchange Event

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related