使用onClick on元素

问题描述 投票:0回答:4

我正在尝试在创建它们时设置这些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()

javascript html onclick
4个回答
3
投票

我想你可以做到:

         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>

0
投票

你必须在你的函数中添加这一行:

para.onclick = myFunction;

0
投票

根据dbramwell,我将补充说,当你通过javascript创建一个元素时,你可以/应该同时创建它的属性,因为你的引用仍然可以工作,因为它们被绑定到创建它的元素和范围。

所以在使用时

para.onclick = function(){}

你可以使用参考“para”到函数内部的点击源,并且这样设置例如

para.style.backgroundColor="green"

0
投票

如果你想这样做,你可以使用这些方式:

用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!”);

© www.soinside.com 2019 - 2024. All rights reserved.