我正在尝试开发一个网络应用程序，其中所有输入都被“禁用”，并且仅在用户年满 18 岁时才会启用。但发生以下错误:

Uncaught 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>

最佳答案

关于事件处理程序与事件监听器

简而言之，使用事件监听器，而不是~~事件处理程序~~

阅读addEventListener vs onclick

on event 属性事件处理程序(即 <input onchange='check()'... )必须超出 check() 的函数范围或者更改事件未绑定(bind)到输入。真的不知道也不关心，因为不鼓励参加事件。使用事件监听器:

例如。 document.getElementById('age').addEventListener('change', check, false);

以下演示添加了一些附加功能，这些功能在评论中进行了解释。这是一个功能齐全的<form> :

填写字段，然后点击确定按钮。
它将您的数据发送到测试服务器。
页面将更改以显示服务器的响应。
请注意，每个条目都是一个键( [name] )/值( [name].value ) 例如。 "age": "21"

引用文献

HTMLFormControlsCollection

Eloquent JavaScript: Form and Form Fields

注意

标签#字符串 = 具有 id 属性的元素
- 例如。 form#info是 <form id='info'>...
标签[字符串] = 具有名称属性的元素
- 例如。 input[age]是 <input name='age'
[字符串] = 只是一个属性
- 例如。 [name]是 name="name"
表单字段、表单控件和表单元素 是指 <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>

关于JavaScript。 Uncaught ReferenceError : (object) is not defined at HTMLInputElement. onchange，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47243537/

JavaScript。 Uncaught ReferenceError : (object) is not defined at HTMLInputElement. onchange

关于事件处理程序与事件监听器

引用文献

注意

演示

上一篇：JavaScript Promise Chaining - 模板文字的问题

下一篇：javascript - 如何在 javascript HTTP 请求中制作 HTML 标签？