как поменять цвет текста у box inner text

Question

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"
   box.innerText = '1' 
}

if(event.currentTarget.id == "box3"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box4").style.background="blue"
   box.innerText = '1' 
}

if(event.currentTarget.id == "box4"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box5").style.background="blue"
   box.innerText = '1' 
}

if(event.currentTarget.id == "box5"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box6").style.background="blue"
   box.innerText = '3' 
}

if(event.currentTarget.id == "box6"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box7").style.background="blue"
   box.innerText = '1' 
}

if(event.currentTarget.id == "box7"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box8").style.background="blue"
   box.innerText = '1' 
}

if(event.currentTarget.id == "box8"){
  kl++
  let p = $('#text3')
  p.text(kl)
   box.innerText = '1' 
}

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"
   box.innerText = '1' 
}

if(event.currentTarget.id == "box11"){
kl++
kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box12").style.background="blue"
   box.innerText = '1' 
}

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"
   box.innerText = '1' 
}

if(event.currentTarget.id == "box15"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box16").style.background="blue"
   box.innerText = '1' 
}

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"
   box.innerText = '2 ' 
}

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"
  box.innerText = '1'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box24"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box25").style.background="blue"
  box.innerText = '1'
}

if(event.currentTarget.id == "box25"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box26").style.background="blue"
  box.innerText = '1'
}

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"
  box.innerText = '2'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box32"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box33").style.background="blue"
  box.innerText = '1'
}

if(event.currentTarget.id == "box33"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box34").style.background="blue"
  box.innerText = '2'
}

if(event.currentTarget.id == "box34"){
  kl++
  let p = $('#text3')
  p.text(kl)
  box.innerText = '2'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box37"){
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box38").style.background="blue"
  box.innerText = '2'
}

if(event.currentTarget.id == "box38"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box39").style.background="blue"
  box.innerText = '1'
}

if(event.currentTarget.id == "box39"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box40").style.background="blue"
  box.innerText = '3'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box42"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box43").style.background="blue"
  box.innerText = '1'
}

if(event.currentTarget.id == "box43"){
  kl++
  let p = $('#text3')
  p.text(kl)
  box.innerText = '2'
}

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"
  box.innerText = '2'
}

if(event.currentTarget.id == "box46"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box47").style.background="blue"
  box.innerText = '2'
}

if(event.currentTarget.id == "box47"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box48").style.background="blue"
  box.innerText = '2'
}

if(event.currentTarget.id == "box48"){
  kl++
  let p = $('#text3')
  p.text(kl)
  box.innerText = '2'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box51"){
kl++
kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box52").style.background="blue"
  box.innerText = '1'
}

if(event.currentTarget.id == "box52"){
kl++
  let p = $('#text3')
  p.text(kl)
  box.innerText = '1'
}

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"
  box.innerText = '2'
}

if(event.currentTarget.id == "box55"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box56").style.background="blue"
      box.innerText = '2'
}

if(event.currentTarget.id == "box56"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box57").style.background="blue"
      box.innerText = '1'
}

if(event.currentTarget.id == "box57"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)    
  document.getElementById("box58").style.background="blue"
  box.innerText = '1'
}

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"
  box.innerText = '1'
}

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"
  box.innerText = '3'
}

if(event.currentTarget.id == "box64"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)    
  document.getElementById("box65").style.background="blue"
  box.innerText = '2'
}

if(event.currentTarget.id == "box65"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)    
  document.getElementById("box66").style.background="blue"
  box.innerText = '2'
}

if(event.currentTarget.id == "box66"){
  kl++
  let p = $('#text3')
  p.text(kl)    
  box.innerText = '1'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box69"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box70").style.background="blue"
  box.innerText = '2'
}

if(event.currentTarget.id == "box70"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box71").style.background="blue"
  box.innerText = '1'
}

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"
  box.innerText = '3'
}

if(event.currentTarget.id == "box74"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box75").style.background="blue"
  box.innerText = '1'
}

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"
  box.innerText = '2'
}

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"
  box.innerText = '1'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box82"){
  kl++
  let p = $('#text3')
  p.text(kl)
  box.innerText = '1'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box85"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box86").style.background="blue"
  box.innerText = '1'
}

if(event.currentTarget.id == "box86"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box87").style.background="blue"
  box.innerText = '1'
}

if(event.currentTarget.id == "box87"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box88").style.background="blue"
  box.innerText = '3'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box92"){
  kl++
  let p = $('#text3')
  p.text(kl)
  box.innerText = '1'
}

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"
  box.innerText = '2'
}

if(event.currentTarget.id == "box95"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box96").style.background="blue"
  box.innerText = '2'
}

if(event.currentTarget.id == "box96"){
  kl++
  let p = $('#text3')
  p.text(kl)
  box.innerText = '2'
}

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"
  box.innerText = '1'
}

if(event.currentTarget.id == "box99"){
  kl++
  kl++
  let p = $('#text3')
  p.text(kl)
  document.getElementById("box100").style.background="blue"
  box.innerText = '1'
}

if(event.currentTarget.id == "box100"){
  kl++
  let p = $('#text3')
  p.text(kl)
box.innerText = '1'
}
})

.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;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styletyr.css">
</head>
<body>
  <div class="container" id="container"></div>  
  <p id="text">взорвано бомб - </p>
  <p id="text1"> 0</p>
  <p id="text2">клетки - </p>
  <p id="text3">0</p>
</body>
</html>

Answer 1

Для изменения цвета текста используется свойство color.

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

<div class="box">2</div>

БЛОГ НА HUSL

как поменять цвет текста у box inner text

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