尝试通过单击按钮显示输入框 - Javascript

Question

我对 html css 和 JS 还是很陌生。我正在尝试通过单击按钮创建一个输入字段 appear/toggle。到目前为止，这是我的代码。

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";
  }
    }

我在互联网上四处寻找，似乎找不到答案。提前致谢

Answer 1

两件事：

如果按钮属性type的值无效（如这里的text），则该值变为submit。在表单内，单击 submit 按钮 refreshes the page。所以你将不得不使用不同的类型。
最初，style.display 是 ""，因为您使用 DOM 元素来查找它。 DOM 解析器没有添加 knowledge about styles 和 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>

Answer 2

我建议改为切换 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">

Answer 3

由于您通过CSS定义初始元素display 属性，您可能需要使用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>

Answer 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反对并检查它。

尝试通过单击按钮显示输入框 - Javascript

Trying to make input box appear from button click - Javascript

html

javascript

css

toggle

addeventlistener