Javascript 添加事件侦听器不工作（正则表达式）_Javascript_Html_Css_Flask_Addeventlistener

Javascript 添加事件侦听器不工作（正则表达式）

javascript html css flask

Javascript 添加事件侦听器不工作（正则表达式）,javascript,html,css,flask,addeventlistener,Javascript,Html,Css,Flask,Addeventlistener,我是编程新手。我遇到了这个问题。每当我尝试在图像上使用AddEventListener时，它根本不起作用。当我点击它时，它不会提醒我。这是代码（我正在使用Flask）：餐厅 searchImg.addEventListener（'click'，function（）{ var InpS=document.getElementById（'searchInput'）。值； var searchImg=document.getElementById（'searchImage'）； var demo

我是编程新手。我遇到了这个问题。每当我尝试在图像上使用AddEventListener时，它根本不起作用。当我点击它时，它不会提醒我。这是代码（我正在使用Flask）：


餐厅

searchImg.addEventListener（'click'，function（）{
var InpS=document.getElementById（'searchInput'）。值；
var searchImg=document.getElementById（'searchImage'）；
var demo=document.getElementById（'demo'）；
如果（（/（测试）/g.test（InpS）））{
警报（“工作”）
}
否则{
警报（'不工作'）
}
})

但是，当我尝试使用button onclick=“func（）”时，它的效果非常好：




<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>


试验
您好
函数myFunc（）{
var input=document.getElementById（'hello'）.value；
如果（（/（测试）/g.test（输入）））{
警报（“匹配”）
}
否则{
警报（“不匹配”）
}
}

这是网站的图片，搜索栏在右边。我应该在单击搜索图标时收到一条警告消息。我对这东西还不太熟悉，所以任何帮助都将不胜感激

我认为问题在于添加侦听器时没有定义

searchImg

这应该起作用：

var searchImg=document.getElementById（'searchImage'）；
searchImg.addEventListener（'click'，function（）{
var InpS=document.getElementById（'searchInput'）。值；
var demo=document.getElementById（'demo'）；
如果（/（测试）/g.测试（InpS））{
警报（‘工作’）
}
否则{
警报（'不工作'）
}
})

我认为问题在于添加侦听器时没有定义

searchImg

这应该起作用：

var searchImg=document.getElementById（'searchImage'）；
searchImg.addEventListener（'click'，function（）{
var InpS=document.getElementById（'searchInput'）。值；
var demo=document.getElementById（'demo'）；
如果（/（测试）/g.测试（InpS））{
警报（‘工作’）
}
否则{
警报（'不工作'）
}
})

searchImg！=searchImage

这个问题与正则表达式无关。是的，对不起。我第一次写它是因为我认为它与正则表达式有关。但后来意识到这两种方式都不起作用

searchImg！=searchImage

这个问题与正则表达式无关。是的，对不起。我第一次写它是因为我认为它与正则表达式有关。但后来意识到这两种方法都不起作用了非常感谢！所以我应该总是在事件监听器之外定义它？@FatTrat基本上是的-你应该在使用变量之前定义它。因此，在本例中，在调用

.addEventListener（）

变量之前，应该先定义

searchImg

变量。非常感谢！所以我应该总是在事件监听器之外定义它？@FatTrat基本上是的-你应该在使用变量之前定义它。因此，在这种情况下，在调用

.addEventListener（）

变量之前，应该先定义

searchImg

变量。




<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>