I am trying to call book data using Jquery, and it’s supposed to show an outpuList uppon click event when the search button is hit.
Here is the HTML code:
<div class="row">
<div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
<input id="search-field" type="text" class="form-control" placeholder="Search Books!..">
<button id="search" class="btn btn-primary" onclick="">Search</button>
</div>
Here is the JS code where the error points to:
//listener for search button
$("#search").click(function() {
outputList.innerHTML = ""; //empty html output
document.body.style.backgroundImage = "url('')";
searchData = $(search-field).val(); <-- Error points to this string in the Google Dev Tool
And displays the following error when the search button gets hit.
app.js:12 Uncaught ReferenceError: field is not defined
at HTMLButtonElement.<anonymous> (app.js:12:31)
at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2:43064)
at v.handle (jquery-3.6.0.min.js:2:41048)
I’ve tried changing the string to
searchData = $(#search-field).val();
But then it produces this error:
app.js:12 Uncaught SyntaxError: Private field '#search' must be declared in an enclosing class (at app.js:12:23)
Any assistance will be greatly appreciated!!