試圖通過點擊按鈕使輸入框出現-Javascript -有解無憂

我對html、css和js還是很陌生。我試圖讓一個輸入欄位從一個按鈕的點擊中出現/切換。

HTML

<form> 
            <fieldset>/span>
                <legend>能力 15 事件監聽器</legend>
                <ol>/span>
                    <li>< button type="text" id="theButton" onclick="clickMe（）"> 點擊我! </button></li> 
                    <li>< input type="text" name="popup"/span> id="popup"/span>> </li>>
                </ol>/span>
            </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"。
  }

我在網上找了一圈，似乎沒有找到答案。先謝謝你

uj5u.com熱心網友回復：

我建議用切換CSS類來代替：

。

function clickMe() {
  var text = document.getElementById("popup"/span>)。
  text.classList.toggle("hide") 。
  text.classList.toggle（"show"）。
}

form {
  width: 50%;
}

.hide {
  display: none;
}

.show {
  display: block;
}

< button id="theButton" onclick="clickMe（）"> 點擊我！ onclick="clickMe（）"> 點擊我 </button>
< input type="text"/span> name="popup" id="popup" class="hide">

uj5u.com熱心網友回復：

幾件事：

如果按鈕屬性type的值是無效的（比如這里的text），那么這個值就變成了submit。在一個表單內，點擊submit按鈕重繪頁面。所以你必須使用不同的型別。

最初，style.display是""，因為你在使用DOM元素來尋找它。DOM決議器沒有關于樣式的知識與CSS樣式表一起添加。所以你必須在你的比較中加入一個條件--

。

if （text. style.display === "none" || text.style.display === ""）  {

另外，你可以把樣式放在行內中，這將被DOM決議為：

。

function clickMe() {
    var text = document.getElementById("popup"/span>)。
    console.log（text.style.display）。
  if (text.style.display == "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none"。
  }
}

span class="hljs-selector-tag">form{
    width: 50%;

}

<form>/span>
            <fieldset>/span>
                <legend>能力 15 事件監聽器</legend>
                <ol>/span>
                    <li>< button type="button" id="theButton" onclick="clickMe（）"> 點擊我! </button></li> 
                    <li>< input type="text"/span> name="popup" id="popup" style="display: none;"/>/span></li>/span>
                </ol>/span>
            </fieldset> 
        </form>/span>

uj5u.com熱心網友回復：

由于你通過CSS定義了初始元素display屬性，你可能需要使用getComputedStyle方法來獲得當前的樣式

。

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

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

<script>
  function toggleMe（） {
    var text = document.getElementById('popup'/span>)
    text.style.display = window. getComputedStyle(text, null).display === 'none' ? 'block' : 'none' ?
  }
</script>

uj5u.com熱心網友回復：

 <form> 
        <fieldset> 
            <legend>能力 15 事件監聽器</legend>
            <ol>/span>
                <li>< input type="button" value="點擊這里" onclick="clickMe()"> </li>>
                <li>< input type="text"/span> id="show"/span>> </li>>
            </ol> 
        </fieldset> 
    </form> 

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



form{
    寬度：50%。

}

#show {
   display: none;
}

如果你使用欄位集，你應該使用帶型別按鈕的輸入來制作按鈕。我已經把你的按鈕改成了一個帶型別的輸入按鈕，現在它可以作業了。

此外，還添加了另一個if回圈，檢查是否有顯示屬性，如果是空的""，則將其設定為 "無"。如果沒有第一個 if 回圈，將需要兩次點擊才能顯示輸入，因為首先你需要你的 else 將 display 設定為 "none"，只有第二次點擊才會將其設定為 "block"。

我不記得為什么會這樣，但這只是CSS的功能，如果你想的話，可以使用console.log(text.style)來獲取完整的CSS物件并檢查它。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/331821.html

標籤：

上一篇：如何從陣列字串中洗掉一些特殊字符

下一篇：希望圖片和文字在網格中保持水平對齊和對齊。