使用onClick on< span>元素 [英] Using onClick on <span> elements

查看:76
本文介绍了使用onClick on< span>元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

创建这些跨度元素时,我试图设置它们的onClick.

I'm attempting to set an onClick of these span elements when I create them.

我试图通过其他有关此问题的信息为它设置信息,但是我无法使用它.

I have attempted to set it with information through other questions concerning this, but I haven't been able to work with it.

<!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()

I want to randomly put circles onto the document and when you click on it it creates another, meaning I set the onClick is 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>

这篇关于使用onClick on&lt; span&gt;元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆