Как отменить "this.onclick = null"? Как восстановить функциональность javascript onclick в div?

Question

Я показываю div с цветом фона по умолчанию. Когда я нажимаю на него один раз, он меняет цвет. Второй щелчок ничего не делает, потому что у div есть этот код: "this.onclick = null". Это хорошо работает.

Однако, после того, как я один раз нажал на div, я хочу нажать кнопку, чтобы восстановить его функциональность при нажатии. Но кнопка, которую я создал для этой цели, не работает, потому что я не знаю, какой код javascript использовать. Кто-нибудь знает?

Как видите, я работаю с Bootstrap 3. (Обратите внимание, что я новичок, обладающий только базовыми c знаниями php и js.) Вот мой код :

HTML для div:

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="colorClick(id); this.onclick=null;">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

JAVASCRIPT для div:

function colorClick(id){
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);   
document.getElementById(id).style.backgroundColor=randomColor;

/* The random color generator is from stackoverflow.com/questions/1484506/random-color-generator */
}

HTML для кнопки:

<div class="row">
  <div class="col-sm-12">
        <button type='button' class='btn btn-default btn-lg' onclick=reEnableOnclick()>
      This button should re-enable the onclick functionality, but it does not
    </button>
  </div>
</div>

JAVASCRIPT для кнопки:

function reEnableOnclick(){
document.getElementById("testDiv").onclick=click;  /* This is only pseudo-code. What real code should I put here? */
}

(Обе функции js находятся в отдельном. js документе)

РЕДАКТИРОВАТЬ # 2: Это необходимо для работать около 100 дел на одной странице.

Answer 1

Поскольку вам необходимо применить эту функцию к сотням элементов div, попробуйте постоянно отслеживать только заблокированные состояния, а не все состояния div. Предполагая, что каждый идентификатор div уникален, вы можете попробовать:

Javascript:

    let locked = [];

    function lockCheckRun(id) { 
        let divID = document.getElementById(id);    
        if (!locked.includes(divID) {
            colorClick(id);
            locked.push(divID);
        }
    }

    function lockReset() {
        locked.length = 0;
    }

Объяснение:

1. создать пустой массив для хранения идентификаторов заблокированных элементов. Мы назовем этот массив заблокированным.
2. затем создайте функцию, которая проверяет, содержит ли заблокированный массив текущий уникальный идентификатор элемента. если это не так, то мы запустим вашу функцию 'colorClick'. как только это завершится, мы добавим текущий идентификатор элемента в массив «locked» через .pu sh ()
3. , когда вы хотите сбросить массив заблокированных элементов, запустите функцию «lockReset».

Дополнительный Polyfill для совместимости со старыми браузерами:

    if (!String.prototype.includes) {
        String.prototype.includes = function(search, start) {
          'use strict';

          if (search instanceof RegExp) {
            throw TypeError('first argument must not be a RegExp');
          } 
          if (start === undefined) { start = 0; }
          return this.indexOf(search, start) !== -1;
        };
      }

Answer 2

Не удаляйте событие click, просто установите флажок, чтобы увидеть, включено ли поведение или нет. EG:

var clickEnabled = true;

function colorClick(id) {
  if (clickEnabled) {
    var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    document.getElementById(id).style.backgroundColor = randomColor;
    clickEnabled = false;
  }
}

function reEnableOnclick() {
  clickEnabled = true;
}

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="colorClick(id);">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
    <button type='button' class='btn btn-default btn-lg' onclick=reEnableOnclick()>
      This button will re-enable the onclick functionality
    </button>
  </div>
</div>

Answer 3

В вашем коде javascript может быть псевдопеременная, которая служит цели

. В этом случае вы можете написать

HTML Код

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="colorClick(id)">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
        <button type='button' class='btn btn-default btn-lg' onclick=reEnableOnclick()>
      This button should re-enable the onclick functionality, but it does not
    </button>
  </div>
</div>

Javascript Код

var divDisabled = false;

function colorClick(id){
 if(!divDisabled) {
  var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);   
  document.getElementById(id).style.backgroundColor=randomColor;
  divDisabled = true;
  /* The random color generator is from stackoverflow.com/questions/1484506/random- 
  color-generator */
 }
}

function reEnableOnclick(){
  divDisabled = false;
}

Итак, теперь по умолчанию для divDisabled будет установлено значение false, поэтому первый щелчок по div будет работать так, как вы хотите, а последующие щелчки по div не будут такими, какими они являются в настоящее время,

Но как только вы нажмете кнопку, он активирует нажатие на div с установкой buttonDisable в false, поэтому он снова будет работать один раз на div, как вы хотите

Answer 4

Назначьте исходный код onclick.

function reEnableOnclick() {
    document.getElementById("testDiv").onclick = "colorClick(id); this.onclick=null;";
}

Answer 5

Вы можете определить функцию для запуска onclick вне назначения и использовать ее для установки и сброса обработчика щелчков ...

function functionThatRunsWhenButtonClicked() {
    // do stuff
}

, а затем в местах, где вам нужно назначить, назначить это ..

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="functionThatRunsWhenButtonClicked(); this.onclick=null;">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

function reEnableOnclick(){
    document.getElementById("testDiv").onclick=functionThatRunsWhenButtonClicked;  /* This 
    is only pseudo-code. What real code should I put here? */
}

Вы можете сделать то же самое с colorClick(id)