Add event listener not working(Regular Expression)

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.

enter image description here

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

Leave a Reply

(*) Required, Your email will not be published