Сделайте кнопку отключенной при нажатии, но включите, пока обратный отсчет не будет равен нулю

function counter2(){
var counter =10;
var on=document.getElementById("bet");
setInterval(function(){
counter--;
if (counter==9){
    on.innerHTML = "";
    
    }
if (counter>=0){
    id=document.getElementById("res");
    var bet=document.getElementById("pts");
        
        var beth=document.getElementById("beth");
        var betv=document.getElementById("betv");
    id.innerHTML = "Bet within&nbsp;" +counter + "&nbsp;seconds";;
    beth.disabled = false; //Beth is both Function and button //
    beth.style.backgroundColor = "#4CAF50";
    betv.disabled = false;
    betv.style.backgroundColor = "#008CBA";
    beth.style.cursor = 'pointer'; 
    betv.style.cursor = 'pointer'; 
    
    
    }
    if (counter==0){
        counter1();
        
        
        }

}, 1000);

}

Я делаю функцию, в которой кнопка будет отключена после нажатия, но приведенный выше счетчик автоматически включает кнопки, но я хочу, чтобы обе они выполнялись, т. E. Отключить кнопку после нажатия, а также отключить, если таймер работает, а также включить кнопки, если кнопка не нажата

also to enable the buttons if the button is not clicked вы не можете нажать на кнопку, которая отключена.

— 18.03.2022 08:55

Я хочу, чтобы кнопка была включена, если она не нажата во время обратного отсчета, и отключена, если обратный отсчет идет, но кнопка нажата, разве это невозможно?

— 18.03.2022 08:58

я добавлю ответ, пожалуйста, проверьте.

— 18.03.2022 09:01

javascript

18.03.2022 08:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать:

var elem = document.getElementById('button');
elem.addEventListener('click',buttonClicked);

function buttonClicked(){
//do stuff 
 console.info("clicked")
 elem.disabled = true;
 setTimeout(() => {elem.disabled  =false}, 500);
}

18.03.2022 09:01

Ответ принят как подходящий

document.addEventListener('DOMContentLoaded', () => {
  const myButton = document.getElementById('my-button');
  const status = document.getElementById('status');

  let counter = 10;
  let timerHandle;
  myButton.addEventListener('click', () => {
    status.innerText = `Button will enable in ${counter} seconds`;

    myButton.disabled = true;

    timerHandle = setInterval(() => {
      counter--;
      status.innerText = `Button will enable in ${counter} seconds`;

      if (counter === 0) {
        clearInterval(timerHandle);
        status.innerText = `Timer cleared.`;
        myButton.disabled = false;
      }
    }, 1000);
  });
});

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <style>
    p {
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <p id = "status"></p>
  </div>

  <div>
    <button id = "my-button">Button</button>
  </div>

  <script src = "script.js"></script>
</body>

</html>

18.03.2022 09:02

Другие вопросы по теме

Как удалить тег HTML (не конкретный тег) с содержимым из строки в javascript

Как правильно сортировать и отображать таблицу в ReactJs?

React Fullpage: как прокрутить часть раздела, не прокручивая весь раздел

Преобразовать строку символов и чисел в целое число?

Компонент меняет неуправляемый вход на управляемый. Вероятно, это вызвано изменением значения с неопределенного на определенное значение,

Sequelize - .update - setTags не является функцией

Как мне создать точки между двумя позициями на холсте для P5.js?

Разница между тем, что изначально передается в console.info и toString

После сохранения файла Javascript в VScode он изменил весь формат

Как добавить элемент в тег <h4> через другой раскрывающийся список выбора, кроме «значения», потому что я уже использовал его, возможно ли это?»

Сделайте кнопку отключенной при нажатии, но включите, пока обратный отсчет не будет равен нулю

Ответы 2

Другие вопросы по теме

Похожие вопросы