CODEWITHSUNDEEP
javascripthtml
Rafael Marques
Rafael Marques

Reputation: 21

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

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>

Upvotes: 2

Views: 21841

Answers (2)

zer00ne
zer00ne

Reputation: 43880

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

HTMLFormControlsCollection

Eloquent JavaScript: Form and Form Fields

Note

  • tag#string = element with id attribute

    • ex. form#info is <form id='info'>...

  • tag[string] = element with a name attribute

    • ex. input[age] is <input name='age'

  • [string] = is just an attribute

    • ex. [name] is name="name"

  • 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.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>

Upvotes: 4

Lucas Silveira
Lucas Silveira

Reputation: 62

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;

Upvotes: -1

Related Questions