Using onClick on elements

问题

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>

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

回答1:

I think you can just do:

         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>

回答2:

You have to add this line inside your function:

para.onclick = myFunction;

回答3:

According to dbramwell I will add, that when you create an element by javascript you can/should create it's properties at the same time, as your references will still work as they got binded that way to the element and the scope that created it.

So when using

para.onclick = function(){}

you can use the reference "para" to the source of the click inside of the function and that way set e.g.

para.style.backgroundColor="green"

回答4:

If you want to do that you can use these ways:

With Html

<span onclick="yoursomefunction();">hello</span>

With Javascript, Using .setAttribute()

var span = document.createElement("span");
span.innerText = "hello";
span.setAttribute("onclick","yousomefunction()");
document.body.appendChild(span);

With Javascript, Using .onclick()

var span = document.createElement("span");
span.innerText = "hello";
span.onclick = function() { yousomefunction(); }
document.body.appendChild(span);

With Javascript, Using .addEventListener()

var span = document.createElement("span");
span.innerText = "hello";
span.addEventListener("click", yousomefunction());
document.body.appendChild(span);

With Javascript, Using .innerHTML

document.body.innerHTML += '<span onclick="yousomefunction();"></span>';

Note: You can replace yousomefunction() with any function, for example: alert("hi there!");

来源：https://stackoverflow.com/questions/55903412/using-onclick-on-span-elements

标签

javascript

html

onclick

Using onClick on <span> elements

问题

回答1:

回答2:

回答3:

回答4: