JavaScript(15)

박찬영·2024년 1월 18일

JavaScript

목록 보기

15/19

1. 입력 요소 값 읽기

<input>, <select>처럼 사용자로부터 입력을 받는데 사용 되는 요소들이 있다.
여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근한다.

차이
 → 요소의 텍스트에 접근하고 싶다 : textContent 또는 innerText
 → 사용자가 요소에 입력한 값에 접근하고 싶다 : value

2. value의 접근

1) 읽기	ex) console.log(target.value)
2) 쓰기	ex) target.value = "변경값"

3. event.preventDefault()

• <a>와 <submit>와 같은 몇몇 태그들은 특수한 기능을 가지고 있다.
• <a>태그는 href에 연결된 링크를 통해, 해당 페이지로 이동하는 기능을 가지고 있으며,
  <submit>태그는 그 태그의 값을 전송하면서 해당 페이지를 새로고침 하는 기능을 가지고
  있다.
• 이러한 기능들은 매우 유용하지만, 그 의도로 사용하지 않게 될 경우 불편함을 야기할
  수 있다. 이때 사용하는 것이 바로 event.preventDefault()이다.

4. 실습

1) html 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>자바스크립트 실습</title>
    </head>
    <body>
        <input type="text" placeholder="아무거나" id="text">
        <input type="button" value="PUSH" id="button">

        <form>
            <input type="text" placeholder="이름" id="name" >
            <input type="text" placeholder="동네" id="town" >
            <input type="submit" value="PUSH" >
        </form>
        
        <script src="script.js"></script>
    </body>
</html>

2) js 코드

const textInput = document.getElementById("text")
const button = document.getElementById("button")

button.addEventListener('click', function(){
    //console.log(textInput.value)
    textInput.value = "클릭하면 바뀜"
})

const form = document.querySelector("form")

form.addEventListener("submit", function(e){
    e.preventDefault()
    console.log(form.name.value)
    console.log(form.town.value)
})