Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.06.2017, 13:27
Интересующийся
Отправить личное сообщение для zapalych Посмотреть профиль Найти все сообщения от zapalych
 
Регистрация: 30.06.2017
Сообщений: 11

Замена id элемента по клику кнопки
Здравствуйте! Подскажите, пожалуйста, в чем ошибка. Делал в однажды для учебного задания коротенький скрипт для смены настроек отображения по клику. Вот понадобилось применить нечто подобное по работе.

Было (и всё работало)
<script type="text/javascript">
function change(bodyName){
var bodyclass = document.getElementsByTagName("body")[0];
bodyclass.className = bodyName;
localStorage.setItem("state", bodyName);
}
</script>
<button onclick="change('style-a')" class="style-a" style="font-size:16px; background:none; border:none;">А</button>
<button onclick="change('style-aa')" class="style-aa" style="font-size:20px; background:none; border:none;">А</button>
<button onclick="change('style-aaa')" class="style-aaa" style="font-size:26px; background:none; border:none;">А</button>
<script type="text/javascript">	
var defaultState = 'style-a';
var state = localStorage.getItem("state");
change(!!state ? state : defaultstate);
</script>


Однако в связи с заменой классов поехали настройки отображения, и я решил менять не класс, а id и сделал так:
<script type="text/javascript">
function change(bodyName){
var bodyid = document.getElementsByTagName("body")[0];
bodyid.idName = bodyName;
localStorage.setItem("state", bodyName);
}
</script>
<button onclick="change('style-a')" class="style-a" style="font-size:16px; background:none; border:none;">А</button>
<button onclick="change('style-aa')" class="style-aa" style="font-size:20px; background:none; border:none;">А</button>
<button onclick="change('style-aaa')" class="style-aaa" style="font-size:26px; background:none; border:none;">А</button>
<script type="text/javascript">	
var defaultState = 'style-a';
var state = localStorage.getItem("state");
change(!!state ? state : defaultstate);
</script>


После произведенных замен по клику ничего не происходит, id не меняется.
Ответить с цитированием
  #2 (permalink)  
Старый 30.06.2017, 14:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,122

Сообщение от zapalych
и я решил менять не класс, а id
Это ошибка резидента! (с)

Не делай так.
Ответить с цитированием
  #3 (permalink)  
Старый 30.06.2017, 14:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,122

Сообщение от zapalych
bodyid.idName = bodyName;
Что это за свойство idName?
Ответить с цитированием
  #4 (permalink)  
Старый 30.06.2017, 14:21
Интересующийся
Отправить личное сообщение для zapalych Посмотреть профиль Найти все сообщения от zapalych
 
Регистрация: 30.06.2017
Сообщений: 11

а можно сделать так, чтобы другие классы не удалялись при клике?
Ответить с цитированием
  #5 (permalink)  
Старый 30.06.2017, 14:23
Интересующийся
Отправить личное сообщение для zapalych Посмотреть профиль Найти все сообщения от zapalych
 
Регистрация: 30.06.2017
Сообщений: 11

или даже так: чтоб заменялись только определенные (style-a, style-aa, style-aaa)?
Ответить с цитированием
  #6 (permalink)  
Старый 30.06.2017, 14:32
Кандидат Javascript-наук
Отправить личное сообщение для Diphenyl Oxalate Посмотреть профиль Найти все сообщения от Diphenyl Oxalate
 
Регистрация: 21.01.2017
Сообщений: 139

zapalych, classList
Ответить с цитированием
  #7 (permalink)  
Старый 30.06.2017, 14:32
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

zapalych,
Ты определись какую проблему хочешь решить. У подтипа HTMLElement нет такого свойства, как idName которое имело бы доступ к атрибуту id. Еще не используй кебабнотацию для именования идентификаторов.
Ответить с цитированием
  #8 (permalink)  
Старый 30.06.2017, 14:36
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от zapalych Посмотреть сообщение
а можно сделать так, чтобы другие классы не удалялись при клике?
el.classList.add('className');
или
el.className += ' my-class';
Ответить с цитированием
  #9 (permalink)  
Старый 30.06.2017, 14:41
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от zapalych Посмотреть сообщение
или даже так: чтоб заменялись только определенные (style-a, style-aa, style-aaa)?
el.classList.remove('className');
el.classList.add('className');
Ответить с цитированием
  #10 (permalink)  
Старый 30.06.2017, 15:24
Интересующийся
Отправить личное сообщение для zapalych Посмотреть профиль Найти все сообщения от zapalych
 
Регистрация: 30.06.2017
Сообщений: 11

Сообщение от j0hnik Посмотреть сообщение
el.classList.remove('className');
el.classList.add('className');
это можно прописать в onclick=""?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамичекая замена элемента javaphp Events/DOM/Window 5 04.01.2016 20:46
Замена background при нажатии кнопки Musica24 Элементы интерфейса 3 18.12.2015 09:43
Замена класса элемента razorg1991 Элементы интерфейса 8 23.09.2013 21:08
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
Замена хранимой информации в var по клику. koeshiro Общие вопросы Javascript 2 09.12.2012 17:58