Menu
Can someone explain to me the behavior of change event in my javascript code? I have two event-listeners attached to the search input box so when the value of input changed it print the changed value; when input box is clicked it empties the value.
My question is when I click the search box the value of input box changed from something to empty, so why doesn't it trigger change event?
var search = document.querySelector("#search");
search.addEventListener("change",function(){
console.log("change event occur");
console.log($("#search").val());
})
var search = document.querySelector("#search");
search.addEventListener("click",function(){
console.log("click event occur");
$("#search").val(' ');
})body,html{
background-color:#092B40;
width: 100%;
height: 100%;
border-color: transparent;
margin:0;
padding:0;
}
.entry{
display: block;
background-color: #F8ECC2;
margin-top: 10px;
border-radius: 3px;
min-width:600px;
height:90px;
width: 100%;
}
.container{
overflow:hidden;
}
#search{
display:inline-block;
width:50%;
}
#wiki{
margin-top: 0%;
animation: 2s slide-up;
}
@keyframes slide-up{
from{
margin-top:100%;
opacity:0;
}
to{
margin-top:0%;
opacity:1;
}
}<head>
<title>Wiki Search API</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
</script>
</head>
<body>
<div class='container'>
<div id='search-box' class="form-group text-center">
<input id='search' type="text" class="form-control" placeholder="Search for...">
<submit id='go-button' class='btn btn-info '>Go!</submit>
<button id='random' class='btn btn-warning '><a href='https://en.wikipedia.org/wiki/Special:Random'>Random!</a></button>
</div>
<!--<div class='filler well'>-->
<!--</div>-->
<div id='wiki' class='row'>
<a class="entry">
<p>Hello</p>
</a>
<a class="entry">
<p>Hello</p>
</a>
<a class="entry">
<p>Hello</p>
</a>
<a class="entry">
<p>Hello</p>
</a>
<a class="entry">
<p>Hello</p>
</a>
<a class="entry">
<p>Hello</p>
</a>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
615
asked Jan 27 '26 05:01
It's because events are only raised from user input. Programmatically changing the value of an input doesn't raise an event. If you want one to occur, then you need to trigger() it manually, like this:
var search = document.querySelector("#search");
search.addEventListener("click", function(){
console.log("click event occur");
$("#search").val('').trigger('change');
})
Also note that you're using an odd mix of plain JS and jQuery. It's better practice to stick to one or the other. As you've loaded jQuery, you may as well use it:
$(function() {
$('#search').on({
change: function() {
console.log("change event occur");
console.log($(this).val());
},
click: function() {
console.log("click event occur");
$(this).val('').trigger('change');
}
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id='search' type="text" class="form-control" placeholder="Search for...">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
