Question

我用javascript创建了两个动态按钮。当我点击它们时，我希望他们从sample.js中得到getImage1Data和getImage2Data。由于这些按钮是动态创建的，我不确定如何执行此操作。我提供了html代码以及sample.js文件。

HTML

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">


    .btn {
    font-family     : Arial;
    text-align      : center;
    width           : 100px;
    height          : 15px;
    background      : #ccc;
    border          : 1px solid #000;
    box-shadow      : 1px 1px 5px -1px #000;
    padding         : 10px;
    margin-bottom   : 10px;
    cursor          : pointer;
    }

    .btn:hover {
       text-decoration : underline;   
    }

    </style>

    </head>
    <body>


   <script language="javascript">
       var button = 'btn1,btn2'.split(',');
    for (var b in button) {
        var newElement = document.createElement('div');
        newElement.id = button[b]; newElement.className = "btn";
        newElement.innerHTML = button[b];
       document.body.appendChild(newElement);
    }

   </script>

   </body>
   </html>

/***********************************/
/***********************************/

SAMPLE.js

    var  image2Src = null;  

    function getImage1Data(){     
       var  image1Src;     
       var xhttp = new XMLHttpRequest();   
       xhttp.open("Get", 'some Url', false);     
       xhttp.send(null);     
       image1Src = xmlhttp.responseText; //Assume src = 'myFirstImg.png',  
       200x200 px  
    }   


    function getImage2Data(){      

       var xhttp = new XMLHttpRequest();     
       xhttp.onreadystatechange = function(){         
          if(xmlhttp.readyState == 4 && xmlhttp.status ==  
    200)                    
             getSrc(xmlhttp.responseText);     
    }        

          xhttp.open("Get", 'some Url', true);         
          xhttp.send(null); 
    }  

    function getSrc(text){     
       image2Src = text; //Assume src = 'myLastImg.png', 10x10 px 
    }

Answer 1

在动态创建按钮后（即在for循环之后），您可以为这些按钮元素分配onclick事件。

document.getElementById("btn1").onclick = getImage1Data;
document.getElementById("btn2").onclick = getImage2Data;

单击id为btn1的按钮元素时，将调用getImage1Data函数，单击id为btn2的按钮时，将调用函数getImage2Data。请记住在您的按钮创建代码上方的HTML页面上包含sample.js.

单击动态按钮时的getImageData

1 个答案: