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>

Answer 1

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>