Computer >> Computer tutorials >  >> Programming >> Javascript

Add oninput attribute to HTML element with JavaScript?


For this, use the concept of document.getElementById() along with addEventListener(). Following is the JavaScript code −

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label> Enter the value:</label>
<input id="enterValue" type="text">
</body>
<script>
   document.getElementById('enterValue').addEventListener("input", function () {
      console.log('you have entered the value');
   });
</script>
</html>

To run the above program, save the file nameanyName.html(index.html) and right click on the file and select the option open with live server in VS code editor.

Output

Add oninput attribute to HTML element with JavaScript?

When user enters a value −

Add oninput attribute to HTML element with JavaScript?