Изменение css вместо условия if

#javascript

#javascript

Вопрос:

HTML:

 <div id="register_error">
    <?php
        echo "$error_msg";
    ?>
</div>
  

JavaScript:

 if(document.getElementById("register_error").innerHTML)
{
    document.getElementById("signUpFormBackground").style.display = "block";
}
  

Я хочу, чтобы код JavaScript проверял каждый раз при загрузке страницы, есть ли какой-либо текст в #register_error div, хотя мой код, похоже, не работает, почему это? Чего я не понимаю? Если нужна дополнительная информация, просто спросите.

РЕДАКТИРОВАТЬ——————————— Я убрал пробелы, как некоторые из вас сказали

 <div id="register_error"><?php echo "$error_msg";?></div>
  

но это не помогло, я думаю, проблема в том, что эта часть кода никогда не вызывается, я не сделал это в функции, я просто написал это в тегах скрипта. Также пробовал .trim() и .методы length(), но ответ все тот же.
ПРАВКА2———————————
Я сделал

 enter code hereif(document.getElementById("register_error").innerHTML)
{
    document.getElementById("signUpFormBackground").style.display = "block";
}
else
{
    document.getElementById("signUpFormBackground").style.display = "block";
}
  

и ничего не происходит, так что, я думаю, моя проблема в том, что я даже не запускаю свой код, чтобы начать работать, я всегда думал, что если я помещу его между тегами скрипта, он всегда будет запускаться хотя бы один раз при загрузке веб-сайта, так как же мне на самом деле запустить его при загрузке Windows, я уже пробовал это:

 <script>
window.onload
{
    if (document.getElementById("register_error").innerHTML.length > 0 )
    {
        document.getElementById("signUpFormBackground").style.display = "block";
    }
    else
    {
        document.getElementById("signUpFormBackground").style.display = "block";
    }
}
</script>
  

Результат——————————
Наконец-то нашел свою ошибку, я не вызывал функцию и думал, что она что-то сделает без ее вызова, код был в порядке.

Комментарии:

1. Вы проверили консоль на наличие ошибок? Если ваш <script> тег появляется перед HTML, который вы опубликовали выше, то вы получите ошибки, потому что элемент еще не будет в DOM.

Ответ №1:

Любое количество пробелов может сбить вашу .innerHTML проверку, и, похоже, у вас уже есть некоторые. попробуйте это:

 <div id="register_error"><?php echo "$error_msg";?></div>
  

Javascript:

 if(document.getElementById("register_error").innerHTML == '')
{
    document.getElementById("signUpFormBackground").style.display = "block";
}
  

Вы также можете проверить, innerHTML.length > 0 :

 if(document.getElementById("register_error").innerHTML.length > 0)
  

Хотя это и не идеально, вы также можете перенести свою логику ошибок в свой php:

 <?php

if ($error_msg != '')
{
   echo "<style>#signUpFormBackground { display: block;}</style>";
}
?>
  

Комментарии:

1. Или обрезать innerHTML.

2. Что var htmlString = document.getElementById('register_error').innerHTML; console.log(htmlString, htmlString.length, htmlString.trim().length) выводит?

Ответ №2:

В вашем php-коде есть отступ. Таким образом, innerHTML содержит текст, даже если из PHP-кода ничего не выводится. Вы должны trim() использовать свой innerHTML, прежде чем проверять, пусто ли оно

 document.getElementById("register_error").innerHTML.trim()
  

Пример

Комментарии:

1. Возможно, вы захотите упомянуть о совместимости / доступности trim() .

Ответ №3:

Я думаю, проблема в приведенном ниже if условии:

 document.getElementById("register_error").innerHTML
  

Ваш внутренний html возвращает строку, поэтому вы должны проверять ее длину как:

 if(document.getElementById("register_error").innerHTML.length) {}
  

Комментарии:

1. Тестирование innerHTML.length эквивалентно тестированию innerHTML , поскольку оба значения имеют значение true, если innerHTML значение непустое. Проблема, однако, заключается в пробелах в HTML, из-за чего innerHTML никогда не бывает полностью пустым.