Некоторые кнопки HTML случайно перестали работать, а другие все еще работают [закрыто]CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Некоторые кнопки HTML случайно перестали работать, а другие все еще работают [закрыто]

Сообщение Anonymous »

Некоторые кнопки (например: stopBtn, startBtn, уменьшитьBtn и т. д.) внезапно перестали работать, в то время как другие кнопки все еще работают (например: resetThirty() , startThirty()). Кто-нибудь знает, в чем проблема?
Как я уже сказал, все работало отлично, потом я сделал перерыв, выключил компьютер, а когда вернулся, некоторые кнопки просто больше не работают .
Я проверял код снова и снова, но не смог найти проблему.

Код: Выделить всё

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%,  6 5 % ) ; < b r   / > } < / c o d e > < b r   / > < p r e   c l a s s = " s n i p p e t - c o d e - h t m l   l a n g - h t m l   P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; h 1   i d = " m y H 1 " & g t ; M a t c h & l t ; / h 1 & g t ; < b r   / > & l t ; a   h r e f = " t o u r n a m e n t s M a i n L o g i n . h t m l " & g t ; < b r   / >     & l t ; i n p u t   i d = " b a c k B t n "   t y p e = " b u t t o n "   v a l u e = " B a c k " & g t ; < b r   / > & l t ; / a & g t ; < b r   / > < b r   / > & l t ; ! - - h l a v n i   c a s - - & g t ; < b r   / > < b r   / > & l t ; d i v   i d = " c o n t a i n e r S t o p W a t c h " & g t ; < b r   / >     & l t ; d i v   i d = " s t o p W a t c h " & g t ; < b r   / >         0 0 : 0 0 < b r   / >     & l t ; / d i v & g t ; < b r   / >     & l t ; d i v   i d = " c o n t r o l s " & g t ; < b r   / >         & l t ; b u t t o n   i d = " s t a r t B t n "   o n c l i c k = " s t a r t ( ) " & g t ; S t a r t & l t ; / b u t t o n & g t ; < b r   / >         & l t ; b u t t o n   i d = " s t o p B t n "   o n c l i c k = " s t o p ( ) ; s t o p T h i r t y ( ) " & g t ; S t o p & l t ; / b u t t o n & g t ; < b r   / >     & l t ; / d i v & g t ; < b r   / > & l t ; / d i v & g t ; < b r   / > < b r   / > & l t ; ! - - 3 0 s   u t o k - - & g t ; < b r   / > < b r   / > & l t ; d i v   i d = " c o n t a i n e r C o u n t d o w n " & g t ; < b r   / >     & l t ; d i v   i d = " c o u n t d o w n " & g t ; < b r   / >         3 0 < b r   / >     & l t ; / d i v & g t ; < b r   / >     & l t ; d i v   i d = " c o n t r o l s T h i r t y " & g t ; < b r   / >         & l t ; b u t t o n   i d = " s t a r t B t n T h i r t y "   o n c l i c k = " r e s e t T h i r t y ( ) ; s t a r t T h i r t y ( ) " & g t ; ( R e ) s t a r t & l t ; / b u t t o n & g t ; < b r   / >         & l t ; b u t t o n   i d = " r e s e t B t n T h i r t y "   o n c l i c k = " r e s e t T h i r t y ( ) " & g t ; R e s e t & l t ; / b u t t o n & g t ; < b r   / >     & l t ; / d i v & g t ; < b r   / > & l t ; / d i v & g t ; < b r   / > < b r   / > & l t ; ! - - b o d y   d o m a c i - - & g t ; < b r   / > < b r   / > & l t ; d i v   i d = " c o n t a i n e r P o i n t s " & g t ; < b r   / >     & l t ; h 1 & g t ; & l t ; s p a n   i d = " t e a m 1 " & g t ; & l t ; / s p a n & g t ; & l t;/h1>
0

decrease
increase




0

decrease
increase




4
0

5
0

6
0

7
0

8
0

9
0

10
0

11
0

12
0

13
0

14
0






4
0

5
0

6
0

7
0

8
0

9
0

10
0

11
0

12
0

13
0

14
0




Подробнее здесь: https://stackoverflow.com/questions/785 ... still-work
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Некоторые компоненты материала перестали работать, когда я обновился до V17
    Anonymous » » в форуме CSS
    0 Ответы
    2 Просмотры
    Последнее сообщение Anonymous
  • Фрагменты Javascript перестали работать в VS Code
    Гость » » в форуме Javascript
    0 Ответы
    71 Просмотры
    Последнее сообщение Гость
  • Точки останова перестали работать в определенные моменты на локальном устройстве iOS
    Anonymous » » в форуме IOS
    0 Ответы
    19 Просмотры
    Последнее сообщение Anonymous
  • Параметры URL-адреса подключения Postgres перестали работать при переключении с PG11 на PG14
    Anonymous » » в форуме Python
    0 Ответы
    27 Просмотры
    Последнее сообщение Anonymous
  • Мои USB-порты перестали работать в Linux. И Минт, и Арка
    Anonymous » » в форуме Linux
    0 Ответы
    17 Просмотры
    Последнее сообщение Anonymous

Вернуться в «CSS»