Develop record

[Javascript] value, preventDefault 본문

Programming Language/Javascript

[Javascript] value, preventDefault

seong's log 2024. 1. 14. 03:33

value

- 사용자가 요소(input, select 등)에 입력한 값에 접근

- 요소의 텍스트에 접근 : textContent, innerText

- 읽기, 쓰기 가능

- form에 포함된 입력 요소의 name을 통해 value에 접근 가능

 

preventDefault()

- form에서 이벤트가 제출되는 submit 이벤트가 발생하면 action 속성의 url로 리다이렉트 되지만, preventDefault()를 통해 기본 기능을 차단 할 수 있다

//대상 요소의 사용자 입력값을 읽어 콘솔에 출력
console.log(target.value)

//대상 요소의 사용자 입력값을 "변경값"으로 수정
target.value = "변경값"

 

<예제1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>추가</title>
</head>
<body>
    <input type="text" placeholder="아무거나" id="text"/> <!-- placeholder : 기본으로 보여지는 값 -->
    <input type="button" value="PUSH" id="button"/>
    <script src="event.js"></script>  
</body>
</html>
//button을 누르면 value 속성으로 읽기

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

button.addEventListener("click", function(){
    console.log(textInput.value) //value : 사용자 입력이 가능한 입력요소에서 사용되는 속성
    textInput.value = "클릭하면 이렇게 바뀝니다"
})

 

 

 

 

 

 

<예제2>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>추가</title>
</head>
<body>
    <form>
        <input type="text" placeholder="이름" name="name">
        <input type="text" placeholder="동네" name="town">
        <input type="submit" value="PUSH">
    </form>
    
    <script src="event.js"></script>  
</body>
</html>
const form = document.querySelector("form")

form.addEventListener("submit", function(e){ //submit 이벤트가 발생할 때 실행
    e.preventDefault()  
    //기존의 기능을 차단한다 => redirection 기능을 차단하고 그 밑에 원하는 기능을 채워서 새로운 이벤트 핸들링을 하겠다
 
    console.log(form.name.value) //form 요소에서 name이 name인 value를 읽겠다  
    console.log(form.town.value) //form 요소에서 name이 town인 value를 읽겠다  
})

 

'Programming Language > Javascript' 카테고리의 다른 글

[Javascript] Timer (setTimeout, setInterval, clearInterval)  (1) 2024.01.14
[Javascript] 삼항 연산  (0) 2024.01.14
[Javascript] createElement, appendChild  (0) 2024.01.14
[Javascript] addEventListener  (0) 2024.01.14
[Javascript] Event  (0) 2024.01.14
'Programming Language/Javascript' Related Articles more