JS연습하기2(input,object,console.log)

2.JS기본(input 2개 받은 데이터를 객체로 저장하고, 콘솔에 특정문구로 해당 객체 데이터 가져와서 보여주기)

 

-HTML

<div>
	이름영역
    <input id="nameIpt" type="text" placeholder="이름을 입력해주세요">
</div>
<div>
	나이영역
    <input id="ageIpt" type="number" placeholder="나이를 입력해주세요">
</div>

<button class="button" onclick="handleForm()">
	정보를 공개합니다!!!!!
</button>
<div id="info"><div>

다음과 같이 나옴! (CSS준거)

 

function handleForm() {
	//이름
    const name = document.querySelector('#nameIpt').value
    //나이
    const age = document.querySelector('#ageIpt').value
    //객체만들기
    const personObj = {
    	name: name,
        age: age,
        }
    //객체 콘솔로 확인
    console.log(personObj)
    //객체 Key마다 빼와서 사용하기
    console.log(
    	`이 사람 이름은 ${personObj.name}이고, 나이는 ${personObj.age}살 입니다.`)
}

최웅/29 입력시

객체/객체 value사용