Javascript для отключения кнопки

Я хочу, чтобы действие щелчка отключило кнопку при пятом щелчке, но я не могу заставить работать внутри Вот javascript ...

var currentTurn = 1;

function taketurn(){
  currentTurn++;
  document.getElementById("turn").innerHTML = currentTurn;
  threeturns(currentTurn);
}
function threeturns(now) {
  if (now > 3){
    document.getElementById("livedead").innerHTML = "disabled";
  }
}

Тогда html

<div class = "container">
<h1>turn <span id = "turn">1</span></h1>
    <button onclick = "taketurn()" type = "button" class = "btn btn-lg btn-info" <span id = "livedead"></span> />  next</button>
    <button onclick = "taketurn()" type = "button" class = "btn btn-lg btn-info" disabled>  next</button>
</div>

livedead - это идентификатор <span> в вашем HTML, поэтому document.getElementById("livedead") получает span, а не button. Вам нужно выбрать кнопку. После этого вам нужно использовать createattribute для добавления атрибута disabled. innerHTML заменяет весь внутренний HTML-код, поэтому в буквальном смысле будет отображаться текст «отключен».

— 21.10.2018 21:28

@futureprogress есть ошибка в синтаксисе вашего HTML, внутри вашего первого button.

— 21.10.2018 21:32

javascript button

21.10.2018 21:22

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 1

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

Есть несколько вещей, которые нужно немного изменить в вашем коде. Некоторые исправления необходимо внести в ваш HTML, чтобы диапазон livedead не определялся внутри открывающего тега <button>.

Кроме того, отключение кнопки с помощью javascript выполняется путем установки поля disabled на этом объекте кнопки Node (т.е. не путем установки для innerHTML значения disabled).

Я бы предложил несколько изменений в вашем коде, ключевым из которых является использование объекта MouseEvent.

В вашем случае это упростило бы отключение кнопки, которую нажимает ваш пользователь. Чтобы проиллюстрировать использование объекта MouseEvent, рассмотрим этот код:

var currentTurn = 1;

// add a parameter to function to give us access to the event
// for this click interaction
function taketurn(event){
	
  // if click count is 5 or more, then disable this button
  if (currentTurn >= 5) {
  
    // we access the button via the event parameter that we 
    // passed in. The currentTarget represents the button, so
    // we can set disabled on the button to disable it.
    event.currentTarget.disabled = 'disabled'
  }
   
  currentTurn ++;
  
  document.getElementById("turn").innerHTML = currentTurn;
}

<div class = "container">
<h1>turn <span id = "turn">1</span></h1>
    <!-- pass event defined for the click interaction, to taketurn() -->
    <button onclick = "taketurn(event)" type = "button" class = "btn btn-lg btn-info" id = "livedead">  next</button>
    <button onclick = "taketurn()" type = "button" class = "btn btn-lg btn-info" disabled>  next</button>
</div>

21.10.2018 22:25

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

Анко как изменить цвет кнопки?

Дополнительные кнопки продукта в Woocommerce

C# панель на кнопку перетаскивания панели только 1 раз работает

Изображение панорамирования Javascript: переключение вызова с кнопки на автоматический после загрузки страницы

Python tkinter делает последовательную работу с кнопками

Как добавить динамическую кнопку во внешний класс Java?

Как скрыть или отключить кнопку, связанную с одним и тем же IBAction и разными тегами swift 4.2

C# как привязать массив к массиву кнопок

Как заставить pyqt вызывать два метода, нажав одну кнопку

Поместите значок в QPushButton

Javascript для отключения кнопки

Ответы 1

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

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