- id 값과 같은 변수가 선언되어 있지 않은 경우 다음 코드와 같이 직접 데이터를 정의
<body>
<form action="" id="form">
<input type="text" id="name" placeholder="name input" autocomplete="off">
<input type="number" id="age" placeholder="age input" autocomplete="off">
<input type="button" id="createUserBtn" value="회원가입">
<input type="reset" id="resetUser" value="취소">
</form>
</body>
<script>
const form = document.querySelector('#form');
form.addEventListener('submit', (event)=>{
event.preventDefault();
})
const createUserBtn = document.querySelector('#createUserBtn');
createUserBtn.addEventListener('click', ()=>{
const API_URL = `http://localhost:3000/users`;
const user = {
name : name.value,
age : age.value,
}
}
</script>- 변수가 정의되어 있는 경우 (추천)
(1)
<script>
const API_URL = `http://localhost:3000/users`;
const nameValue = document.querySelector('#name').value;
const ageValue = document.querySelector('#age').value;
const user = {
name : nameValue,
age : ageValue,
}
</script>(2)
<script>
const API_URL = `http://localhost:3000/users`;
const name = document.querySelector('#name').value;
const age = document.querySelector('#age').value;
const user = {
name : name,
age : age,
}
</script>(2)- 1. js 객체는 key값과 value값이 같으면 value를 생략 가능 (추천)
<script>
const API_URL = `http://localhost:3000/users`;
const name = document.querySelector('#name').value;
const age = document.querySelector('#age').value;
const user = {
name,
age,
}
</script>