I want to make an input bar and search button where the search button is only enabled if there is any character in the input bar. So the button is disabled but when I type in the input, it doesn’t get enabled as it should.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
// by default search button is disabbled
document.querySelector('#search-button').disabled=true;
documnet.querySelector('#search-bar').onkeyup = () => {
document.querySelector('#search-button').disabled = false;
}
})
</script>
</head>
<body>
<form>
<input id='search-bar'>
<button id='search-button'>submit</button>
</form>
</body>
</html>