When applying a double click on the image of the ball a copy of the image is inserted in one of the Ivs randomly using this code snippet

Asked

Viewed 48 times

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

  • What is doubt, error, or difficulty?

2 answers

0

Basically you 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>

  • Can you explain why x[i]

  • @Arquiro O x[I] will select a div.interna random.

0

First change the value on Math.random() of 3 for 4, so the generated value will be 0 to 3, which will be the reference to take the id of divs.

Then you can clone the element img of the ball and make a appendChild. I also created a variable bolid which is increased with each cloning to generate a id unique to each new image, since one id should 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>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.