Value is not defined when trying to call with function with onclick

Question

When im trying to send(onclick) value to toggle_sprint() function i get error that value is not defined. Why is it not defined? I thought it got defined when i put value="false" but apparently not.

<div class="select">
    <div id="toggle_sprint" value="false" onclick="toggle_sprint(value);" >Toggle Sprint</div>

</div>

When you click it, it's looking for a variable called `value` in your scope, and it does not exist. — TayTay, Nov 04 '15 at 15:06

score 2 · Answer 1 · edited May 23 '17 at 10:27

There is no value attribute for div elements… and div elements aren't designed to be interactive so you're creating a bunch of accessibility issues by slapping onclick on a div.

Additionally, your use of an intrinsic event attribute means that toggle_sprint() probably isn't what you think it is.

Start by writing good HTML.

Use data-* attributes to provide data just for your JS. Use buttons to provide things to click on and trigger JS.

Then bind your event handlers with JavaScript.

    document.getElementById("toggle_sprint").addEventListener("click", function(event) {
      toggle_sprint(this.dataset.value);
    });

    function toggle_sprint(arg) {
      console.log(arg);
    }

<div class="select">
  <button type="button" id="toggle_sprint" data-value="false">Toggle Sprint</button>
</div>

Just a note that `addEventListener` doesn't work in IE below 9. — j08691, Nov 04 '15 at 15:12

Value is not defined when trying to call with function with onclick

1 Answers1