我正在尝试在创建它们时设置这些span元素的onClick。
我试图通过其他有关此问题的信息来设置它,但我无法使用它。
<!doctype html>
<style>
@keyframes a {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<div id="myDIV">
<script>
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var x = 0
function ins() {
x = getRndInteger(0, window.innerWidth)
alert(x);
}
function myFunction() {
var para = document.createElement("SPAN");
para.style.position = "absolute";
x = getRndInteger(0, (window.innerWidth - 60))
para.style.left = x + "px"
var p = getRndInteger(0, (window.innerHeight - 60))
para.style.top = p + "px"
para.style.display = "inline-block;"
para.style.height = "50px"
para.style.width = "50px"
para.style.backgroundColor = "red"
para.style.borderRadius = "50px"
para.style.border = "1px solid black"
para.style.animation = "1s a linear"
para.id = "a"
document.getElementById("myDIV").appendChild(para);
}
</script>
<button onClick="ins();">Ins</button>
<button id="putin" onclick="myFunction()">Try it</button>
</div>
我想随机将圆圈放在文档上,当你点击它时它会创建另一个,这意味着我设置onClick是myFunction()
我想你可以做到:
para.onclick=myFunction
<!doctype html>
<style>
@keyframes a{
0% {opacity: 0;}
100%{opacity: 1;}
}
</style>
<div id="myDIV">
<script>
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
var x = 0
function ins(){
x = getRndInteger(0, window.innerWidth)
alert(x);}
function myFunction() {
var para = document.createElement("SPAN");
para.style.position = "absolute";
x = getRndInteger(0, (window.innerWidth - 60))
para.style.left = x + "px"
var p = getRndInteger(0, (window.innerHeight - 60))
para.style.top = p + "px"
para.style.display = "inline-block;"
para.style.height = "50px"
para.style.width = "50px"
para.style.backgroundColor="red"
para.style.borderRadius = "50px"
para.style.border = "1px solid black"
para.style.animation = "1s a linear"
para.id = "a"
para.onclick=myFunction
document.getElementById("myDIV").appendChild(para);
}
</script>
<button onClick="ins();">Ins</button>
<button id="putin" onclick="myFunction()">Try it</button>
</div>
你必须在你的函数中添加这一行:
para.onclick = myFunction;
根据dbramwell,我将补充说,当你通过javascript创建一个元素时,你可以/应该同时创建它的属性,因为你的引用仍然可以工作,因为它们被绑定到创建它的元素和范围。
所以在使用时
para.onclick = function(){}
你可以使用参考“para”到函数内部的点击源,并且这样设置例如
para.style.backgroundColor="green"
如果你想这样做,你可以使用这些方式:
用Html
<span onclick="yoursomefunction();">hello</span>
使用Javascript,使用.setAttribute()
var span = document.createElement("span");
span.innerText = "hello";
span.setAttribute("onclick","yousomefunction()");
document.body.appendChild(span);
使用Javascript,使用.onclick()
var span = document.createElement("span");
span.innerText = "hello";
span.onclick = function() { yousomefunction(); }
document.body.appendChild(span);
使用Javascript,使用.addEventListener()
var span = document.createElement("span");
span.innerText = "hello";
span.addEventListener("click", yousomefunction());
document.body.appendChild(span);
使用Javascript,使用.innerHTML
document.body.innerHTML += '<span onclick="yousomefunction();"></span>';
注意:您可以用任何函数替换yousomefunction(),例如:alert(“hi there!”);