JavaScript - не меняются стили css

237

20 августа 2018, 14:50

CSS:

.noentering, .entering {
    display: none;
}

HTML:

<h1 class="noentering">Вы не зашли на сайт.</h1>
<div class="entering">
    <p>Здравствуйте, <span class="nameofyou"></span>!</p>
</div>

JS:

var name;
if (confirm("Зайти на сайт?")) {
  name = prompt("Введите свое имя для продолжения");
  alert("Здравствуйте, " + name + "!");
  document.getElementsByClassName('entering').style.display = 'block';
  document.getElementsByClassName('nameofyou').innerHTML(name);
} else {
  document.getElementsByClassName('noentering').style.display = 'block';
}

При нажатии в окне confirm на "отмену" или "ОК" display: block элементам не применяется.

Answer 1

let name; 
if (confirm("Зайти на сайт?")) { 
  name = prompt("Введите свое имя для продолжения"); 
  alert("Здравствуйте, " + name + "!"); 
  document.querySelector('.entering').style.display = 'block'; 
  document.querySelector('.nameofyou').innerHTML = name; 
} else { 
  document.querySelector('.noentering').style.display = 'block'; 
}

.noentering, .entering { 
    display: none; 
}

<h1 class="noentering">Вы не зашли на сайт.</h1> 
<div class="entering"> 
    <p>Здравствуйте, <span class="nameofyou"></span>!</p> 
</div>

document.getElementsByClassName возвращает коллекцию элементов, а не отдельный элемент. Для этого нужно использовать document.querySelector(selector) + innerHTML - это св-во, а не функция