I am new to js and I am quite busy, I have attached two js sets since I do not know how to do it separately. I have a js that is a raffle, it is a window open from the general panel with open () there, randomly, there are two buttons, one that gives a prize of $ 10,000 that will be added to the property balance of my object objPartida en my parent window (general panel) by using opener. The other button is an earthquake, which will destroy the LAST TWO buildings previously built (instance objects), these instance objects are in the park array of my objPartida object at the time of building them, then I want from the JS DRAW, access the panel general (parent window) to pop the last two elements of my park array, as well as physically remove the drawing of the building from the map that is the general panel, I tried to go through each cell of the array of cells using a for of loop and if the cell of that building coincides with the cell of my built building that is in the array, I put a dataset-building of 'empty' so it is deleted, but it only works on the last element, they are not erased at the last two array buildings. I do not know how to add all my JS and html's to be able to explain myself better, a greeting
SORTEO JS FILE
let buttons = document.getElementsByTagName('button');
let price = Math.floor(Math.random() * buttons.length) + 1;
let earthquake = price;
let premioDinero = 10000;
let celdas = opener.document.getElementsByClassName('celda');
if (opener === null) {
alert('Pasa primero por el panel generl')
location.assign("../index.html");
}
while(price == earthquake){
earthquake = Math.floor(Math.random() * buttons.length) + 1;
}
console.log('Price is in button ' + price);
console.log('Earthquake is in button ' + earthquake);
let premioBoton = buttons[price - 1], earthquakeBoton = buttons[earthquake - 1];
for (button of buttons) {
button.onclick = function(e){
if (e.target === premioBoton) {
alert('premio');
opener.contadorSaldoActual = opener.objPartida.saldo += premioDinero;
}
if (e.target === earthquakeBoton) {
alert('terremoto');
for (var cadaCelda of celdas) {
console.log(opener.objPartida.parque);
if (cadaCelda.dataset.celda === opener.objPartida.parque[opener.objPartida.parque.length - 1]._celda) {
cadaCelda.dataset.edificio = 'vacia';
opener.objPartida.parque.pop();
}
if (cadaCelda.dataset.celda === opener.objPartida.parque[opener.objPartida.parque.length - 2]._celda) {
cadaCelda.dataset.edificio = 'vacia';
opener.objPartida.parque.pop();
}
}
}
};
}
PANEL GENERAL JS
var objPartida = {
iniciada: false,
saldo: 3000,
recaudacion: 0,
visitantes: 0,
detalles: {},
parque: []
};
// Ejecución panel nueva partida
document.getElementById('nuevaPartida').onclick = function (){
if (!objPartida.iniciada) {
open("paneles/nuevapartida.html", 'Nueva partida', 'scrollbars=yes,width=700,height=1000,toolbar=yes');
} else {
msg('error', 'Ya has iniciado una partida previamente, no es posible crear una nueva partida');
}
};
// Ejecución panel recaudar entradas
document.getElementById('recaudarCaja').onclick = function() {
if (objPartida.iniciada) {
open("paneles/recaudarEntradas.html", 'Recaudar Caja', 'scrollbars=yes,width=500,height=400');
} else {
msg('error', 'Para acceder al panel de recaudación, inicia una partida.');
}
};
// Ejecución panel sorteo
document.getElementById('nuevoSorteo').onclick = function(){
if (objPartida.iniciada) {
if (objPartida.parque.length >= 2) {
open("paneles/nuevoSorteo.html", 'width=600, height=500, scrollbars=yes, toolbar=yes');
} else {
msg('error', 'Debe tener al menos dos edificios para participar');
}
} else {
msg('error', 'Para participar en el sorteo debe iniciar la partida');
}
};
// Ejecución panel atracciones
let celdas = document.getElementsByClassName('celda');
for (cadaCelda of celdas) {
cadaCelda.onclick = function() {
let elemento = this.dataset;
if (objPartida.iniciada) {
if (elemento.edificio === "vacia") {
let ventana = open("paneles/nuevoEdificio.html", 'Crear edificio', 'scrollbars=yes,width=500,height=800');
ventana.onload = function() {
ventana.document.getElementById('numeroCelda').textContent = elemento.celda;
}
} else {
msg('error', 'Ya hay un edificio en esta celda.');
}
} else {
msg('error', 'Para acceder al panel de construcción inicia una partida.');
}
}
}
// intervalo de actualización
let actualizador = setInterval( function(){
if (objPartida.iniciada) {
let parque = objPartida.parque;
// progresion parque
for (let edificio of parque) {
// console.log(edificio);
if (edificio.tipo === "atraccion") {
objPartida.visitantes += parseInt(edificio.visitantes);
objPartida.recaudacion += parseInt(edificio.visitantes * 2);
}
if (edificio.tipo === "puesto") {
objPartida.saldo += parseInt(edificio.ingresos);
}
}
// actualizacion interfaz
document.getElementById('contadorRecaudacion').textContent = objPartida.recaudacion + "$ en caja";
document.getElementById('contadorSaldoActual').textContent = objPartida.saldo + "$";
document.getElementById('contadorEdificios').textContent = parque.length + " edificios";
document.getElementById('contadorVisitantes').textContent = objPartida.visitantes + " visitantes";
}
}, 100);<!DOCTYPE html>
<html class="panelPrincipal">
<head>
<title>Hero City | Panel de juego</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="controles">
<section>
<img src="img/logo.png" alt="Logo">
</section>
<section>
<p>¡Bienvenid@, <span id="nombreUsuario">invitado</span>!</p>
<p>Partida creada el <span id="fechaPartida">-</span></p>
<button id="nuevaPartida">Nueva partida</button>
</section>
<section>
<img src="img/caja.png" alt="caja">
<p id="contadorSaldoActual">0 $</p>
<button id="recaudarCaja">Recaudar entradas</button>
</section>
<section>
<h3>Stats</h3>
<p id="contadorEdificios">0 edificios</p>
<p id="contadorVisitantes">0 visitantes</p>
<p id="contadorRecaudacion">0$ en entradas</p>
</section>
</div>
<div class="mapa">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="celda" data-edificio="vacia" data-celda="01"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="celda" data-edificio="vacia" data-celda="02"></div>
<div class="celda" data-edificio="vacia" data-celda="03"></div>
<div class="celda" data-edificio="vacia" data-celda="04"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="celda" data-edificio="vacia" data-celda="05"></div>
<div></div>
<div class="celda" data-edificio="vacia" data-celda="06"></div>
<div class="celda" data-edificio="vacia" data-celda="07"></div>
<div></div>
<div></div>
<div class="celda" data-edificio="vacia" data-celda="08"></div>
<div class="celda" data-edificio="vacia" data-celda="09"></div>
<div class="celda" data-edificio="vacia" data-celda="10"></div>
<div class="celda" data-edificio="vacia" data-celda="11"></div>
<div class="celda" data-edificio="vacia" data-celda="12"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="alerta"></div>
<button id="nuevoSorteo" style="position:fixed;top: 10px;right:10px;width: 200px;">Nuevo sorteo</button>
<script src="js/comun.js"></script>
<script src="js/panelGeneral.js"></script>
</body>
</html>