1
私はjavascriptで2つの動的ボタンを作成しました。私はそれらをクリックすると、sampleImage1DataとgetImage2Dataを丁重にsample.jsから取得してほしいです。これらのボタンは動的に作成されるため、これを行う方法についてはわかりません。私はsample.jsファイルとともにHTMLコードを提供しています。ボタンが（つまり、ループの後に）動的に作成された後動的ボタンをクリックするとgetImageData
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
}