Solucio botons celestials

De wikiserver
La revisió el 17:42, 16 feb 2021 per Jnoguera (Discussió | contribucions) (solució 3)
(dif) ← Versió més antiga | Versió actual (dif) | Versió més nova → (dif)
Dreceres ràpides: navegació, cerca

SOLUCIÓ 1 HTML:

<html>
    <head>
        <script type="text/javascript" src="bceles.js"></script>
    </head>
    <body></body>
    
</html>

Javascript:

window.listId = [];
window.numButton = -1;

function init(){
    createButton("func0");
    createButton("func1");
}

function func0(){
    //angelet
    var maxb = Math.floor(Math.random()*10);
    for(i=0;i<maxb;i++){
        createButton();
    }
        
}


function func1(){
    //diablet
    var maxelements = Math.min(20,window.listId.length);
    var numbuttondeleted = Math.floor(Math.random()*maxelements);
    for(i=0;i<numbuttondeleted;i++){
        deleteNode();
    }
    
    function deleteNode(){
        var index =  Math.floor(Math.random()*window.listId.length);
        var delboton = document.getElementById(window.listId[index]+"");
        delboton.parentNode.removeChild(delboton);
        window.listId.splice(index,1);
    }
    
}

function createButton(func){
    var div = document.createElement("span");
    div.setAttribute("id", window.numButton)
    var b = document.createElement("button"); 
    func = (func)? func : "func"+Math.floor(Math.random()*2);
    b.onclick = function(){eval(func +"()");};
    var t = document.createTextNode("b" + window.numButton);
    b.appendChild(t);
    div.appendChild(b);
    document.body.appendChild(div);  
    window.listId.push(window.numButton);
    window.numButton++;
}

window.onload = function(){init();};


SOLUCIÓ 2

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">

            function crearBotones() {
                //Numero random de botones a crear
                var max = Math.floor((Math.random() * 10) + 1);
                for (var i = 0; i < max; i++) {
                    //Numero random para crear Angel o Demonio
                    var x = Math.floor((Math.random() * 2) + 1);
                    if (x === 1){
                        crearAngel();
                    } else {
                        crearDemonio()
                    }     
                }
            }
            
            function borrarBotones() {
                var max = Math.floor((Math.random() * 5) + 1);
                var content = document.getElementById("content");
                for (var i = 0; i < max; i++) { 
                    //Creamos una array con todos los elementos button.
                    var but = document.getElementsByTagName("button");
                    //Generamos un numero aleatorio entre 1 y el max de botones que hay creados.
                    var del = Math.floor((Math.random() * but.length) + 1) - 1;
                    //Eliminamos el boton.
                    content.removeChild(but[del]); 
                }
            }
            
            function crearAngel(){
                var btn = document.createElement("button");
                var contenido = document.createTextNode("Angel");
                btn.appendChild(contenido);
                btn.addEventListener('click', crearBotones, false);
                document.getElementById("content").appendChild(btn);
            }
            
            function crearDemonio(){
                var btn = document.createElement("button");
                var contenido = document.createTextNode("Demonio");
                btn.appendChild(contenido);
                btn.addEventListener('click', borrarBotones, false);
                document.getElementById("content").appendChild(btn);
            }

        </script>
    </head>
    <body>
 <div id="content">
<button onclick="crearBotones()">Angel</button>
<button onclick="borrarBotones()">Demonio</button>
</div>
    </body>
</html>

solució 3

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
	<title>Botons Celestials</title>
	<script type="text/javascript">
         window.onload = function() {
		function borra() {
			let n = Math.floor((Math.random() * 20) +1);
			for (let i = 0; i < n; i++) {
					 
                        document.body.removeChild(document.body.lastChild);
				}
			}
		function crea() {
			let n = Math.floor((Math.random() * 10) +1);
			for (let i = 0; i < n; i++) {
			let new_button = document.createElement('button');
			let m = Math.floor((Math.random() * 2) +1);
			var text;
			
                         if (m == 1) {
			    text = document.createTextNode('Angelet');
			    new_button.addEventListener('click', crea);
		         } else {
			    text = document.createTextNode('Diablet');
			     new_button.addEventListener('click', borra);
				 }
			     new_button.appendChild(text);
					
			 document.body.appendChild(new_button);
				}
			}
			
			document.getElementById('ang').addEventListener('click', crea);

			document.getElementById('dem').addEventListener('click', borra);
		}
	</script>
</head>
<body>
	<button id="ang">Angelet</button>
	<button id="dem">Diablet</button>
	<br>

</body>
</html>