0

Всем привет, пытаюсь сделать подсказки с кнопкой продолжения. Вопрос вот в чём, почему js не изменяет z-index.
То есть хочу сначала чтобы выделяло Часы и Минуты, а потом при нажатии кнопки

"Далее" z-index ввода Часы и Минуты понижался, а z-index кнопки Рассчитать повышался. Вроде делаю всё правильно, но не получается.

/*    /Это для "Инструкция"\   */
var instr_1 = document.getElementById("Instr_1"); /*Поля для ввода*/
var instr_2 = document.getElementById("Instr_2");
var instrtbtn = document.getElementById("Instr_btn"); /*Кнопка на меню*/
var instrclose = document.getElementsByClassName("instr_close")[0]; /*Крестик*/
var dalee_1 = document.getElementById("Dalee1"); /*Кнопка далее*/


instrtbtn.onclick = function() {
  instr_1.style.display = "block";
}
instrclose.onclick = function() {
  instr_1.style.display = "none";
}

var z_indexChas = document.getElementsByClassName("Hours");
var z_indexMin = document.getElementsByClassName("Minutes");
var z_indexBtn = document.getElementsByClassName("Button");

dalee_1.onclick = function() { /*Нажимаем на далее, предыдущее окно "закрывается", "открывается" следующее*/
  instr_2.style.display = "block";
  instr_1.style.display = "none";
  document.getElementById("a").style.zIndex = "1";
  document.getElementById("b").style.zIndex = "1";
  document.getElementById("c").style.zIndex = "5";
}
instrclose.onclick = function() {
  instr_2.style.display = "none";
}
.WOD {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 30px;
  z-index: 2;
}

.Hours,
.Minutes,
.Button {
  margin-left: 20px;
  z-index: 2;
}

.Hours,
.Minutes {
  z-index: 5;
}

 ::-webkit-input-placeholder {
  color: #000;
}

input[type=text] {
  background-color: #ffd63a;
  color: #000;
  padding: 16px 32px;
  font-size: 20px;
  border-radius: 5px;
  border: #ffd63a 2px;
  outline: none;
  z-index: 2;
}

input[type=text]:focus,
input[type=buttom]:focus {
  border: 1px solid white;
  z-index: 2;
}

input[type=button] {
  background-color: #ffd63a;
  color: #000;
  padding: 16px 32px;
  font-size: 20px;
  border-radius: 5px;
  border: #ffd63a 2px;
  outline: none;
  cursor: pointer;
  z-index: 2;
}

.instr_close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.instr_close:hover,
.instr_close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.INSTR_1 {
  display: none;
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.INSTR1-content {
  background-color: rgba(255, 255, 255, 1);
  padding: 10px;
  border: 1px solid #888;
  margin-top: 200px;
  margin-left: 180px;
  width: 200px;
}

.INSTR_2 {
  display: none;
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.INSTR2-content {
  background-color: rgba(255, 255, 255, 1);
  padding: 10px;
  border: 1px solid #888;
  margin-top: 200px;
  margin-left: 180px;
  width: 200px;
}
<div class="WOD">
  <div class="Hours"><input id="a" name="a" type="text" size="3" value="" placeholder="Часы"></div>
  <div class="Minutes"><input id="b" name="b" type="text" size="3" value="" placeholder="Минуты"></div>
  <div class="Button"><input id="c" type="button" size="3" value="Расcчитать" onclick="addition();"></div>
</div>

<li>
  <a><input class="MenuPunkty2" id="Instr_btn" type="button" placeholder value="Инструкция"></a>
</li>

<div id="Instr_1" class="INSTR_1">
  <div class="INSTR1-content">
    <span class="instr_close">&times;</span>
    <p>Первым делом введите время в поля ввода<br><span>(Не больше 23 часов и 59 минут).</span></p>
    <p>Не забудьте учесть время на засыпание! <br>В среднем оно составляет около <span>15</span> минут. </p>
    <p><button id="Dalee1" class="dalee">Далее</button></p>
  </div>
</div>

<div id="Instr_2" class="INSTR_2">
  <div class="INSTR2-content">
    <span class="instr_close">&times;</span>
    <p>Получите свой результат, нажав на кнопку "Рассчитать".</p>
    <p></p>
    <p><button id="Dalee2" class="dalee">Далее</button></p>
  </div>
</div>

2
  • Ниче не понятно, сейчас при нажатии на инструкцию поля часы и минуты выше по z-index а должно быть? Прочитайте описание которое вы написали там какой то текст отсутсвует
    – Greg--
    18 мая 2021 в 14:44
  • Нажимаем на Инструкцию, появляется окошко, выделяются часы и минуты, всё нормально. Нажимаем на далее, часы и минуты должны посереть, т.е z-index должен понизиться, а Рассчитать должен посветлеть, т.е z-index должен повыситься
    – AvAsas
    18 мая 2021 в 15:11

1 ответ 1

0

Не хватает части где меняем часам и минутам z-index. В dalee_1.onclick добавил две строки:

z_indexChas[0].style.zIndex = "1";
z_indexMin[0].style.zIndex = "1"

Так должно работать?

Обратите внимание что вы задаете z-index для .WOD но он не будет работать пока вы не зададите ему явно position или absolute, relative, fixed, но если вы зададите - то кнопки вы не сможите перекрыть попапом.

/*    /Это для "Инструкция"\   */
var instr_1 = document.getElementById("Instr_1"); /*Поля для ввода*/
var instr_2 = document.getElementById("Instr_2");
var instrtbtn = document.getElementById("Instr_btn"); /*Кнопка на меню*/
var instrclose = document.getElementsByClassName("instr_close")[0]; /*Крестик*/
var dalee_1 = document.getElementById("Dalee1"); /*Кнопка далее*/


instrtbtn.onclick = function() {
  instr_1.style.display = "block";
}
instrclose.onclick = function() {
  instr_1.style.display = "none";
}

var z_indexChas = document.getElementsByClassName("Hours");
var z_indexMin = document.getElementsByClassName("Minutes");
var z_indexBtn = document.getElementsByClassName("Button");

dalee_1.onclick = function() { /*Нажимаем на далее, предыдущее окно "закрывается", "открывается" следующее*/
  instr_2.style.display = "block";
  instr_1.style.display = "none";
  document.getElementById("a").style.zIndex = "1";
  document.getElementById("b").style.zIndex = "1";
  document.getElementById("c").style.zIndex = "5";
  // !!!!!!!!!!! Прячем часы и минуты
  z_indexChas[0].style.zIndex = "1";
  z_indexMin[0].style.zIndex = "1"
}
instrclose.onclick = function() {
  instr_2.style.display = "none";
}
.WOD {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 30px;
  z-index: 2;
}

.Hours,
.Minutes,
.Button {
  margin-left: 20px;
  z-index: 2;
}

.Hours,
.Minutes {
  z-index: 5;
}

 ::-webkit-input-placeholder {
  color: #000;
}

input[type=text] {
  background-color: #ffd63a;
  color: #000;
  padding: 16px 32px;
  font-size: 20px;
  border-radius: 5px;
  border: #ffd63a 2px;
  outline: none;
  z-index: 2;
}

input[type=text]:focus,
input[type=buttom]:focus {
  border: 1px solid white;
  z-index: 2;
}

input[type=button] {
  background-color: #ffd63a;
  color: #000;
  padding: 16px 32px;
  font-size: 20px;
  border-radius: 5px;
  border: #ffd63a 2px;
  outline: none;
  cursor: pointer;
  z-index: 2;
}

.instr_close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.instr_close:hover,
.instr_close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.INSTR_1 {
  display: none;
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.INSTR1-content {
  background-color: rgba(255, 255, 255, 1);
  padding: 10px;
  border: 1px solid #888;
  margin-top: 200px;
  margin-left: 180px;
  width: 200px;
}

.INSTR_2 {
  display: none;
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.INSTR2-content {
  background-color: rgba(255, 255, 255, 1);
  padding: 10px;
  border: 1px solid #888;
  margin-top: 200px;
  margin-left: 180px;
  width: 200px;
}
<div class="WOD">
  <div class="Hours"><input id="a" name="a" type="text" size="3" value="" placeholder="Часы"></div>
  <div class="Minutes"><input id="b" name="b" type="text" size="3" value="" placeholder="Минуты"></div>
  <div class="Button"><input id="c" type="button" size="3" value="Расcчитать" onclick="addition();"></div>
</div>

<li>
  <a><input class="MenuPunkty2" id="Instr_btn" type="button" placeholder value="Инструкция"></a>
</li>

<div id="Instr_1" class="INSTR_1">
  <div class="INSTR1-content">
    <span class="instr_close">&times;</span>
    <p>Первым делом введите время в поля ввода<br><span>(Не больше 23 часов и 59 минут).</span></p>
    <p>Не забудьте учесть время на засыпание! <br>В среднем оно составляет около <span>15</span> минут. </p>
    <p><button id="Dalee1" class="dalee">Далее</button></p>
  </div>
</div>

<div id="Instr_2" class="INSTR_2">
  <div class="INSTR2-content">
    <span class="instr_close">&times;</span>
    <p>Получите свой результат, нажав на кнопку "Рассчитать".</p>
    <p></p>
    <p><button id="Dalee2" class="dalee">Далее</button></p>
  </div>
</div>

3
  • Про wod понял, спасибо. Можно задать вопрос? За что отвечает число в квадратных скобках? И можно где-то информацию почитать актуальную на сегодняшний день? Я использовал document.getElementById("a").style.zIndex = "1"; но я так понял, что он больше не работает.
    – AvAsas
    18 мая 2021 в 15:40
  • когда вы ищите елементы через getElementsByClassName получаем не один элемент (как в случае с getElementById и querySelector) а HTMLCollection - коллекцию, HTML коллекцию мы можем перебирать как массив и работать с ним на подобии как с массивом нужно, если просто указать z_indexChas.style.zIndex будет ошибка так как его нужно через forEach к примеру перебирать. Квадратные скобки это указание берем первый (в случае [0]) найденный элементи из массива Подробнее Document.getElementsByClassName()
    – Greg--
    19 мая 2021 в 10:05
  • По записям getElementsByClassName и getElementById - в первом случае пишется ElementS (во множественном числе) во втором Element - т.е. возвращает один элемент. В случае с document.getElementById("a").style.zIndex = "1" нам нужно менять z-index не input-у а div-у в который этот инпут обвернут
    – Greg--
    19 мая 2021 в 10:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.