Untitled
unknown
html
a year ago
5.1 kB
3
Indexable
Never
<html> <head> <title> Crea Rettangolo al Click - Esercizio 2 </title> </head> <body> <h1> Clicca un punto qualsiasi per creare un rettangolo randomico. Clicca sullo stesso per rimuoverlo. </h1> <script> /* Funzione al click del mouse, stampa su schemro un rettangolo di dimensione min 50x50 e massimo 400x400 e di colore randomico. * All'interno di ogni rettangolo viene visualizzato un testo con il numero determinato in base all'ordine di creazione e lo specifico colore. */ document.addEventListener("click", function () { // Verifica che l'elemento cliccato, se non nullo, sia un rettangolo. In caso positivo lo rimuove, in caso negativo ne crea uno nuovo // nel punto cliccato var elementoSelezionato = document.elementFromPoint(event.clientX, event.clientY); // Descrizione riguardo al numero che indica il numero di creazione del rettangolo var testoNumeroRettangolo = "Rettangolo numero: "; // Descrizione riguardo al colore del rettangolo var testoColoreRettangolo = " Colore: "; if (elementoSelezionato !== null && elementoSelezionato.id == "rettangolo") { // Rimuove il rettangolo selezionato dal documento elementoSelezionato.remove(); console.log("Rettangolo cliccato rimosso"); // Ricava una lista di tutti i rettangoli presenti var listaRettangoli = document.querySelectorAll("#rettangolo"); // Ottiene il numero totale di rettangoli numeroRettangoli = listaRettangoli.length; console.log("Numero totale rettangoli: " + numeroRettangoli); // Aggiorna il testo di ogni rettangolo con il corretto numero for(let i = 0; i < numeroRettangoli; i++) { // Ottiene le varie parti del testo diviso dallo spazio per ricavare il colore (si trovo all'ultima posizione) var partiTesto = listaRettangoli[i].textContent.split(" "); // Aggiorna il testo con il corretto numero e il colore specifico (che rimane invariato) listaRettangoli[i].textContent = testoNumeroRettangolo + (i + 1) + testoColoreRettangolo + partiTesto[(partiTesto.length - 1)]; } console.log("Testo rettangoli aggiornato"); } else { // Genera misure random per l'altezza e la larghezza del rettangolo da creare var numPxAltezza = Math.floor(Math.random() * (350)) + 50; console.log("Altezza randomica: " + numPxAltezza); var numPxLarghezza = Math.floor(Math.random() * (350)) + 50; console.log("Larghezza randomica: " + numPxLarghezza); // Crea un array dei vari colori da poter scegliere var coloriPossibili = [ "red", "green", "blue", "yellow", "orange", "purple", "pink", "brown", "gray", "black" ]; // Ottiene un indice randomico dal totale dei colori possibili var indiceRandom = Math.floor(Math.random() * (coloriPossibili.length -1)); // Ottiene il colore attraverso l'indice randomico var coloreRandom = coloriPossibili[indiceRandom]; console.log("Colore randomico: " + coloreRandom); // Crea un nuovo rettangolo var rettangolo = document.createElement("div"); rettangolo.id = "rettangolo"; rettangolo.style.width = numPxLarghezza + "px"; rettangolo.style.height = numPxAltezza + "px"; rettangolo.style.backgroundColor = coloreRandom; rettangolo.style.position = "absolute"; // Calcolo quanti rettangoli sono presenti numeroRettangoli = document.querySelectorAll("#rettangolo").length; console.log("Numero rettangoli gia creati: " + numeroRettangoli); // Imposto il testo con il numero dei rettangoli totali e il colore specifico rettangolo.textContent = testoNumeroRettangolo + (numeroRettangoli + 1) + testoColoreRettangolo + coloreRandom; console.log("Testo del nuovo rettangolo aggiunto"); // Imposta le coordinate del rettangolo in base al click rettangolo.style.left = event.clientX + "px"; rettangolo.style.top = event.clientY + "px"; // Aggiungi l'elemento al documento document.body.appendChild(rettangolo); console.log("Rettangolo aggiunto") } } ); </script> </body> </html>