БЛОГ НА HUSL


после того как я нажал на кнопку с айди ans1 а потом нажал на кнопку с айди next кнопка ans1 не поменяла цвет хотя должна была

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

let q = ["question1", "question2", "question3", "question4"];
let qnumber = 0;
let a = ["correct answer", "wrong answer", " wrong answer", "wrong answer"];

let anumber = 0;
let a1 = ["wrong answer", "correct answer", " wrong answer", "wrong answer"]
let a1number = 0;
let a2 = ["wrong answer", "wrong answer", "correct answer", "wrong answer"]
let a2number = 0;
let a3 = ["wrong answer", "wrong answer", "wrong answer", "correct answer"]
let a3number = 0;
$('#next').on('click', (event) => {
  let p = document.getElementById('questions');
  p.innerText = q[qnumber]
  qnumber = (qnumber + 1) % q.length;
  let ans = document.getElementById('ans1');
  ans.innerText = a[anumber]
  anumber = (anumber + 1) % a.length;
  let ans1 = document.getElementById('ans2');
  ans1.innerText = a1[a1number]
  a1number = (a1number + 1) % a1.length;

  let ans2 = document.getElementById('ans3');
  ans2.innerText = a2[a2number]
  a2number = (a2number + 1) % a2.length;
  let ans3 = document.getElementById('ans4');
  ans3.innerText = a3[a3number]
  a3number = (a3number + 1) % a3.length;



  if (event.currentTarget.id == "next") {
    ans1.style.backgroundColor = "white";
    ans2.style.backgroundColor = "white";
    ans3.style.backgroundColor = "white";
    ans4.style.backgroundColor = "white";
    krestik1.style.display = "none";
    krestik2.style.display = "none";
    krestik3.style.display = "none";
    krestik4.style.display = "none";
    galochka.style.display = "none";
    galochka2.style.display = "none";
    galochka3.style.display = "none";
    galochka4.style.display = "none";
  }
})
$('button').on('click', (event) => {
  let box = event.currentTarget
  if (event.currentTarget.id == "ans1") {
    ans1.style.backgroundColor = "green";
    galochka.style.display = "block";
  }
  if (event.currentTarget.id == "ans2") {
    ans1.style.backgroundColor = "green";
    ans2.style.backgroundColor = "red";
    galochka.style.display = "block";
    krestik1.style.display = "block";
  }
  if (event.currentTarget.id == "ans3") {
    ans1.style.backgroundColor = "green";
    ans3.style.backgroundColor = "red";
    galochka.style.display = "block";
    krestik2.style.display = "block";
  }
  if (event.currentTarget.id == "ans4") {
    ans1.style.backgroundColor = "green";
    ans4.style.backgroundColor = "red";
    galochka.style.display = "block";
    krestik3.style.display = "block";
  }
  if (anumber == 2) {
    if (event.currentTarget.id == "ans2") {
      galochka2.style.display = "block";
      galochka.style.display = "none";
      krestik1.style.display = "none";
      ans1.style.backgroundColor = "white";
      ans2.style.backgroundColor = "green";
    }
    if (event.currentTarget.id == "ans1") {
      galochka2.style.display = "block";
      galochka.style.display = "none";
      krestik4.style.display = "block";
      ans1.style.backgroundColor = "red";
      ans2.style.backgroundColor = "green";
    }
    if (event.currentTarget.id == "ans3") {
      galochka2.style.display = "block";
      galochka.style.display = "none";
      krestik2.style.display = "block";
      ans3.style.backgroundColor = "red";
      ans2.style.backgroundColor = "green";
      ans1.style.backgroundColor = "white";
    }
    if (event.currentTarget.id == "ans4") {
      galochka2.style.display = "block";
      galochka.style.display = "none";
      krestik3.style.display = "block";
      ans4.style.backgroundColor = "red";
      ans2.style.backgroundColor = "green";
      ans1.style.backgroundColor = "white";
    }
  }
  if (a1number == 3) {
    if (event.currentTarget.id == "ans3") {
      galochka3.style.display = "block";
      galochka.style.display = "none";
      krestik2.style.display = "none";
      ans1.style.backgroundColor = "white";
      ans3.style.backgroundColor = "green";
    }
    if (event.currentTarget.id == "ans1") {
      galochka3.style.display = "block";
      galochka.style.display = "none";
      krestik4.style.display = "block";
      ans1.style.backgroundColor = "red";
      ans3.style.backgroundColor = "green";
    }
    if (event.currentTarget.id == "ans2") {
      galochka3.style.display = "block";
      galochka.style.display = "none";
      krestik1.style.display = "block";
      ans1.style.backgroundColor = "white";
      ans3.style.backgroundColor = "green";
      ans2.style.backgroundColor = "red";
    }
    if (event.currentTarget.id == "ans4") {
      galochka3.style.display = "block";
      galochka.style.display = "none";
      krestik3.style.display = "block";
      ans1.style.backgroundColor = "white";
      ans3.style.backgroundColor = "green";
      ans4.style.backgroundColor = "red";
    }
  }
  if (a2number == 0) {
    if (event.currentTarget.id == "ans4") {
      galochka4.style.display = "block";
      galochka.style.display = "none";
      ans1.style.backgroundColor = "white";
      ans4.style.backgroundColor = "green";
      krestik3.style.display = "none";
    }
    if (event.currentTarget.id == "ans1") {
      galochka4.style.display = "block";
      galochka.style.display = "none";
      krestik4.style.display = "block";
      ans1.style.backgroundColor = "red";
      ans4.style.backgroundColor = "green";
    }
    if (event.currentTarget.id == "ans2") {
      galochka4.style.display = "block";
      galochka.style.display = "none";
      krestik1.style.display = "block";
      ans2.style.backgroundColor = "red";
      ans4.style.backgroundColor = "green";
      ans1.style.backgroundColor = "white";
    }
    if (event.currentTarget.id == "ans3") {
      galochka4.style.display = "block";
      galochka.style.display = "none";
      krestik2.style.display = "block";
      ans3.style.backgroundColor = "red";
      ans4.style.backgroundColor = "green";
      ans1.style.backgroundColor = "white";
    }
  }
})
.container {
  width: 350px;
  height: 500px;
  background: silver;
  position: absolute;
  top: 190px;
  left: 600px;
}

#text {
  position: absolute;
  top: -10px;
  left: 110px;
}

#line {
  background: black;
  width: 350px;
  height: 1px;
  position: absolute;
  top: 45px;
}

#next {
  position: absolute;
  border-radius: 5px;
  top: 470px;
  left: 285px;
  background-color: blue;
  color: white;
  width: 60px;
  height: 25px;
}

#ans1 {
  position: absolute;
  background-color: white;
  border-radius: 5px;
  top: 120px;
  left: 75px;
  width: 105px;
  height: 45px;
}

#ans2 {
  position: absolute;
  background-color: white;
  border-radius: 5px;
  top: 170px;
  left: 75px;
  width: 105px;
  height: 45px;
}

#ans3 {
  position: absolute;
  background-color: white;
  border-radius: 5px;
  top: 220px;
  left: 75px;
  width: 105px;
  height: 45px;
}

#ans4 {
  position: absolute;
  background-color: white;
  border-radius: 5px;
  top: 270px;
  left: 75px;
  width: 105px;
  height: 45px;
}

#questions {
  position: absolute;
  top: 30px;
  left: 80px;
}

#galochka {
  position: absolute;
  top: 128px;
  left: 35px;
  display: none;
}

#krestik1 {
  position: absolute;
  top: 179px;
  left: 42px;
  display: none;
}

#krestik2 {
  position: absolute;
  top: 230px;
  left: 42px;
  display: none;
}

#krestik3 {
  position: absolute;
  top: 279px;
  left: 42px;
  display: none;
}

#krestik4 {
  position: absolute;
  top: 125px;
  left: 42px;
  display: none;
}

#galochka2 {
  position: absolute;
  top: 179px;
  left: 35px;
  display: none;
}

#galochka3 {
  position: absolute;
  top: 230px;
  left: 35px;
  display: none;
}

#galochka4 {
  position: absolute;
  top: 279px;
  left: 35px;
  display: none;
}
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

<div id="container" class="container">
  <h2 id="text">Quiz</h2>
  <div id="line"></div>
  <p id="questions">question0</p>
  <button class="button" id="next">next</button>
  <button class="button" id="ans1">correct answer</button>
  <button class="button" id="ans2">wrong answer</button>
  <button class="button" id="ans3">wrong answer</button>
  <button class="button" id="ans4">wrong answer</button>
  <div id="galochka"><img src="galochka.png" alt=""></div>
  <div id="galochka2"><img src="galochka.png" alt=""></div>
  <div id="galochka3"><img src="galochka.png" alt=""></div>
  <div id="galochka4"><img src="galochka.png" alt=""></div>
  <div id="krestik1"><img src="krestik.png" alt=""></div>
  <div id="krestik2"> <img src="krestik.png" alt=""></div>
  <div id="krestik3"><img src="krestik.png" alt=""></div>
  <div id="krestik4"><img src="krestik.png" alt=""></div>
</div>


Источник

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

Автор решения: Володя Иванов

Когда Вы объявляли переменные с кнопками(ans, ans1, ans2, ans3, ans4), то получилось что первая кнопка это ans, а четвертая это ans3 и ans4

просто это:

  let ans = document.getElementById('ans1');
  ans.innerText = a[anumber]
  anumber = (anumber + 1) % a.length;
  let ans1 = document.getElementById('ans2');
  ans1.innerText = a1[a1number]
  a1number = (a1number + 1) % a1.length;

  let ans2 = document.getElementById('ans3');
  ans2.innerText = a2[a2number]
  a2number = (a2number + 1) % a2.length;
  let ans3 = document.getElementById('ans4');
  ans3.innerText = a3[a3number]
  a3number = (a3number + 1) % a3.length;

замените на это:

  let ans1 = document.getElementById('ans1');
  ans1.innerText = a[anumber]
  anumber = (anumber + 1) % a.length;
  let ans2 = document.getElementById('ans2');
  ans2.innerText = a1[a1number]
  a1number = (a1number + 1) % a1.length;

  let ans3 = document.getElementById('ans3');
  ans3.innerText = a2[a2number]
  a2number = (a2number + 1) % a2.length;
  let ans4 = document.getElementById('ans4');
  ans4.innerText = a3[a3number]
  a3number = (a3number + 1) % a3.length;
→ Ссылка

licensed under cc by-sa 3.0 with attribution.