admin管理员组文章数量:1356413
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>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>- Wele to Stack Overflow! Can you please add the Code, where you call the check-function? – Nikolaus Commented Nov 11, 2017 at 22:47
- Hey @Nikolaus thanks for your attention! The code is in the post. I call the check-function on Age input. – Rafael Marques Commented Nov 11, 2017 at 22:52
- You should show your eventListener code for the input.onChange listener. The problem could be there. – Mark Commented Nov 11, 2017 at 23:01
- @RafaelMarques And the check-function is in the Pratica11exe14.js file? – Nikolaus Commented Nov 11, 2017 at 23:03
- @Nikolaus exactly ! – Rafael Marques Commented Nov 11, 2017 at 23:11
2 Answers
Reset to default 4on event handlers vs. event listeners
In short, use event listeners not on event handlers
Read addEventListener vs onclick
The on event attribute event handler (i.e. <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 ments. 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
HTMLFormControlsCollection
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='http://httpbin/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>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;
版权声明：本文标题：html - JavaScript. Uncaught ReferenceError: (object) is not defined at HTMLInputElement.onchange - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744065359a2584890.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论