我正在尝试开发一个网络应用，其中所有输入都被禁用＆＃34;并且仅在用户年满18岁时启用。但是发生了以下错误：
未捕获的ReferenceError：HTMLInputElement.onchange中未定义检查。
请帮帮我!!
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>
答案 0 :(得分：1)
简而言之，在事件处理程序上使用事件侦听器而非
on事件属性事件处理程序（即<input onchange='check()'...）必须超出check()的函数范围，或者更改事件未绑定到输入。不要真的知道也不要关心，因为不鼓励这些事件。使用事件监听器：
离。 document.getElementById('age').addEventListener('change', check, false);
以下演示有一些附加功能，在评论中有解释。这是一个功能齐全的<form>：
填写字段，然后单击确定按钮。
它会将您的数据发送到测试服务器。
页面将更改为显示服务器的响应。
请注意，每个条目都是一个键（[name]）/值（[name].value）ex。 "age": "21"
Eloquent JavaScript: Form and Form Fields
标记＃字符串 =具有id属性的元素
form#info是<form id='info'>... 标记 [字符串] =具有名称属性的元素
input[age]是<input name='age' [ string ] =只是一个属性
[name]是name="name" 表单字段 ， 表单控件 和 表单元素< / em> 是在此演示中引用<input>的术语
/* 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>
答案 1 :(得分：0)
您的问题是document.getElementById的参数是一个字符串。所以而不是：
document.getElementById (city).disabled =false;
它将是：
document.getElementById ("city").disabled =false;