[Westagram]JavaScript-ボタンの有効/無効化
5204 ワード
Westagram_Ⅰ.ボタンの有効化/無効化&コメントの有効化
<button>タグのdisabled属性とは?プライマリコード
ログインウィンドウボタンの有効化/無効化
const loginButton = document.getElementsByTagName('button')[0];
const idInput = document.querySelector('.idInput');
const pwInput = document.querySelector('.pwInput');
function active(){
if(idInput.value && pwInput.value) {
loginButton.removeAttribute("disabled","");
loginButton.style.backgroundColor = "#5586EB";
} else {
loginButton.setAttribute("disabled","");
loginButton.style.backgroundColor = "#c4e1fb";
}
}
idInput.addEventListener('keyup', active);
pwInput.addEventListener('keyup', active);
-
getElementByTagName('')特定のタグを持つすべての要素を選択し、選択した要素は類似の配列オブジェクトとして返されます.-したがって、このメソッドとしてタグを文書にインポートする必要がある場合、
[index]の値が後で与えられる.ex. const loginButton = document.getElementsByTagName('button')[0]-代わりに、querySelector('')はCSS選択者に要素を選択させる.-選択者に対応する最初の要素のみを選択するので、正しい選択者を選択していることを確認します.
ex. document.querySelector('.idInput')−さらに、querySelectorAll('')は、特定のCSSセレクタを有する全ての要素を配列として導入する方法であるので、getElementByTagName('')のように[index]の値を後で与えるべきである.<button>タグに「無効」という属性値を付与し、この値を使用してボタンを有効/無効にするにはどうすればいいですか?1.HTMLの
<button>タグに無効という属性値を付与2.if文を使用してinputのvlaue値に条件を提供し、
removeAttribute()メソッドを使用して無効な属性を除去するex. loginButton.removeAttribute("disabled","")3.setAttribute()メソッドを使用して、条件(else)を満たさない無効な属性を設定ex. loginButton.setAttribute("disabled",""); Reference
この問題について([Westagram]JavaScript-ボタンの有効/無効化), 我々は、より多くの情報をここで見つけました https://velog.io/@yyeonjju/Westagram.버튼-활성비활성화-댓글-기능-구현テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol