Question

创建这些跨度元素时，我试图设置它们的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（）

Answer 1

我认为您可以做到：

         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>

Answer 2

您必须在函数中添加以下行：

para.onclick = myFunction;

Answer 3

根据dbramwell的说明，当您使用javascript创建元素时，您可以/应该同时创建它的属性，因为您的引用仍然可以正常工作，因为它们通过这种方式绑定到元素和所创建的范围它。

所以在使用时

para.onclick = function(){}

您可以将引用“ para”用于函数内部点击的来源，并以这种方式设置例如

para.style.backgroundColor="green"

Answer 4

如果要这样做，可以使用以下方法：

使用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！”）;

在<span>元素上使用onClick

4 个答案: