Thiết kế website giá rẻ

Question

A few buttons (for example: stopBtn, startBtn, decreaseBtn, etc.) suddenly stopped working while other buttons still work (for example: resetThirty(), startThirty()). Does anyone know what the problem is?

As I said it all worked perfectly, then I took a break turned my PC off, and when I came back some buttons just don’t work anymore.

I checked through the code again and again and couldn’t find the issue.

function getQueryParams() {
  const params = new URLSearchParams(window.location.search);
  return {
    team1: params.get('team1Input'),
    team2: params.get('team2Input')
  };
}

function displayTeams() {
  const {
    team1,
    team2
  } = getQueryParams();
  document.getElementById('team1').textContent = decodeURIComponent(team1);
  document.getElementById('team2').textContent = decodeURIComponent(team2);
}
window.onload = displayTeams;

// thirtySeconds

const display2 = document.getElementById("stopWatch");
const display = document.getElementById("countdown");

let countdownTimer = null;
let timeLeft = 30;

function startThirty() {
  if (!countdownTimer) {
    countdownTimer = setInterval(updateCountdown, 1000);
  }
}

function resetThirty() {
  clearInterval(countdownTimer);
  countdownTimer = null;
  timeLeft = 30;
  display.textContent = formatTime(timeLeft);
}

function updateCountdown() {
  timeLeft--;
  display.textContent = formatTime(timeLeft);

  if (timeLeft === 0) {
    clearInterval(countdownTimer);
    countdownTimer = null;
    timeLeft = 30;
  }
}


function formatTime(seconds) {
  const remainingSeconds = seconds % 60;
  return `${String(remainingSeconds).padStart(2, "0")}`;
}

// stopwatch

let timer = null;
let startTime = 0;
let elapsedTime = 0;
let isRunning = false;

function start() {
  if (!isRunning) {
    startTime = Date.now() - elapsedTime;
    timer = setInterval(update, 10);
    isRunning = true;
  }
}

function stop() {
  if (isRunning) {
    clearInterval(timer);
    elapsedTime = Date.now() - startTime;
    isRunning = false;
  }
}

function update() {
  const currentTime = Date.now();
  elapsedTime = currentTime - startTime;

  let minutes = Math.floor(elapsedTime / (1000 * 60) % 60);
  let seconds = Math.floor(elapsedTime / 1000 % 60);

  minutes = String(minutes).padStart(2, "0");
  seconds = String(seconds).padStart(2, "0");

  display2.textContent = `${minutes}:${seconds}`;
}

document.addEventListener("keydown", function(event) {
  if (event.code === "Space") {
    if (isRunning) {
      stop();
    } else {
      start();
    }
  }
  if (event.key === "f") {
    startThirty();
  }
  if (event.key === "r") {
    resetThirty();
  }
});

//pridavani bodu

let countHome = 0;

document.getElementById("decreaseBtn").onclick = function() {
  countHome -= 1;
  if (countHome < 1) {
    countHome = 0;
  }
  document.getElementById("countLabel").innerHTML = countHome;
}

document.getElementById("increaseBtn").onclick = function() {
  countHome += 1;
  document.getElementById("countLabel").innerHTML = countHome;
}

//pridavani bodu team 2

let countAway = 0;

document.getElementById("decreaseBtn2").onclick = function() {
  countAway -= 1;
  if (countAway < 1) {
    countAway = 0;
  }
  document.getElementById("countLabel2").innerHTML = countAway;
}

document.getElementById("increaseBtn2").onclick = function() {
  countAway += 1;
  document.getElementById("countLabel2").innerHTML = countAway;
}

//pridani faulu

function faul(button) {
  var counter = button.nextElementSibling;
  var cislo = parseInt(counter.textContent);
  if (cislo < 5) {
    cislo += 1;
  } else {
    cislo = 0;
  }
  counter.textContent = cislo;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaf6f6;
}

#myH1 {
  text-align: center;
  font-size: 4rem;
  font-family: "Arial", sans-serif;
  color: hsl(0, 0%, 25%);
}

#containerStopWatch {
  margin-left: 30%;
  margin-right: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  border: 5px solid;
  border-radius: 50px;
  background-color: white;
}

#containerCountdown {
  margin-top: 5%;
  margin-left: 40%;
  margin-right: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 4px solid;
  border-radius: 30px;
  background-color: white;
}

#stopWatch {
  font-size: 5rem;
  font-family: monospace;
  font-weight: bold;
  color: hsl(0, 0%, 30%);
  text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75);
  margin-bottom: 5%;
}

#countdown {
  font-size: 5rem;
  font-family: monospace;
  font-weight: bold;
  color: hsl(0, 0%, 30%);
  text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75);
  margin-bottom: 5%;
}

#controls button {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  min-width: 125px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  transition: background-color 0.5s ease;
}

#controlsThirty button {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  min-width: 125px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  transition: background-color 0.5s ease;
}

#startBtn {
  background-color: hsl(115, 100%, 40%);
}

#startBtn:hover {
  background-color: hsl(115, 100%, 30%);
}

#startBtnThirty {
  background-color: hsl(166, 100%, 40%);
}

#startBtnThirty:hover {
  background-color: hsl(166, 100%, 30%);
}

#stopBtn {
  background-color: hsl(10, 90%, 50%);
}

#stopBtn:hover {
  background-color: hsl(10, 90%, 40%);
}

#resetBtnThirty {
  background-color: hsl(205, 90%, 60%);
}

#resetBtnThirty:hover {
  background-color: hsl(205, 90%, 50%);
}

#containerPoints {
  transform: translateY(-200%) translateX(3%);
}

#containerPoints2 {
  transform: translateY(-315%) translateX(75%);
}

#containerPoints h1 {
  font-size: 4rem;
  font-family: "Arial", sans-serif;
  color: hsl(0, 0%, 25%);
}

#containerPoints2 h1 {
  font-size: 4rem;
  font-family: "Arial", sans-serif;
  color: hsl(0, 0%, 25%);
}

#countLabel {
  font-size: 6rem;
  font-family: "Arial", sans-serif;
  color: hsl(0, 0%, 0%);
}

#countLabel2 {
  font-size: 6rem;
  font-family: "Arial", sans-serif;
  color: hsl(0, 0%, 0%);
}

#decreaseBtn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  min-width: 125px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  transition: background-color 0.5s ease;
}

#increaseBtn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  min-width: 125px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  transition: background-color 0.5s ease;
}

#decreaseBtn2 {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  min-width: 125px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  transition: background-color 0.5s ease;
}

#increaseBtn2 {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  min-width: 125px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  transition: background-color 0.5s ease;
}

#increaseBtn {
  background-color: hsl(46, 95%, 40%);
}

#increaseBtn:hover {
  background-color: hsl(46, 95%, 30%);
}

#decreaseBtn {
  background-color: hsl(23, 99%, 40%);
}

#decreaseBtn:hover {
  background-color: hsl(23, 99%, 30%);
}

#increaseBtn2 {
  background-color: hsl(46, 95%, 40%);
}

#increaseBtn2:hover {
  background-color: hsl(46, 95%, 30%);
}

#decreaseBtn2 {
  background-color: hsl(23, 99%, 40%);
}

#decreaseBtn2:hover {
  background-color: hsl(23, 99%, 30%);
}

#backBtn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  margin: 5px;
  min-width: 125px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  transition: background-color 0.5s ease;
  transform: translateY(-230%);
}

#backBtn {
  background-color: hsl(60, 1%, 50%);
}

#backBtn:hover {
  background-color: hsl(60, 1%, 27%);
}

#containerfaulyaway {
  transform: translateY(-300%);
}

#containerfaulyhome {
  transform: translateY(-400%) translateX(94%);
}

.hracA {
  border-radius: 4px;
  border: solid 2px;
  margin: 0.1%;
  padding: 5px 7px;
  transition: background-color 0.5s ease;
  background-color: hsl(60, 2%, 79%);
}

.hracA:hover {
  background-color: hsl(60, 2%, 65%);
}

.hracA1 {
  border-radius: 4px;
  border: solid 2px;
  margin: 0.1%;
  padding: 5px 11px;
  transition: background-color 0.5s ease;
  background-color: hsl(60, 2%, 79%);
}

.hracA1:hover {
  background-color: hsl(60, 2%, 65%);
}

<h1 id="myH1">Match</h1>
<a href="tournamentsMainLogin.html">
  <input id="backBtn" type="button" value="Back">
</a>

<!--hlavni cas-->

<div id="containerStopWatch">
  <div id="stopWatch">
    00:00
  </div>
  <div id="controls">
    <button id="startBtn" onclick="start()">Start</button>
    <button id="stopBtn" onclick="stop();stopThirty()">Stop</button>
  </div>
</div>

<!--30s utok-->

<div id="containerCountdown">
  <div id="countdown">
    30
  </div>
  <div id="controlsThirty">
    <button id="startBtnThirty" onclick="resetThirty();startThirty()">(Re)start</button>
    <button id="resetBtnThirty" onclick="resetThirty()">Reset</button>
  </div>
</div>

<!--body domaci-->

<div id="containerPoints">
  <h1><span id="team1"></span></h1>
  <label id="countLabel">0</label><br>
  <button id="decreaseBtn">decrease</button>
  <button id="increaseBtn">increase</button>
</div>

<!--body hoste-->

<div id="containerPoints2">
  <h1><span id="team2"></span></h1>
  <label id="countLabel2">0</label><br>
  <button id="decreaseBtn2">decrease</button>
  <button id="increaseBtn2">increase</button>
</div>

<!--fauly hracu hoste-->

<div id="containerfaulyaway">
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">4</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">5</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">6</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">7</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">8</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">9</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">10</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">11</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">12</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">13</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">14</button>
    <span class="counter">0</span>
  </div>
</div>

<!--fauly hracu domaci--->

<div id="containerfaulyhome">
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">4</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">5</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">6</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">7</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">8</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA1" onclick="faul(this)">9</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">10</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">11</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">12</button>
    <span class="counter">0</span>
  </div>
  <div>
    <button class="hracA" onclick="faul(this)">13</button>
    <span class="counter">0</span>
  </div>
  <div class="buttonContainer">
    <button class="hracA" onclick="faul(this)">14</button>
    <span class="counter">0</span>
  </div>
</div>

Thiết kế website giá rẻ

Danh mục

Some HTML buttons randomly stopped working, while others still work