Menu
This is really straight forward but I'm still fairly new to JavaScript and just found JSFiddle. I'm trying to find the element with the getElementById() to disable and enable a button. What am I missing?
<form name="frm" > <div id="chkObj"> <input type="checkbox" name="setChkBx" onclick="basicList.modifyAndEnableButton(this)"></input> </div> <div id="Hello"> <input type="button" name="btn" value="Hello"></input> </div> </form> This is a list that I am using to add checkboxes because there is going to be more than one:
var basicList = { 'items': {}, 'modifyAndEnableButton': function(obj1) { var element = document.getElementsByName("btn"); if (obj1.checked == true && element.getAttribute('disabled') == false) { element.getAttribute('disabled') = true; this.addRecord(obj2); } else if (element.getAttribute('disabled') == true) { if (hasItems == false) { element.getAttribute('disabled') = false; } } } }; http://jsfiddle.net/Arandolph0/E9zvc/3/
602
To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.
Both can be used to handle events. However, addEventListener should be the preferred choice since it can do everything onclick does and more. Don't use inline onclick as HTML attributes as this mixes up the javascript and the HTML which is a bad practice. It makes the code less maintainable.
For little web apps with a minimal amount of code, it doesn't matter. But if you aspire to write large, maintainable codebases, onclick="" is a habit that you should work to avoid.
To check if an element was clicked, add a click event listener to the element, e.g. button. addEventListener('click', function handleClick() {}) . The click event is dispatched every time the element is clicked.
All browsers support this (see example here):
mySelectedElement.onclick = function(e){ //your handler here } However, sometimes you want to add a handler (and not change the same one), and more generally when available you should use addEventListener (needs shim for IE8-)
mySelectedElement.addEventListener("click",function(e){ //your handler here },false); Here is a working example:
var button = document.getElementById("myButton"); button.addEventListener("click",function(e){ button.disabled = "true"; },false); And html:
<button id='myButton'>Hello</button> Here are some useful resources:
addEventListener on mdn
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
