[TIL]21.06.06
이걸 구현할려고 보니, setAttribute로 onclick이 될 경우 함수를 실행도록 setAttribute 두번째인자에 함수를 선언하니 제대로 작동되지 않았다. 알아보니 Chrome에서는 지원을 안한?다고 다음과 같이 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로 삼고 내 실력을 판단하며 공부하고 성장해야겠다.
Author And Source
이 문제에 관하여([TIL]21.06.06), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@juho00ng/TIL21.06.07저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)