JavaScript. Uncaught ReferenceError: (object) is not defined at HTMLInputElement.onchange
Question
I'm trying to develop a web app where all the inputs are "disabled" and will only be enabled when the user is 18+. But the following error is happening:
Uncaught ReferenceError: check is not defined at HTMLInputElement.onchange.
Help me pls!!
function check(){ var age = document.getElementById("age").value; if (age >= 18) { document.getElementById ("city").disabled =false; document.getElementById ("state").disabled =false; document.getElementById ("country").disabled =false; document.getElementById ("submit").disabled =false; } else{ document.getElementById ("city").disabled =true; document.getElementById ("state").disabled =true; document.getElementById ("country").disabled =true; document.getElementById ("submit").disabled =true; } }
html { font-family: "Segoe UI", "Helvetica Neue", Verdana, Arial, sans-serif; font-size: 16px; height: 95%; } label, input { padding: .5rem; margin: 1rem; } input[type=text]:enabled { background: #ffff00; } input[type='text']:disabled { background: #E01E1E; } input[type="text"]:disabled::placeholder { color: white; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="TW-LAB- Pratica11exe14.css"> <script type="text/javascript" href="TW-LAB- Pratica11exe14.js"></script> </head> <body> <label>Name: <input type="text" placeholder="name"></label><br> <label>Age: <input type="number" placeholder="age" onchange="check()" id="age"></label><br> <label>City: <input type="text" disabled="disabled" placeholder="city" id="city"></label><br> <label>State: <input type="text" disabled="disabled" value="state" id="state"></label><br> <label>Country: <input type="text" disabled="disabled" placeholder="Country" id="country"></label><br> <input type="submit" value="Ok" disabled="disabled" id="submit"> </body> </html>
2 answers
solution1
1 2017-11-12 00:47:44
on event handlers vs. event listeners
In short, use event listeners not on event handlers
Read addEventListener vs onclick
The on event attribute event handler (ie <input onchange='check()'... ) must be out of function scope of check() or the change event isn't bound to the input. Don't really know and don't care since on events are discouraged. Use event listeners:
ex. document.getElementById('age').addEventListener('change', check, false);
The following demo has some added features to it which are explained within the comments. This is a fully functional <form> :
Fill out the fields then click the Ok button.
It will send your data to a test server.
The page will change to display the server's response.
Note that each entry is a key(
[name])/value([name].value) ex."age": "21"
References
Eloquent JavaScript: Form and Form Fields
Note
tag # string = element with id attribute
- ex.
form#infois<form id='info'>...
- ex.
tag [ string ] = element with a name attribute
- ex.
input[age]is<input name='age'
- ex.
[ string ] = is just an attribute
- ex.
[name]isname="name"
- ex.
Form field , form control , and form element are terms referring to
<input>s in this demo
Demo
/* Refer to HTMLFormControlsCollection on details || on how form elements are accessed */ // Reference the <form> var form = document.forms.info; // Reference all form controls of form#info var input = form.elements; /* Register the input[age] for input events || When a user inputs data run the callback || function check() and pass the value of || input[age] through */ input.age.addEventListener('input', function(e) { check(this.value); }); // check() function will take a given value... function check(age) { // ...convert value to a real number. var consent = Number(age); // if number is greater or equal to 18... if (consent >= 18) { /* ...find the input[name] and fieldset#set || and set their [disabled] atteributes to || false */ input.set.disabled = false; input.name.disabled = false; // Otherwise diable them } else { input.set.disabled = true; input.name.disabled = true; } }
html { font-family: "Segoe UI", "Helvetica Neue", Verdana, Arial, sans-serif; font-size: 16px; height: 95%; } label, input { padding: .5rem; margin: 1rem; } /* All labels are inline-block so they can sit next to their inputs and push them to the right at the distance of their widths. Widths are in ch units of measurement which are roughly the width of a "0" of the specific font. */ label { display: inline-block; width: 3ch; } input[type=text]:enabled { background: #ffff00; } input[type='text']:disabled { background: #E01E1E; } input[type="text"]:disabled::placeholder { color: white; }
<!DOCTYPE html> <html> <head> </head> <body> <!--All form controls have been unwrapped from its <label> so it'll be easier to align everything see CSS for details--> <!--Added form#info it will send all values of <input>s that have a [name] attribute--> <!--The [action] attribute value is a real test server that will recieve data and send a response back.--> <form id='info' action='https://httpbin.org/post' method='post'> <!--input[name] is disabled and given [name='name']--> <label>Name: </label><input type="text" placeholder="Name" name='name' disabled><br> <!--input[age] has [min]/[max] attributes and [name='age']--> <label>Age: </label><input type="number" placeholder="Age" name="age" min='0' max='111'><br> <!--Added fieldset#set and is disabled. Any fields within fieldset#set is also disabled (they don't need to be set disabled individually)--> <fieldset id='set' disabled> <!--Just a title--> <legend>Contact Info</legend> <!--city[city]--> <label>City: </label><input type="text" placeholder="City" name="city"><br> <!--state[state]--> <label>State: </label><input type="text" placeholder="State" name="state"><br> <!--contry[country]--> <label>Country: </label><input type="text" placeholder="Country" name="country"><br> <!--By default a <input type='submit'> or a <button type='submit'>...</button> will submit data when clicked automatically if it is within a <form> or has a [form] attribute with a form's #id as its value--> <input type="submit" value="Ok"> </fieldset> </form> </body> </html>
solution2
0 2017-11-11 22:41:07
Your problem is that the parameter of document.getElementById is a string. So instead of:
document.getElementById (city).disabled =false;
it would be:
document.getElementById ("city").disabled =false;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.