When double clicking on the image of the ball a copy of the image is inserted into one of the divs randomly using this code snippet

Question

When double clicking on the image of the ball a copy of the image is inserted into one of the divs randomly using this code snippet

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

    <body>
        <div id="princ">
            <div class="princ" id="header"></div>

            <div id="div1" class="interna">DIV 1</div>
            <div id="div2" class="interna">DIV 2</div>
            <div id="div3" class="interna">DIV 3</div>
            <div id="div4" class="interna">DIV 4</div>
            TEXTO:<input type="text" id="txtTeste">
            <input type="button" id="btOk" value="ok"><br>
            COR DE FUNDO:<input type="color" id="clrCor">
            <div id="divBola"><img src="imagens/bola.jpg" alt="bola" id="bola"> 
 </div>
            <div id="rodape">Rodapé</div>
        </div>      
        <script src="js/funcoes.js">
        </script>
    </body>
-----script-----


var bol = document.getElementById("bola");

var x = document.getElementsByClassName("interna");


bol.ondblclick = function(){

   var I = parseInt(Math.random()*3);

};

javascript html5

asked by anonymous 18.05.2018 / 03:08

2 answers

Data Structure, Double-chained List. Doubt about the constructor of the DoubleList class Doubt over WEBVIEW on Phonegap

score 0 · Answer 1

You basically insert a template inside the div

    var bol = document.getElementById("bola");
    var x = document.getElementsByClassName("interna");
    bol.onclick = function(){
        var I = parseInt(Math.random()*4);
        x[I].innerHTML = '<img src="http://gorilaclube.vteximg.com.br/arquivos/ids/181368-292-292/44005108-Cofrinha-bola-de-futebol.jpg"width="100" alt="bola" id="bola">';
    };

<div id="princ">
        <div class="princ" id="header"></div>
        <div id="div1" class="interna">DIV 1</div>
        <div id="div2" class="interna">DIV 2</div>
        <div id="div3" class="interna">DIV 3</div>
        <div id="div4" class="interna">DIV 4</div>
        TEXTO:<input type="text" id="txtTeste">
        <input type="button" id="btOk" value="ok"><br>
        COR DE FUNDO:<input type="color" id="clrCor">
        <div id="divBola"><img src="http://gorilaclube.vteximg.com.br/arquivos/ids/181368-292-292/44005108-Cofrinha-bola-de-futebol.jpg"width="100" alt="bola" id="bola"> 
        </div>
    <div id="rodape">Rodapé</div>   
</div>

score 0 · Answer 2

First change the value in Math.random() from 3 to 4 , so the value generated will be 0 to 3 , which will be the reference to get id of div s.

Then you can clone the img element of the ball and make a appendChild . I've also created a bolid variable that is incremented each clone to generate a single id for each new image, since id must be unique on the page :

var bol = document.getElementById("bola");
var x = document.getElementsByClassName("interna");
var bolid = 0; // variável para gerar ids
bol.ondblclick = function(){
   var I = parseInt(Math.random()*4);
   var clone = bol.cloneNode();
   clone.id += bolid++; // atribuir um id único
   document.getElementById("div"+(I+1)).appendChild(clone);
};

<div id="princ">
   <div class="princ" id="header"></div>

   <div id="div1" class="interna">DIV 1</div>
   <div id="div2" class="interna">DIV 2</div>
   <div id="div3" class="interna">DIV 3</div>
   <div id="div4" class="interna">DIV 4</div>
   TEXTO:<input type="text" id="txtTeste">
   <input type="button" id="btOk" value="ok"><br>
   COR DE FUNDO:<input type="color" id="clrCor">
   <div id="divBola"><img height="50" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"alt="bola" id="bola"> 
   </div>
   <div id="rodape">Rodapé</div>
</div>