JavaScript (eventlistner 什么的)

Question

我有一個簡單的 html，帶有一個輸入框（id=input）和一個按鈕（id=button），按鈕文本為“顯示”。 我已經寫了 JavaScript 來更改顯示以隱藏點擊和基本內容。

最初，不顯示任何按鈕（因為沒有顯示按鈕）。 我想要的是，只要我在輸入框中輸入任何內容，就會顯示顯示按鈕。 如何在 JavaScript 中這樣做？

這是我的 JavaScript：-

let input = document.getElementById('input');
let btn = document.getElementById('button');

btn.addEventListener('click', () => {
    if (btn.innerText === "SHOW") {
        btn.innerText = "HIDE";
        input.type = "text";
    } else {
        btn.innerText = "SHOW";
        input.type = "password";
    } 
})

Answer 1

下面的代碼片段根據輸入中的數據顯示和隱藏按鈕

這也是您正在尋找的事件https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

 document.querySelector("#pass").addEventListener('input', (event) => { if (document.querySelector("#pass").value.length === 0 ) { document.querySelector("#btn").style.display = 'none'; } else { document.querySelector("#btn").style.display = 'inline-block'; } } );

 #btn { display: none; }

 <input id="pass"> <button id="btn"> Show </button>

下面的代碼應該可以幫助您解決您提出的問題（即它不會自動隱藏按鈕）

 document.querySelector("#pass").addEventListener('input', () => { document.querySelector("#btn").style.display = 'inline-block'; });

 #btn { display: none; }

 <input id="pass"> <button id="btn"> Show </button>

Answer 2

如果我正確理解了您的問題，您應該在輸入字段中添加一個更改事件監聽器。 這樣，當輸入字段發生變化時，您可以決定要做什么。

input.addEventListener("change", function(){
if (input.value !== ""){
   // do something
   } else {
    do something else
   }
} )

Answer 3

下面的代碼片段是你問的工作 model

請盡量避免使用innerText 、 innerHTML或on*屬性。

參考：

• https://www.digitalocean.com/community/tutorials/js-innertext-and-innerhtml
• 為什么在 HTML 中使用 onClick() 是一種不好的做法？

 let input = document.getElementById('dataEntry') let displayButton = document.getElementById('btn') document.addEventListener('input', () => { if (input.value.length === 0) { displayButton.style.display = 'none'; } else { displayButton.style.display = 'inline-block'; } }) displayButton.addEventListener('click', (event) => { if (event.target.textContent.toLowerCase() === 'hide') { input.type = 'password' event.target.textContent = 'Show' } else { input.type = 'text' event.target.textContent = 'Hide' } })

 .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } #btn { display: none; }

 <div class='container'> <input type='text' id='dataEntry' placeholder='Enter your password' required/> <button id='btn'>Hide</button> </div>