JS 폼 활용

tweetForm.addEventListener('submit', function (e) {
    alert("SUBMIT~!!")
    e.preventDefault();
}) // form안에 있는 버튼을 눌러서 submit 이벤트를 하면 alert이 뜨는 이벤트인데, 
   // form안에 있기때문에 데이터를 보내는 action을 실행한다. 이것을 막기 위해서 
   // e.preventDefault() 코드를 넣으면 해당 submit이하는 기본적인 event를 막는다.

해당 기능을 사용하려면 function안에 객체가 있어야 한다. 

    const usernameInput = document.querySelectorAll('input')[0];
    const tweetInput = document.querySelectorAll('input')[1];   
    console.log(usernameInput.value, tweetInput.value);
    // 위의 코드는 변수를 정한다음 해당 변수의 value 값을 불러오는 방식
    // 아래의 코드는 form id의 elements의 name에서 value를 불러오는 방식
    console.log(tweetForm.elements.username.value);
    console.log(tweetForm.elements.tweet.value);

만약 input에 i hate you 를 작성했으면 해당 value값은 "i hate you" 가 된다.

두 방법중 아래 코드의 방식이 더 좋다.

 

const tweetForm = document.querySelector('#tweetForm');
const tweetsContainer = document.querySelector('#tweets'); // ul을 id로 지정해서 변수처리

tweetForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const usernameInput = tweetForm.elements.username;
    const tweetInput = tweetForm.elements.tweet;
    addTweet(usernameInput.value, tweetInput.value);
    usernameInput.value = ''; // 입력이후 빈칸
    tweetInput.value = '';
})

const addTweet = (username, tweet) => {
    const newTweet = document.createElement('li'); // il 태그
    const bTag = document.createElement('b'); // bold 태그
    bTag.append(username) // bold 태그에 usernameInput.value 추가
    newTweet.append(bTag); // li에 bTg 추가
    newTweet.append(`- ${tweet}`) // 이후 tweet 추가
    tweetsContainer.append(newTweet); // ul에 위에서 입력한 li와 b 추가
}

완성된 username과 tweet의 내용을 적으면 html에 화면이 업데이트되는 코드이다.