БЛОГ НА HUSL


Как сделать, чтобы при нажатии на див на нем появлялась цифра, а до этого ее не было видно

Автор вопроса: hnb_65 

let box
let container
for (let i = 0; i < 100; i++) {
  box = document.createElement('div');
  box.className = 'box';
  container = document.getElementById('container')
  container.appendChild(box);
  box.id = "box" + (i + 1)
}

let count = 0;
let kl = 0;

$('.box').on('click', (event) => {
  let box = event.currentTarget
  console.log(box)
  box.style.background = 'blue';
  if (event.currentTarget.id == "box1") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box9") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box35") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box44") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box49") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box53") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box67") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box83") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box93") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box97") {
    count++
    let p = $('#text1')
    p.text(count)
  }
  if (event.currentTarget.id == "box1") {
    document.getElementById("box1").style.background = 'white'
    document.getElementById("box1").style.backgroundImage = "url('pngegg (2).png')"
    console.log('Вы проиграли')
  }
  if (event.currentTarget.id == "box2") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box3").style.background = "blue"
    let h4 = $('#number1')
  }
  if (event.currentTarget.id == "box3") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box4").style.background = "blue"
  }
  if (event.currentTarget.id == "box4") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box5").style.background = "blue"
  }
  if (event.currentTarget.id == "box5") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box6").style.background = "blue"
  }
  if (event.currentTarget.id == "box6") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box7").style.background = "blue"
  }
  if (event.currentTarget.id == "box7") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box8").style.background = "blue"
  }
  if (event.currentTarget.id == "box8") {
    kl++
    let p = $('#text3')
    p.text(kl)

  }
  if (event.currentTarget.id == "box9") {
    document.getElementById("box9").style.background = 'white'
    document.getElementById("box9").style.backgroundImage = "url('pngegg (2).png')"
    console.log('Вы проиграли')
  }
  if (event.currentTarget.id == "box10") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box11").style.background = "blue"
  }
  if (event.currentTarget.id == "box11") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box12").style.background = "blue"
  }
  if (event.currentTarget.id == "box12") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box13").style.background = "blue"
  }
  if (event.currentTarget.id == "box13") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box14").style.background = "blue"
  }
  if (event.currentTarget.id == "box14") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box15").style.background = "blue"
  }
  if (event.currentTarget.id == "box15") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box16").style.background = "blue"
  }
  if (event.currentTarget.id == "box16") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box17").style.background = "blue"
  }
  if (event.currentTarget.id == "box17") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box18").style.background = "blue"
  }
  if (event.currentTarget.id == "box18") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box19").style.background = "blue"
  }
  if (event.currentTarget.id == "box19") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box20").style.background = "blue"
  }
  if (event.currentTarget.id == "box20") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box21").style.background = "blue"
  }
  if (event.currentTarget.id == "box21") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box22").style.background = "blue"
  }
  if (event.currentTarget.id == "box22") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box23").style.background = "blue"
  }
  if (event.currentTarget.id == "box23") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box24").style.background = "blue"
  }
  if (event.currentTarget.id == "box24") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box25").style.background = "blue"
  }
  if (event.currentTarget.id == "box25") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box26").style.background = "blue"
  }
  if (event.currentTarget.id == "box26") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box27").style.background = "blue"
  }
  if (event.currentTarget.id == "box27") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box28").style.background = "blue"
  }
  if (event.currentTarget.id == "box28") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box29").style.background = "blue"
  }
  if (event.currentTarget.id == "box29") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box30").style.background = "blue"
  }
  if (event.currentTarget.id == "box30") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box31").style.background = "blue"
  }
  if (event.currentTarget.id == "box31") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box32").style.background = "blue"
  }
  if (event.currentTarget.id == "box32") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box33").style.background = "blue"
  }
  if (event.currentTarget.id == "box33") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box34").style.background = "blue"
  }
  if (event.currentTarget.id == "box34") {
    kl++
    let p = $('#text3')
    p.text(kl)
  }
  if (event.currentTarget.id == "box35") {
    document.getElementById("box35").style.background = "white"
    document.getElementById("box35").style.backgroundImage = "url('pngegg (2).png')"
    console.log("Вы проиграли")
  }
  if (event.currentTarget.id == "box36") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box37").style.background = "blue"
  }
  if (event.currentTarget.id == "box37") {
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box38").style.background = "blue"
  }
  if (event.currentTarget.id == "box38") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box39").style.background = "blue"
  }
  if (event.currentTarget.id == "box39") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box40").style.background = "blue"
  }
  if (event.currentTarget.id == "box40") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box41").style.background = "blue"
  }
  if (event.currentTarget.id == "box41") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box42").style.background = "blue"
  }
  if (event.currentTarget.id == "box42") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box43").style.background = "blue"
  }
  if (event.currentTarget.id == "box43") {
    kl++
    let p = $('#text3')
    p.text(kl)

  }
  if (event.currentTarget.id == "box44") {
    document.getElementById("box44").style.background = "white"
    document.getElementById("box44").style.backgroundImage = "url('pngegg (2).png')"
    console.log("Вы проиграли")
  }
  if (event.currentTarget.id == "box45") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box46").style.background = "blue"
  }
  if (event.currentTarget.id == "box46") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box47").style.background = "blue"
  }
  if (event.currentTarget.id == "box47") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box48").style.background = "blue"
  }
  if (event.currentTarget.id == "box48") {
    kl++
    let p = $('#text3')
    p.text(kl)
  }
  if (event.currentTarget.id == "box49") {
    document.getElementById("box49").style.background = "white"
    document.getElementById("box49").style.backgroundImage = "url('pngegg (2).png')"
    console.log("Вы проиграли")
  }
  if (event.currentTarget.id == "box50") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box51").style.background = "blue"
  }
  if (event.currentTarget.id == "box51") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box52").style.background = "blue"
  }
  if (event.currentTarget.id == "box52") {
    kl++
    let p = $('#text3')
    p.text(kl)
  }
  if (event.currentTarget.id == "box53") {
    document.getElementById("box53").style.background = "white"
    document.getElementById("box53").style.backgroundImage = "url('pngegg (2).png')"
    console.log("Вы проиграли")
  }
  if (event.currentTarget.id == "box54") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box55").style.background = "blue"
  }
  if (event.currentTarget.id == "box55") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box56").style.background = "blue"
  }
  if (event.currentTarget.id == "box56") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box57").style.background = "blue"
  }
  if (event.currentTarget.id == "box57") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box58").style.background = "blue"
  }
  if (event.currentTarget.id == "box58") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box59").style.background = "blue"
  }
  if (event.currentTarget.id == "box59") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box60").style.background = "blue"
  }
  if (event.currentTarget.id == "box60") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box61").style.background = "blue"
  }
  if (event.currentTarget.id == "box61") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box62").style.background = "blue"
  }
  if (event.currentTarget.id == "box62") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box63").style.background = "blue"
  }
  if (event.currentTarget.id == "box63") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box64").style.background = "blue"
  }
  if (event.currentTarget.id == "box64") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box65").style.background = "blue"
  }
  if (event.currentTarget.id == "box65") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box66").style.background = "blue"
  }
  if (event.currentTarget.id == "box66") {
    kl++
    let p = $('#text3')
    p.text(kl)
  }
  if (event.currentTarget.id == "box67") {
    document.getElementById("box67").style.background = "white"
    document.getElementById("box67").style.backgroundImage = "url('pngegg (2).png')"
    console.log("Вы проиграли")
  }
  if (event.currentTarget.id == "box68") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box69").style.background = "blue"
  }
  if (event.currentTarget.id == "box69") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box70").style.background = "blue"
  }
  if (event.currentTarget.id == "box70") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box71").style.background = "blue"
  }
  if (event.currentTarget.id == "box71") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box72").style.background = "blue"
  }
  if (event.currentTarget.id == "box72") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box73").style.background = "blue"
  }
  if (event.currentTarget.id == "box73") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box74").style.background = "blue"
  }
  if (event.currentTarget.id == "box74") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box75").style.background = "blue"
  }
  if (event.currentTarget.id == "box75") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box76").style.background = "blue"
  }
  if (event.currentTarget.id == "box76") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box77").style.background = "blue"
  }
  if (event.currentTarget.id == "box77") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box78").style.background = "blue"
  }
  if (event.currentTarget.id == "box78") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box79").style.background = "blue"
  }
  if (event.currentTarget.id == "box79") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box80").style.background = "blue"
  }
  if (event.currentTarget.id == "box80") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box81").style.background = "blue"
  }
  if (event.currentTarget.id == "box81") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box82").style.background = "blue"
  }
  if (event.currentTarget.id == "box82") {
    kl++
    let p = $('#text3')
    p.text(kl)
  }
  if (event.currentTarget.id == "box83") {
    document.getElementById("box83").style.background = "white"
    document.getElementById("box83").style.backgroundImage = "url('pngegg (2).png')"
    console.log("Вы проиграли")
  }
  if (event.currentTarget.id == "box84") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box85").style.background = "blue"
  }
  if (event.currentTarget.id == "box85") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box86").style.background = "blue"
  }
  if (event.currentTarget.id == "box86") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box87").style.background = "blue"
  }
  if (event.currentTarget.id == "box87") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box88").style.background = "blue"
  }
  if (event.currentTarget.id == "box88") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box89").style.background = "blue"
  }
  if (event.currentTarget.id == "box89") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box90").style.background = "blue"
  }
  if (event.currentTarget.id == "box90") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box91").style.background = "blue"
  }
  if (event.currentTarget.id == "box91") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box92").style.background = "blue"
  }
  if (event.currentTarget.id == "box92") {
    kl++
    let p = $('#text3')
    p.text(kl)
  }
  if (event.currentTarget.id == "box93") {
    document.getElementById("box93").style.background = "white"
    document.getElementById("box93").style.backgroundImage = "url('pngegg (2).png')"
    console.log("Вы проиграли")
  }
  if (event.currentTarget.id == "box94") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box95").style.background = "blue"
  }
  if (event.currentTarget.id == "box95") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box96").style.background = "blue"
  }
  if (event.currentTarget.id == "box96") {
    kl++
    let p = $('#text3')
    p.text(kl)
  }
  if (event.currentTarget.id == "box97") {
    document.getElementById("box97").style.background = "white"
    document.getElementById("box97").style.backgroundImage = "url('pngegg (2).png')"
    console.log("Вы проиграли")
  }
  if (event.currentTarget.id == "box98") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box99").style.background = "blue"
  }
  if (event.currentTarget.id == "box99") {
    kl++
    kl++
    let p = $('#text3')
    p.text(kl)
    document.getElementById("box100").style.background = "blue"
  }
  if (event.currentTarget.id == "box100") {
    kl++
    let p = $('#text3')
    p.text(kl)

  }
})
.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 300px;
}

.box {
  height: 30px;
  width: 30px;
  border: 4px white solid;
  background-color: lightgrey;
  border: 5px outset silver;
}

#text {
  position: absolute;
  top: 0px;
  left: 430px;
}

#text1 {
  position: absolute;
  top: 0px;
  left: 545px;
}

#text2 {
  position: absolute;
  top: 15px;
  left: 430px;
}

#text3 {
  position: absolute;
  top: 15px;
  left: 490px;
}

#number1 {
  position: absolute;
  display: none;
  top: -5px;
  left: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<div class="container" id="container"></div>
<p id="text">взорвано бомб - </p>
<p id="text1"> 0</p>
<p id="text2">клетки - </p>
<p id="text3">0</p>
<h2 id="number1">1</h2>
<p id="number2">2</p>
<p id="number3">3</p>
<p id="number4">4</p>


Источник

Ответы (1 шт):

Автор решения: SwaD

Я не понял, какая цифра должна появляться в div, но думаю труда не доставит подставить свою:

const container = document.getElementById('container')
let count = 0;
const text1 = document.getElementById('text1');
const text3 = document.getElementById('text3');
let kl = 0;
// В каких клетках бомбы
const bombs = [1, 9, 35, 44, 49, 53, 67, 83, 93, 97];

for (let i = 0; i < 100; i++) {
  const box = document.createElement('div');
  box.className = 'box';
  box.id = 'box${i}';
  box.addEventListener('click', function() {
    if (bombs.includes(i)) {
      text1.innerText = ++count; // Счетчик нажатия на бомбы
      box.style.background = 'white';
      box.style.backgroundImage = "url('pngegg (2).png')";
      console.log('Вы проиграли');
      box.innerText = '*' // Вывод "цифры" в див
    } else {
      kl++; // счетчик нажатия
      if (!bombs.includes(i + 1)) kl++; // если следующая клетка без бомбы
      box.style.background = 'blue';
      text3.innerText = kl; // Общий счетчик
      box.innerText = '0' // Вывод цифры в див
    }
  })
  // Добавляем див в контейнер
  container.appendChild(box);
}
.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 300px;
}

.box {
  height: 30px;
  width: 30px;
  background-color: lightgrey;
  border: 5px outset silver;
  justify-content: center;
  display: grid;
  align-content: center;
}

#text {
  position: absolute;
  top: 0px;
  left: 430px;
}

#text1 {
  position: absolute;
  top: 0px;
  left: 545px;
}

#text2 {
  position: absolute;
  top: 15px;
  left: 430px;
}

#text3 {
  position: absolute;
  top: 15px;
  left: 490px;
}

#number1 {
  position: absolute;
  display: none;
  top: -5px;
  left: 60px;
}
<div class="container" id="container"></div>
<p id="text">взорвано бомб - </p>
<p id="text1"> 0</p>
<p id="text2">клетки - </p>
<p id="text3">0</p>
<h2 id="number1">1</h2>
<p id="number2">2</p>
<p id="number3">3</p>
<p id="number4">4</p>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.