我用 JavaScript 创建了两个动态按钮。当我单击它们时，我希望它们能够从 example.js 中获取 Image1Data 和 getImage2Data 。由于这些按钮是动态创建的，我不确定如何去做。我将提供 html 代码以及 example.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 页面上的按钮创建代码上方包含 example.js。
关于javascript - 单击动态按钮时获取ImageData，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36505646/