Как скрыть html элемент с помощью JS?

Question

[KitOsorgin]

Имеется html страница, к которой подключена библиотека jquery, а также один скрипт.
Собственно, на странице реализован механизм, по которому в зависимости от нажатых кнопок меняются элементы на экране. В итоге, после одного из действий, один div блок сменяется другим. В новом div-е имеются различные элементы, некоторые имеют атрибут, прописанный в html - "hidden". Так, в зависимости от различных условий, когда данный div появляется на экране, определенные hidden элементы должны показываться, а показываемые по умолчанию - скрываться. По непонятным причинам, данная часть кода наотрез отказывается работать. Особенно напрягает то, что с другими элементами (те же упомянутые мной div-ы) - все в порядке, я буквально копирую команду на отображение, меняя лишь ID элементов - эффекта ноль. Ниже привожу html код div-а и часть кода скрипта js:

<div class="holder">
                    <div class="text__holder">
<b>                        <p class="mid__text" id="emailAd" >текст 1</p></b>
                        <div class="timer__holder">
                            <div class="timer" id="confirmTimerMin">00</div>
                            <p class="timer">:</p>
                            <div class="timer" id="confirmTimerSec">60</div>
                        </div>
<b>                        <p class="mid__text" id="phoneAd" hidden>текст 2</p></b>
                    </div>
                </div>
                
                <form class="form__vertical__center" id="ConfirmForm">
                    <p class="error__text" id="errorCode" hidden>ошибка</p>
                    <input class="input__mid" id="Code" name="Code" placeholder="полученный пароль">
            <input class="box__button__big" id="confirmButton" name="confirmButton" type="submit" value="Отправить">
                    <input class="box__button__big" id="retryButton" name="retryButton" type="submit" value="Отправить повторно" hidden>
                </form>
            </div>

if (state === 0) {                                    
                        document.getElementById("clientReg").hidden=true;
                        document.getElementById("regConfirm").hidden=false;
<b>                        if (login_type === 1) {
                            document.getElementById("emailAd").hidden=false; 
                            document.getElementById("phoneAd").hidden=true;
                        } else if (login_type == 2) {
							 alert ('проверка');
                            document.getElementById("emailAd").hidden=true; 
                            document.getElementById("phoneAd").hidden=false;
                        }</b>
                        Timer();
                    }

Жирным я выделил то, где имеется проблема. Могу заметить, что условия выполняются корректно - прописанный alert появляется как надо. Также думал о том, чтобы заменить два элемента одним и работать с innerHtml текстом, или менять кавычки с двойных на одиночные (смех смехом, а у меня так innerHtml не работал с двойными, а с одиночными - вполне) или выбирать элемент с помощью средств jQuery - результат тот же, безуспешный. В общем, ситуация сводит сума, возможно, дело в какой-то мелочи, как это обычно бывает, но ничего не выходит. Крайне прошу помочь, заранее благодарю!

Answer 1

[Николай Чуприк]

У вас конечно что html-разметка, что код просто ужас-ужас . Начнём с того, что вы используете то ===, то ==. Вы уж определитесь, оставьте лучше ==. Это потенциальный источник ошибки, мы же не знаем, что вы там делаете с переменной login_type по дороге.

if (login_type == 1) {
	$('#emailAd').show();		
	$('#phoneAd').hide();
} else if (login_type == 2) {
	$('#emailAd').hide();		
	$('#phoneAd').show();
}

Comments

[KitOsorgin]

Благодарю за ответ! К сожалению, предложенный Вами вариант также не сработал. По поводу замечания о "==" - также везде поправил. Что касается переменной - ее значение просто приходит из php обработчика (приходит успешно, проверялось). Больше никаких действий в скрипте с ней не выполняется. По поводу "ужас-ужас" - прошу прощения, это не относится к вопросу, конечно, но не могли бы вы указать конкретнее хотя бы пару недочетов, я в этом во всем весьма "зеленый", поэтому знание "как сделать лучше" - весьма ценно.

[Николай Чуприк]

Пока, наверное, это кажется вам не очевидным, но стремитесь то, как отображаются элементы, определять в CSS, а не управлять ими кодом. Например, модифицируя ваш пример (хотя там, вероятно, надо много что менять) можно написать:

#emailAd.login-type-1	{display: none;}
#emailAd.login-type-2	{display: inline;}
#phoneAd.login-type-1	{display: inline;}
#phoneAd.login-type-2	{display: none;}

if (login_type == 1)
	$('#emailAd, #phoneAd').removeClass('login-type-2').addClass('login-type-1');
else if (login_type == 2)
	$('#emailAd, #phoneAd').removeClass('login-type-1').addClass('login-type-2');

Зато в дальнейшем, если вы например захотите не убрать с экрана, а например сделать блеклыми соответствующие надписи, код править будет не надо, а только лишь внести изменения в стили CSS.

А если, как вы говорите, login_type прилетает из PHP, то это вероятно константа с точки зрения логики JS-cкрипта и стиль элементов определяется только однажды, то можно код c if-ами вообще сократить до:

$('#emailAd, #phoneAd').addClass('login-type-'+login_type);

И даже убрать определение стилей с 'inline', если это так по умолчанию на вашей странице.

[Николай Чуприк]

1. jQuery нормально подключилась?

2. Кроме того манипулируя с классами гораздо проще наблюдать, что происходит, в отладчике. Проще проверить наличие или отсутствия у элемента класса, чем просматривать каскад стилей для этого элемента и гадать, откуда что взялось?

[KitOsorgin]

Спасибо за подробный ответ! jQuery подключилась корректно, все работает. Вариант со стилями - оказался вполне рабочим, к счастью, видимо, его теперь и буду использовать. Единственное - все равно крайне интересно, почему манипуляции с innerhtml и hidden=true/false не работают на этих конкретных элементах... Вроде с точки зрения синтаксиса js/jquery и вариант с getelementbyid, и предложенная вами выборка элементов jquery все в порядке, с условиями тоже (даже без условий, кстати, не работает, и если не учитывать переменную), и тут уже, конечно, больше дело принципа/интереса- понять, "а что, собственно, не так?" :)

[Николай Чуприк]

Не работает конкретно тот код, который вы запастили, потому что возникает ошибка в строке
document.getElementById("clientReg")...

Нет такого элемента в том куске HTML-документа. Дальше код не выполняется. Если убрать первые две строки, то всё работает: https://codepen.io/anon/pen/qXGVGQ

[KitOsorgin]

Николай Чуприк, хм, действительно, однако я просто не стал копипастить весь код страницы html сюда, там элемент с этим id есть, и он успешно скрывается. Собственно, установив в полной версии сайта аналогичный alert для проверки в условиях с login_type - alert выводит, а hidden команды не работают. Мистика какая-то...

[Николай Чуприк]

Karl_Fridrih, как с этим работать:

1. Посмотрите сообщения об ошибках во вкладке "Консоль" в отладчике. Скорее всего на этом этапе всё станет ясно.

2. Если нет, то выведите в консоль отладчика console.log(...) или на alert(...) значение document.getElementById(...).innerHtml, который не работает, или другой его атрибут, чтобы удостовериться, что он правильно достаётся из документа. Или

3. Поставьте точки останова в отладчике и трассируйте код построчно. При этом создайте экземпляры элементов DOM var myElement = document.getElementById(...) и смотрите их нутро в значении переменных в отладчике.

Как-то так.

С большой долей вероятности ошибка в разборке DOM, скрипт не может получить элемент с помощью getElementById. Проверьте, нет ли в документе других элементов с таким же id, а также наличие опечаток.

[KitOsorgin]

Николай Чуприк, огромное спасибо, вот и нашлась ошибка - я готовил div с аналогичным содержанием скрытый, который и дублировал представленный div с проблемой. Конечно же, id я там благополучно не поменял и вот результат... Как всегда из-за невнимательности у меня проблемы. Но в любом случае, хотя причина оказалась глупая - много полезного узнал для разработки в дальнейшем - и про стили, и про отладку в браузере :)

Answer 2

[foxyrus]

Отладкой в браузере не пользуешься?
Используй document.getElementById("emailAd").style.display = "none";
или на JQuery $('#emailAd').hide();

Comments

[KitOsorgin]

Спасибо за ответ! Оба предложенных варианта, к сожалению, также не помогли. С отладкой в браузере, к сожалению, мало "дружу", по существу, только сейчас решил подробнее ознакомиться с ее функциями.