Как создать кнопку включить отключить?

Question

[avdoshka]

Помогите создать кнопку включить и отключить есть кнопка нужно сделать так что бы при нажатии на нее включалась и отключалась линия
кнопка

<form method="Get" >
				<b><div class="ogon">
<input  type="image" src="images/fakel.gif" value="Total"  onclick="TotalLength()"/>

</div>

</form></b>

линия
<b><hr class="hr-vertical-gradient"></b>

Answer 1

[Пашенька]

<button class="i-am-a-super-button">off</button>

document.querySelector('.i-am-a-super-button').onclick = function(e) {
    this.textContent = this.textContent === 'off' ? 'on' : 'off';
    var line = document.querySelector('.hr-vertical-gradient');
    line.style.display = getComputedStyle(line).display === 'block' ? 'none' : 'block';
}

Comments

[avdoshka]

Получилась просто кнопка а мне нужно при нажатии на изображение включалась линия

[Пашенька]

avdoshka, на картинку уже другой обработчик клика стоит TotalLength(). Я не ясновидящий, чтобы знать что это. Нет никакой проблемы заменить мою кнопку на любую свою. Я привёл лишь рабочий пример.

[avdoshka]

При замене кнопки нужно в скрипте указать это?

[Пашенька]

avdoshka, Разумеется.

class="i-am-a-super-button"

querySelector('.i-am-a-super-button')

[avdoshka]

В какой файл мне вставить этот скрипт ?

[Пашенька]

avdoshka, в любой .js подключенный внизу страницы. Или в крайнем случае в эту же страницу в тег <script></script> перед закрывающим </body>. Вам стоит погрузиться в основы web, иначе у вас такие вопросы возникают, что я уже жалею, что ответил.

[avdoshka]

Кнопка работает но при обновлении страницы опять нужно нажать на ее что бы выключить. А как сделать так что бы она находилась в выключенном состоянии всегда и только при нажатии срабатывала?

[Пашенька]

avdoshka, Добавить в CSS:

.hr-vertical-gradient {
    display: none;
}

Если имеется ввиду, чтобы сохранялось последнее состояние кнопки при перезагрузке страницы, то нужно будет дописать код.

[avdoshka]

Хочу использовать эту кнопку что нужно изменить в скрипте что бы она работала

[Пашенька]

avdoshka,
Какую эту?

Объясняю второй раз: на существующей кнопке

<input  type="image" src="images/fakel.gif" value="Total"  onclick="TotalLength()"/>

уже стоит обработчик клика, если на неё повесить новый, то функция TotalLength() уже не будет выполняться. нужно мой код засовывать внутрь функции TotalLength(), чтобы всё работало, но что находится в этой функции мне неведомо.

[avdoshka]

А вот как его засунуть вот в чем вопрос

[Пашенька]

avdoshka, используя клавиатуру, мышь, логику, подкреплённую некоторым бекграундом знаний. Добавить в конец тела функции

function TotalLength() { ... /* здесь конец тела функции */}

код:

this.value = this.value === 'off' ? 'on' : 'off';
var line = document.querySelector('.hr-vertical-gradient');
line.style.display = getComputedStyle(line).display === 'block' ? 'none' : 'block';

Довольно. Дальнейшее менторство на взаимовыгодных услових. Я пасс.

[avdoshka]

Последний вопрос не совсем понятно куда нужно это добавить? function TotalLength() { ... /* здесь конец тела функции */}

[Пашенька]

avdoshka, Это безумие какое-то.
Откуда у вас эта разметка? Вы её сами написали или вы её скопировали вслепую откуда-то?
Если сами, тогда вы должны знать, где у вас живёт функция TotalLength().
Если не сами и функция TotalLength не нужна, то можно заменить эту часть onclick="TotalLength()" строки на class="i-am-a-super-button" и использовать javascript код, который я привёл в ответе без изменения.

[avdoshka]

Спасибо брат ты мне очень помог сработало
function TotalLength() {
this.value = this.value === 'off' ? 'on' : 'off';
var line = document.querySelector('.hr-vertical-gradient');
line.style.display = getComputedStyle(line).display === 'block' ? 'none' : 'block';
}