单击动态按钮时获取ImageData

getImageData when clicking a dynamic button

本文关键字：获取 ImageData 按钮 动态 单击      更新时间：2024-03-26

我用javascript创建了两个动态按钮。当我点击它们时，我希望它们能从sample.js中分别获得Image1Data和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 
    }

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

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

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

相关文章：