Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2022, 14:19
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

Изменение состояния кнопки на чистом JS
Имеется вот такой код, при нажатии на кнопку изменяет надпись, добавляет div и стиль. Как всё это будет выглядеть на чистом JS?

jQuery('#commentform').submit(function() {
	$(this).find("#submit").val("Отправка комментария...").attr("disabled", "disabled").before('<div class="comment-spinner"><div>').css({
            "padding-left": "20px",
            "cursor": "wait"
        });
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2022, 17:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Как вариант...
<form id='commentform'>
	<button id='submit'>Тест</button>
</form>
<script>
document.querySelector('#commentform').addEventListener('submit', _ => {
	_.preventDefault()
	const o = document.querySelector("#submit")
	o.value = 'Отправка комментария...'
	o.disabled = true
	const html = '<div class="comment-spinner" style="padding-left: 20px; cursor: wait;">comment-spinner<div>'
	o.insertAdjacentHTML('beforebegin', html)
})
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2022, 17:42
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

ksa
Спасибо. Только вот этот код
style="padding-left: 20px; cursor: wait;"
должен добавляться кнопке input, к div стилю comment-spinner он никак не относится.
Как добавить сей код в необходимое место?
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2022, 17:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 12345678
Только вот этот код
style="padding-left: 20px; cursor: wait;"
должен добавляться кнопке input,
https://learn.javascript.ru/styles-and-classes
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2022, 18:13
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

рони
Спасибо. Вот так добавил.
o.setAttribute("style", "padding-left:20px;cursor:wait;");
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2022, 22:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 12345678
Вот так добавил.
o.setAttribute("style", "padding-left:20px;cursor:wait;");
Есть специальные свойства...
o.style.paddingLeft = '20px'
o.style.cursor = 'wait'
Ответить с цитированием
  #7 (permalink)  
Старый 25.02.2022, 03:52
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

ksa
Спасибо за уточнение. Я пробовал их вписывать, но чего то скрипт вовсе переставал работать В итоге остановился на том варианте, который привёл.
Ответить с цитированием
  #8 (permalink)  
Старый 25.02.2022, 11:06
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 12345678
Я пробовал их вписывать, но чего то скрипт вовсе переставал работать
Для этого и делаются тестовые примеры, которые можно показать тут.
Тогда будет понятно что у тебя не получается...

<form id='commentform'>
	<button id='submit'>Тест</button>
</form>
<script>
document.querySelector('#commentform').addEventListener('submit', _ => {
	_.preventDefault()
	const o = document.querySelector("#submit")
	o.value = 'Отправка комментария...'
	o.disabled = true
	o.style.paddingLeft = '20px'
	o.style.cursor = 'wait'
	const html = '<div class="comment-spinner">comment-spinner<div>'
	o.insertAdjacentHTML('beforebegin', html)
})
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Какой дизайн выбрать для кнопки на три состояния? Was-Ja Элементы интерфейса 11 01.01.2021 00:00
Как сделать поле ввода тегов\меток на чистом js gunner17 Events/DOM/Window 2 21.03.2019 09:01
изменение стиля кнопки с сохранение параметра после перезагрузки страницы AlexMonsterbit Элементы интерфейса 0 15.03.2019 18:11
Проекты на чистом js kidar2 Общие вопросы Javascript 7 09.01.2014 14:26
Изменение цвета текста кнопки и цвета кнопки при нажатии Setta jQuery 22 31.07.2013 17:48