надо сделать так чтобы при клике на дивы у которых id box1 box9 box35 box44 box49 box53 box67 box83 box93 box97 ниже допишу
вместо того чтобы у них менять бекграунды надо вставить картинку начал только с box1 и на нем не работает. исправьте ошибку на строке где первый if а то я написал style.backgroundImage = "pngegg (2).png" я нажимаю на первый бокс там картинки нет
вот код js и html:
$('.box').on('click', (event) => {
let box = event.currentTarget
console.log(box)
box.style.background = 'blue';
if (event.currentTarget.id == "box1") {
document.getElementById("box1").style.backgroundImage = "pngegg (2).png"
alert("Вы проиграли")
document.getElementById("box1").style.background = "white"
}
if (event.currentTarget.id == "box2") {
document.getElementById("box3").style.background = "blue"
}
if (event.currentTarget.id == "box3") {
document.getElementById("box4").style.background = "blue"
}
if (event.currentTarget.id == "box4") {
document.getElementById("box5").style.background = "blue"
}
if (event.currentTarget.id == "box5") {
document.getElementById("box6").style.background = "blue"
}
if (event.currentTarget.id == "box6") {
document.getElementById("box7").style.background = "blue"
}
if (event.currentTarget.id == "box7") {
document.getElementById("box8").style.background = "blue"
}
if (event.currentTarget.id == "box8") {
document.getElementById("box9").style.background = "blue"
}
if (event.currentTarget.id == "box9") {
document.getElementById("box9").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box10") {
document.getElementById("box11").style.background = "blue"
}
if (event.currentTarget.id == "box11") {
document.getElementById("box12").style.background = "blue"
}
if (event.currentTarget.id == "box12") {
document.getElementById("box13").style.background = "blue"
}
if (event.currentTarget.id == "box13") {
document.getElementById("box14").style.background = "blue"
}
if (event.currentTarget.id == "box14") {
document.getElementById("box15").style.background = "blue"
}
if (event.currentTarget.id == "box15") {
document.getElementById("box16").style.background = "blue"
}
if (event.currentTarget.id == "box16") {
document.getElementById("box17").style.background = "blue"
}
if (event.currentTarget.id == "box17") {
document.getElementById("box18").style.background = "blue"
}
if (event.currentTarget.id == "box18") {
document.getElementById("box19").style.background = "blue"
}
if (event.currentTarget.id == "box19") {
document.getElementById("box20").style.background = "blue"
}
if (event.currentTarget.id == "box20") {
document.getElementById("box21").style.background = "blue"
}
if (event.currentTarget.id == "box21") {
document.getElementById("box22").style.background = "blue"
}
if (event.currentTarget.id == "box22") {
document.getElementById("box23").style.background = "blue"
}
if (event.currentTarget.id == "box23") {
document.getElementById("box24").style.background = "blue"
}
if (event.currentTarget.id == "box24") {
document.getElementById("box25").style.background = "blue"
}
if (event.currentTarget.id == "box25") {
document.getElementById("box26").style.background = "blue"
}
if (event.currentTarget.id == "box26") {
document.getElementById("box27").style.background = "blue"
}
if (event.currentTarget.id == "box27") {
document.getElementById("box28").style.background = "blue"
}
if (event.currentTarget.id == "box29") {
document.getElementById("box30").style.background = "blue"
}
if (event.currentTarget.id == "box30") {
document.getElementById("box31").style.background = "blue"
}
if (event.currentTarget.id == "box31") {
document.getElementById("box32").style.background = "blue"
}
if (event.currentTarget.id == "box32") {
document.getElementById("box33").style.background = "blue"
}
if (event.currentTarget.id == "box33") {
document.getElementById("box34").style.background = "blue"
}
if (event.currentTarget.id == "box34") {
document.getElementById("box35").style.background = "blue"
}
if (event.currentTarget.id == "box35") {
document.getElementById("box35").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box36") {
document.getElementById("box37").style.background = "blue"
}
if (event.currentTarget.id == "box37") {
document.getElementById("box38").style.background = "blue"
}
if (event.currentTarget.id == "box38") {
document.getElementById("box39").style.background = "blue"
}
if (event.currentTarget.id == "box39") {
document.getElementById("box40").style.background = "blue"
}
if (event.currentTarget.id == "box40") {
document.getElementById("box41").style.background = "blue"
}
if (event.currentTarget.id == "box41") {
document.getElementById("box42").style.background = "blue"
}
if (event.currentTarget.id == "box42") {
document.getElementById("box43").style.background = "blue"
}
if (event.currentTarget.id == "box43") {
document.getElementById("box44").style.background = "blue"
}
if (event.currentTarget.id == "box44") {
document.getElementById("box44").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box45") {
document.getElementById("box46").style.background = "blue"
}
if (event.currentTarget.id == "box46") {
document.getElementById("box47").style.background = "blue"
}
if (event.currentTarget.id == "box47") {
document.getElementById("box48").style.background = "blue"
}
if (event.currentTarget.id == "box48") {
document.getElementById("box49").style.background = "blue"
}
if (event.currentTarget.id == "box49") {
document.getElementById("box49").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box50") {
document.getElementById("box51").style.background = "blue"
}
if (event.currentTarget.id == "box51") {
document.getElementById("box52").style.background = "blue"
}
if (event.currentTarget.id == "box52") {
document.getElementById("box53").style.background = "blue"
}
if (event.currentTarget.id == "box53") {
document.getElementById("box53").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box54") {
document.getElementById("box55").style.background = "blue"
}
if (event.currentTarget.id == "box55") {
document.getElementById("box56").style.background = "blue"
}
if (event.currentTarget.id == "box56") {
document.getElementById("box57").style.background = "blue"
}
if (event.currentTarget.id == "box57") {
document.getElementById("box58").style.background = "blue"
}
if (event.currentTarget.id == "box58") {
document.getElementById("box59").style.background = "blue"
}
if (event.currentTarget.id == "box59") {
document.getElementById("box60").style.background = "blue"
}
if (event.currentTarget.id == "box60") {
document.getElementById("box61").style.background = "blue"
}
if (event.currentTarget.id == "box61") {
document.getElementById("box62").style.background = "blue"
}
if (event.currentTarget.id == "box62") {
document.getElementById("box63").style.background = "blue"
}
if (event.currentTarget.id == "box63") {
document.getElementById("box64").style.background = "blue"
}
if (event.currentTarget.id == "box64") {
document.getElementById("box65").style.background = "blue"
}
if (event.currentTarget.id == "box65") {
document.getElementById("box66").style.background = "blue"
}
if (event.currentTarget.id == "box66") {
document.getElementById("box67").style.background = "blue"
}
if (event.currentTarget.id == "box67") {
document.getElementById("box67").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box68") {
document.getElementById("box69").style.background = "blue"
}
if (event.currentTarget.id == "box69") {
document.getElementById("box70").style.background = "blue"
}
if (event.currentTarget.id == "box70") {
document.getElementById("box71").style.background = "blue"
}
if (event.currentTarget.id == "box71") {
document.getElementById("box72").style.background = "blue"
}
if (event.currentTarget.id == "box72") {
document.getElementById("box73").style.background = "blue"
}
if (event.currentTarget.id == "box73") {
document.getElementById("box74").style.background = "blue"
}
if (event.currentTarget.id == "box74") {
document.getElementById("box75").style.background = "blue"
}
if (event.currentTarget.id == "box75") {
document.getElementById("box76").style.background = "blue"
}
if (event.currentTarget.id == "box76") {
document.getElementById("box77").style.background = "blue"
}
if (event.currentTarget.id == "box77") {
document.getElementById("box78").style.background = "blue"
}
if (event.currentTarget.id == "box78") {
document.getElementById("box79").style.background = "blue"
}
if (event.currentTarget.id == "box79") {
document.getElementById("box80").style.background = "blue"
}
if (event.currentTarget.id == "box80") {
document.getElementById("box81").style.background = "blue"
}
if (event.currentTarget.id == "box81") {
document.getElementById("box82").style.background = "blue"
}
if (event.currentTarget.id == "box82") {
document.getElementById("box83").style.background = "blue"
}
if (event.currentTarget.id == "box83") {
document.getElementById("box83").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box84") {
document.getElementById("box85").style.background = "blue"
}
if (event.currentTarget.id == "box85") {
document.getElementById("box86").style.background = "blue"
}
if (event.currentTarget.id == "box86") {
document.getElementById("box87").style.background = "blue"
}
if (event.currentTarget.id == "box87") {
document.getElementById("box88").style.background = "blue"
}
if (event.currentTarget.id == "box88") {
document.getElementById("box89").style.background = "blue"
}
if (event.currentTarget.id == "box89") {
document.getElementById("box90").style.background = "blue"
}
if (event.currentTarget.id == "box90") {
document.getElementById("box91").style.background = "blue"
}
if (event.currentTarget.id == "box91") {
document.getElementById("box92").style.background = "blue"
}
if (event.currentTarget.id == "box92") {
document.getElementById("box93").style.background = "blue"
}
if (event.currentTarget.id == "box93") {
document.getElementById("box93").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box94") {
document.getElementById("box95").style.background = "blue"
}
if (event.currentTarget.id == "box95") {
document.getElementById("box96").style.background = "blue"
}
if (event.currentTarget.id == "box96") {
document.getElementById("box97").style.background = "blue"
}
if (event.currentTarget.id == "box97") {
document.getElementById("box97").style.background = "white"
alert("Вы проиграли")
}
if (event.currentTarget.id == "box98") {
document.getElementById("box99").style.background = "blue"
}
if (event.currentTarget.id == "box99") {
document.getElementById("box100").style.background = "blue"
}
}).container {
display: grid;
grid-template-columns: repeat(10, 1fr);
width: 300px;
}
.box {
height: 30px;
border: 1px black solid;
}<!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">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
<div class="box" id="box7"></div>
<div class="box" id="box8"></div>
<div class="box" id="box9"></div>
<div class="box" id="box10"></div>
<div class="box" id="box11"></div>
<div class="box" id="box12"></div>
<div class="box" id="box13"></div>
<div class="box" id="box14"></div>
<div class="box" id="box15"></div>
<div class="box" id="box16"></div>
<div class="box" id="box17"></div>
<div class="box" id="box18"></div>
<div class="box" id="box19"></div>
<div class="box" id="box20"></div>
<div class="box" id="box21"></div>
<div class="box" id="box22"></div>
<div class="box" id="box23"></div>
<div class="box" id="box24"></div>
<div class="box" id="box25"></div>
<div class="box" id="box26"></div>
<div class="box" id="box27"></div>
<div class="box" id="box28"></div>
<div class="box" id="box29"></div>
<div class="box" id="box30"></div>
<div class="box" id="box31"></div>
<div class="box" id="box32"></div>
<div class="box" id="box33"></div>
<div class="box" id="box34"></div>
<div class="box" id="box35"></div>
<div class="box" id="box36"></div>
<div class="box" id="box37"></div>
<div class="box" id="box38"></div>
<div class="box" id="box39"></div>
<div class="box" id="box40"></div>
<div class="box" id="box41"></div>
<div class="box" id="box42"></div>
<div class="box" id="box43"></div>
<div class="box" id="box44"></div>
<div class="box" id="box45"></div>
<div class="box" id="box46"></div>
<div class="box" id="box47"></div>
<div class="box" id="box48"></div>
<div class="box" id="box49"></div>
<div class="box" id="box50"></div>
<div class="box" id="box51"></div>
<div class="box" id="box52"></div>
<div class="box" id="box53"></div>
<div class="box" id="box54"></div>
<div class="box" id="box55"></div>
<div class="box" id="box56"></div>
<div class="box" id="box57"></div>
<div class="box" id="box58"></div>
<div class="box" id="box59"></div>
<div class="box" id="box60"></div>
<div class="box" id="box61"></div>
<div class="box" id="box62"></div>
<div class="box" id="box63"></div>
<div class="box" id="box64"></div>
<div class="box" id="box65"></div>
<div class="box" id="box66"></div>
<div class="box" id="box67"></div>
<div class="box" id="box68"></div>
<div class="box" id="box69"></div>
<div class="box" id="box70"></div>
<div class="box" id="box71"></div>
<div class="box" id="box72"></div>
<div class="box" id="box73"></div>
<div class="box" id="box74"></div>
<div class="box" id="box75"></div>
<div class="box" id="box76"></div>
<div class="box" id="box77"></div>
<div class="box" id="box78"></div>
<div class="box" id="box79"></div>
<div class="box" id="box80"></div>
<div class="box" id="box81"></div>
<div class="box" id="box82"></div>
<div class="box" id="box83"></div>
<div class="box" id="box84"></div>
<div class="box" id="box85"></div>
<div class="box" id="box86"></div>
<div class="box" id="box87"></div>
<div class="box" id="box88"></div>
<div class="box" id="box89"></div>
<div class="box" id="box90"></div>
<div class="box" id="box91"></div>
<div class="box" id="box92"></div>
<div class="box" id="box93"></div>
<div class="box" id="box94"></div>
<div class="box" id="box95"></div>
<div class="box" id="box96"></div>
<div class="box" id="box97"></div>
<div class="box" id="box98"></div>
<div class="box" id="box99"></div>
<div class="box" id="box100"></div>
</div>
</body>Ответы (2 шт):
Автор решения: Алексей Шиманский
→ Ссылка
Если вопрос в том, как добавить картинку, то ответ: вместо "pngegg (2).png" надо написать ровно такое же значение, какое бы было если это было бы в css? то есть "url(путь к картинке)"
Если вопрос в том, что как выполнить какие-то условия в зависимости от блока, то, напишу как можно сделать.
- Объявляете массив объектов от 0 до 99. В каждой ячейке будет объект в стиле
{style: xxx, result: "win", и т.д.} - Навешиваете на ячейки общий слушатель клика.
- При клике, считываете у события индекс кликнутой ячейки и по этому индексу из массива берёте объект. И применяете те параметры, которые в этом объекте прописаны.
Второй вариант похож на первый, только чуть проще:
Надо сделать мапу (ключ -> значение), на какие индексы ячейки что нужно сделать. И потом, опять же, считываете у события индекс кликнутой ячейки и в массиве с настройками берёте данные для этого индекса.
Ооооочень примерный пример:
{
[0,1,4,6,7]: 'blue'
[5,8,9,34,2]: 'yellow'
}
Это просто примерно
Всё остальное, извините, извращение - не нужно
Что нужно понять из ответа: нужно предварительно в коде запрограммировать какие-то мапы, а потом этим пользоваться. В итоге код сведётся к простому (псевдокод):
$('.box').on('click', (event) => {
el = map[event.index];
this.style = el.style;
el.message ? alert(el.message) : '';
}
Автор решения: pyduti
→ Ссылка
Если проблема заключается в отображение картинки то вам нужно правильно указать путь к картинке
document.getElementById("box1").style.backgroundImage = "url(*путь к картинке*)"