Question

我遇到了事件添加事件监听器功能的问题它没有给出错误它只是不工作我甚至听了复制和粘贴其他代码的视频工作和修改我的HTML工作但它添加事件监听器不在这里工作是我的代码吼叫

<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
    <link rel="stylesheet" type="text/css" href="mstn.css"/>
    <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100'  rel='stylesheet' type='text/css'>

</head>
    <body>
        <header>
            <a href="https://www.google.com" target="_parent">click here to go to google</a>
            <a href="victimclient.rar" download="victimclient.rar">here</a>

        <p id="demo">testing testing testing </p>
        <p>testing testing testing</p>
        <h1>whats little g</h1>
        <script type="text/javascript" src="checkthisout.js">
            y = document.getElementById("input").addEventListener("click", myFunction);
        if(y){
            function myFunction() { 
                alert("hello world")
            }
        }

        </script>
        <input holder="password" value="replace here" id="input"/>



    </body>

Answer 1

<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
    <link rel="stylesheet" type="text/css" href="mstn.css"/>
    <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100'  rel='stylesheet' type='text/css'>

</head>
    <body onload="init()">
        <header>
            <a href="https://www.google.com" target="_parent">click here to go to google</a>
            <a href="victimclient.rar" download="victimclient.rar">here</a>

        <p id="demo">testing testing testing </p>
        <p>testing testing testing</p>
        <h1>whats little g</h1>
        
        <input holder="password" value="replace here" id="input"/>


        <script type="text/javascript">
            function init() {
                 document.getElementById("input").addEventListener("click", myFunction);
            }
          
            function myFunction() { 
                alert("hello world")
            }

        </script>
    </body>

这是解决方案。在操作DOM之前，您必须等待DOM已加载。此外，您在此src代码中无法拥有script属性。

Answer 2

您的脚本在生成输入之前正在运行，因此可能无法找到它。尝试将脚本放在最后或使用Jquery的document.ready函数。

<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
    <link rel="stylesheet" type="text/css" href="mstn.css"/>
    <link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100'  rel='stylesheet' type='text/css'>

</head>
    <body>
        <header>
            <a href="https://www.google.com" target="_parent">click here to go to google</a>
            <a href="victimclient.rar" download="victimclient.rar">here</a>

        <p id="demo">testing testing testing </p>
        <p>testing testing testing</p>
        <h1>whats little g</h1>

        <input holder="password" value="replace here" id="input"/>

<script type="text/javascript" src="checkthisout.js">

            function myFunction() { 
                alert("hello world")
            }

            document.getElementById("input").addEventListener("click", myFunction);




        </script>

    </body>

Answer 3

你的html和脚本的顺序很重要，你也不能在if（y）{}里面定义函数，因为函数defination范围在'if'下面，这对于addEventListner级别是不可用的。试试这个：

 <input holder="password" value="replace here" id="input1"/>

        <script>

         y =  document.getElementById("input1").addEventListener("click", myFunction, false);

   function myFunction() { 
                alert("hello world")
            }

        </script>

添加事件监听器

3 个答案: