[Westagramタスク2]Loginページ機能の実現

.js

ver.1

const Btn = document.querySelector('.btn')
const id = document.getElementById('id'); 
const password = document.getElementById('password'); 

// 이벤트 콜백 함수 정의
function btnOn() {
    if (id.value !== "" && password.value !== "" && password.value.length >= 6) {
        Btn.style.opacity = "1"; 
    } else {
        Btn.style.opacity = "0.3"; 
    }
}

//이벤트 등록
id.addEventListener("keyup", btnOn);
password.addEventListener("keyup", btnOn);

js機能が正常に動作しない場合、コンソールウィンドウに問題が表示されます.

ずっと間違いばかりしていて、問題を探すのは本当に大げさだ.最初の週に習ったときは私のミスではないと思っていました.

変数を宣言する場合は、Btn、関数ではbtn

getElementById(idで検索)、要素指定時にclassで検索...
(' Uncaught TypeError: Cannot read property 'addEventListener' of null')
*addEventListenerは変数idの要素(=getElementById指定された要素)に貼り付けるべきですが、変数id指定が間違っています.

jsでcssを変更する

요소명.style.속성값 = 설정값

addEventListener

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

キーボードイベントタイプ:keyup(キーを押すとき)、keydown(キーを押すとき)

追加する内容

トルコ登録機能

パスワード表示ボタン

ver.2(3つの演算子を使用)

const btn = document.querySelector('.btn')
const id = document.getElementById('id');
const password = document.getElementById('password'); 

function allClear() {
    if (id.value !== "" && password.value !== "" && password.value.length >= 6) {
        return true;
    } else {
        return false;
    }
}

// 이벤트 콜백 함수 정의
function btnOn(allClear) {
    const check = allClear();
    function yes() {
        btn.style.opacity = "1";
    }
    function no() {
        btn.style.opacity = "0.3";
    }
    return (check ? yes() : no())
}

//이벤트 등록
id.addEventListener("keyup", ()=>{
    btnOn(allClear);
});
password.addEventListener("keyup", ()=>{
    btnOn(allClear);
});

さんこうえんざんし

3つを関数に変えました.