[TIL]21.06.06

Domでアイデンティティ、パスワード入力、出力のhtmlコードを生成する機能を実現しました.

setAttributeを使用してonclickを実行する場合、setAttributeの2番目のパラメータに関数が宣言されているため、正常に動作しません.ローマには支援がないの?DOMのonclickなどのイベントハンドラに関数を割り当てるには、次のコードを記述する必要があります.

inputMaker.onclick = function(){};

また、反応で使う方法とHTMLで使う方法は違います.

//HTML
onclick
//React
onClick

let list = {};

function setList(id, password){
    if(list[id] === undefined){
        list[id] = password;
        alert('You have it');
    }else{
        alert('You already have it');
    }
}

function getList(){
    return `${list}`;
}

let body = document.querySelector('body');
let idMaker = document.createElement('input');
let passwordMaker = document.createElement('input');
let getButtonMaker = document.createElement('input');
let seeButtonMaker = document.createElement('input');


idMaker.setAttribute('type', 'text');
passwordMaker.setAttribute('type', 'password');
getButtonMaker.setAttribute('value', 'submit');
getButtonMaker.onclick = function(){
    console.log(idMaker.value, passwordMaker.value);
     if(list[idMaker.value] === undefined){
        list[idMaker.value] = passwordMaker.value;
        alert('You have it');
    }else{
        alert('You already have it');
    }
}
seeButtonMaker.setAttribute('value', 'See id, password');
seeButtonMaker.onclick = function(){
    let _temp = document.createElement('div');
    _temp.textContent = 'List';
  
    for(let key in list){
        let temp = document.createElement('div');
        temp.textContent = `ID : ${key}, PassWord: ${list[key]}`;
        body.append(temp);
    }
}

body.append(idMaker);
body.append(passwordMaker);
body.append(getButtonMaker);
body.append(seeButtonMaker);

どのフレームワーク、言語、ライブラリを学習しても、

CRUD

とても重要だと思います.
フレームワーク、言語、ライブラリなど開発可能なツールを学んだ後、CRUDができなければ利用できないと言えると思います.
だから私は学習の標準をCRUDとして、私の実力を判断して、学習して成長します.