Я все еще новичок в html css и JS. Я пытаюсь заставить поле ввода появляться / переключаться при нажатии кнопки. вот мой код до сих пор.

HTML

<form>
            <fieldset>
                <legend>Competency 15 Event Listeners</legend>
                <ol>
                    <li><button type="text" id="theButton" onclick="clickMe()">Click me!</button></li>
                    <li><input type="text" name="popup" id="popup"></li>
                </ol>
            </fieldset>
        </form>

CSS

form{
    width: 50%;

}
 #popup {
    display: none;
 }

JavaScript

function clickMe(){
    var text = document.getElementById("popup");
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
    }

Я поискал в Интернете и не нашел ответа. заранее спасибо

1
ArcticMoose 21 Сен 2021 в 20:20

4 ответа

Лучший ответ
    <form>
        <fieldset>
            <legend>Competency 15 Event Listeners</legend>
            <ol>
                <li><input type="button" value="click here" onclick="clickMe()"></li>
                <li><input type="text" id="show"></li>
            </ol>
        </fieldset>
    </form>

    <script>
        function clickMe() {
            var text = document.getElementById("show");
            if (!text.style.display) {
                text.style.display = "none";
            }
            if (text.style.display === "none") {
                text.style.display = "block";
            } else {
                text.style.display = "none";
            }
        }
    </script>



form{
    width: 50%;

}

#show {
   display: none;
}

Если вы используете наборы полей, вы должны использовать ввод с кнопкой типа для создания кнопок. Я заменил вашу кнопку на ввод с кнопкой типа, и теперь она работает.

Кроме того, добавлен еще один цикл if, который проверяет, есть ли свойство отображения, и, если оно пустое, устанавливает для него значение «none». Без первого цикла if потребуется 2 щелчка мышки, чтобы отобразить ввод, потому что сначала вам понадобится else, чтобы установить отображение на «none», и только второй щелчок установит его на «block».

Я не помню, почему это так работает, но именно так работает CSS, если вам это нравится, используйте console.log (text.style), чтобы получить полный объект CSS и изучить его.

0
Gerpstarg 21 Сен 2021 в 18:22

Вместо этого я бы рекомендовал переключать классы CSS:

function clickMe() {
  var text = document.getElementById("popup");
  text.classList.toggle("hide");
  text.classList.toggle("show");
}
form {
  width: 50%;
}

.hide {
  display: none;
}

.show {
  display: block;
}
<button id="theButton" onclick="clickMe()">Click me!</button>
<input type="text" name="popup" id="popup" class="hide">
1
Rojo 21 Сен 2021 в 17:39

Пара вещей:

  1. Если значение атрибута кнопки type недопустимо (например, здесь text), тогда значение становится submit. Внутри формы нажатие кнопки submit обновляет страницу. Так что вам придется использовать другой тип.

  2. Первоначально style.display - это "", потому что вы используете элементы DOM для его поиска. У парсера DOM нет знаний о стилях добавлен с таблицей стилей CSS. Поэтому вам нужно будет включить еще одно условие в ваше сравнение -

if (text.style.display === "none" || text.style.display === "") {

В качестве альтернативы вы могли бы поместить стиль как встроенный, который будет анализироваться DOM, как показано ниже:

function clickMe(){
    var text = document.getElementById("popup");
    console.log(text.style.display);
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
form{
    width: 50%;

}
<form>
            <fieldset>
                <legend>Competency 15 Event Listeners</legend>
                <ol>
                    <li><button type="button" id="theButton" onclick="clickMe()">Click me!</button></li>
                    <li><input type="text" name="popup" id="popup" style="display: none;"/></li>
                </ol>
            </fieldset>
        </form>
1
Tushar Shahi 21 Сен 2021 в 17:47

Поскольку вы определяете свойство начального элемента display через CSS, вам может потребоваться использовать метод getComputedStyle для получения текущего стиля

<style>
 #popup {
    display: none;
 }
</style>

<form>
  <ol>
      <li><button type="button" onclick=toggleMe()>Toggle me!</button></li>
      <li><input type="text" id="popup"></li>
  </ol>
</form>

<script>
  function toggleMe() {
    var text = document.getElementById('popup')
    text.style.display = window.getComputedStyle(text, null).display === 'none' ? 'block' : 'none'
  }
</script>
0
decryptingfuture 21 Сен 2021 в 17:42