Срабатывание скрипта по клику по условию

Как можно объяснить такой заголовок = "Срабатывание скрипта по клику по условию js". Предположим, что у вас есть две кнопки, по нажатию на которую срабатывает скрипт.

Как сделать, чтобы один скрипт запускался в том случае, когда первая кнопка нажата/отжата?

Срабатывание скрипта по клику по условию js.

1. Логика скрипта "Срабатывание скрипта по клику по условию js"
2. Описание скрипта: "Срабатывание скрипта по клику по условию js"
3. Код скрипта: "Срабатывание скрипта по клику по условию js"
4. Пример скрипта: "Срабатывание скрипта по клику по условию js"

Логика скрипта "Срабатывание скрипта по клику по условию js"

В отличии от php с javascript существование переменной несколько сложнее и тем более после следующего клика эта переменная уже может не существовать!

Начну с описание скрипта:

Придется отвлечься, где, ну например, такой скрипт понадобится?

Сейчас пишу скрипт генеалогического дерева php + js... и вот там понадобилось... когда дерево в режиме просмотра, то никакие окна для редактирования не должны открываться и все окна(данные) формируются с помощью javascript.

Но в режиме редактирования, после нажатия на кнопку редактировать(в моем случае показать сетку) всё окна становятся доступными.

После отключения редактирования(в моем случае скрыть сетку) окна снова становятся недоступными.

Конечно!

Если вы всё это знаете, то вы сможете сказать, ну вот какая сложная задача...

Но поверьте мне! В своё время, когда я начинал - это казалось не разрешимой задачей!

Итак... где логика?

В подробностях не буду... в двух словах: на самом деле все просто!

В момент нажатия на кнопку редактирования, в блок например div отправляется что-то, ну пусть это будут число 1.

И при нажатии на вторую кнопку проверяется... есть ли что-то внутри этого блока.

При отключении редактирования данный блок очищается.!

Описание скрипта: "Срабатывание скрипта по клику по условию js"

Html:

У нас будет четыре блока html:

Блок, который будем проверять на пустоту.

<div id=example></div>

Второй... будем прибавлять плюс 1 и отправлять это число сюда:

<div id=example_try>0</div>

Кнопка включения отключения скрипта.

<button id =edit>Редактировать</button>

Кнопка прибавления +1..

<button id =try>Прибавь 1.</button>

Javascript:

Отслеживаем нажатие click:

document.addEventListener('click', function(e)

По условию, если нажали кнопку Прибавь 1(try) и (&&) используя innerHTML проверяем "example" пустой или нет... прибавляем 1.(parseInt=строку в число)

if(e . target . id =='try' && !example.innerHTML) example_try.innerHTML = parseInt(example_try.innerHTML) +1;

Если нажали кнопку "редактировать"(edit):

if(e . target . id =='edit')

Ставим второе условие... попробуйте догадаться, что здесь происходит:

if(edit.innerHTML == 'Редактировать')

{

example.innerHTML = 'Теперь попробуй нажать кнопку "Прибавь 1."';

edit.innerHTML = 'Отключить';

}

else

{

example.innerHTML = '';

edit.innerHTML = 'Редактировать';

}

Скрипт: "Срабатывание скрипта по клику по условию js".

Теперь соберем весь скрипт:

Html:

<div id=example></div>

<div id=example_try>0</div>

<button id =edit>Редактировать</button>

<button id =try>Прибавь 1.</button>

Javascript

<script>

document.addEventListener('click', function(e)

{

if(e . target . id =='try' && !example.innerHTML) example_try.innerHTML = parseInt(example_try.innerHTML) +1;

if(e . target . id =='edit')

{

if(edit.innerHTML == 'Редактировать')

{

example.innerHTML = 'Теперь попробуй нажать кнопку "Прибавь 1."';

edit.innerHTML = 'Отключить';

}

else

{

example.innerHTML = '';

edit.innerHTML = 'Редактировать';

}

}

})

</script>

Пример скрипта: "Срабатывание скрипта по клику по условию js".

Теперь вам осталось протестировать работу скрипта : "Срабатывание скрипта по клику по условию js".

0
Редактировать Прибавь 1.