Issue
I’m new to programming. I have run into this issue. Whenever I try using AddEventListener on the Image it does not work at all. When I click it, it does not alert me. This is the code(I am using Flask):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Restaurant</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "/static/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<img src="/static/searchImage.png" id="searchImage">
<div id="search" style="text-align: center;">
<input id="searchInput" type="text" placeholder="Search">
</div>
<div id="navBar">
<p id="demo"></p>
<a href="deals" class="btn">
<button id="dealsButton">Deals</button>
</a>
<a href="burgers" class="btn">
<button id="burgersButton">Burgers</button>
</a>
<a href="drinks" class="btn">
<button id="drinksButton">Drinks</button>
</a>
<a href="sides" class="btn">
<button id="sidesButton">Sides</button>
</a>
<a href="desserts" class="btn">
<button id="dessertsButton">Desserts</button>
</a>
</div>
<script>
searchImg.addEventListener('click', function(){
var InpS = document.getElementById('searchInput').value;
var searchImg = document.getElementById('searchImage');
var demo = document.getElementById('demo');
if ((/(test)/g.test(InpS))) {
alert("works")
}
else {
alert('does not work')
}
})
However, when I tried using button onclick="func()", It worked perfectly fine for this:
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<title> test </title>
<body>
<p id="demo"> hello </p>
<input type="text" id="hello">
<button type="button" id="what" onclick="myFunc()"></button>
<script>
function myFunc() {
var input = document.getElementById('hello').value;
if ((/(test)/g.test(input))) {
alert('match')
}
else {
alert("does not match")
}
}
</script>
</body>
</html>
Here is the image of the website, the search bar is to the right. I am supposed to get an alert message when clicking the search icon. I’m pretty new to this stuff so any help would be appreciated.
Solution
I believe the problem is that the searchImg isn’t defined when you add the listener.
This should work:
var searchImg = document.getElementById('searchImage');
searchImg.addEventListener('click', function(){
var InpS = document.getElementById('searchInput').value;
var demo = document.getElementById('demo');
if ( /(test)/g.test(InpS) ) {
alert('works')
}
else {
alert('does not work')
}
})
Answered By – Bronislav Růžička
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0