JavaScript에서 입력 값 변경
이 튜토리얼에서는 value 속성이나 JavaScript의 setAttribute() 함수를 사용하여 입력 값을 변경하는 방법에 대해 설명합니다.
JavaScript의 value 속성을 사용하여 입력 값 변경
입력 태그를 사용하여 사용자로부터 입력을 받고 value 속성을 사용하여 입력 값을 변경할 수 있습니다. 우선, id나 이름을 사용하여 값을 변경하려는 요소를 가져와야 하며, 그 다음 value 속성을 사용하여 해당 값을 원하는 값으로 설정할 수 있습니다. JavaScript에서 요소를 가져오기 위해 getElementById() 또는 querySelector() 함수를 사용할 수 있습니다. 예를 들어, 입력이 있는 양식을 만들고 getElementById()를 사용하여 JavaScript에서 요소를 가져오고 value 속성을 사용하여 해당 값을 설정하는 id를 지정해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.getElementById("123");
console.log(Myelement.value);
Myelement.value = "New value";
console.log(Myelement.value);
</script>
</html>
출력:
Some Value
New value
위의 코드에서 document.getElementById() 함수를 사용하여 id를 사용하여 요소를 가져오고 다음 줄에는 console.log() 함수를 사용하여 현재 입력 값을 출력했습니다. 그런 다음 value 속성을 사용하여 입력 값을 원하는 값으로 설정한 후 콘솔에 새 값을 인쇄했습니다. querySelector() 함수를 사용하여 입력 값을 변경하려는 요소를 선택할 수도 있습니다. 예를 들어 querySelector() 함수를 사용하여 위의 예를 반복해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.querySelector('input[name="ABC"]');
console.log(Myelement.value);
Myelement.value = "New value";
console.log(Myelement.value);
</script>
</html>
출력:
Some Value
New value
위의 코드에서 querySelector() 함수를 사용하여 요소를 가져왔습니다.
JavaScript의 setAttribute() 함수를 사용하여 입력 값 변경
value 속성 대신 setAttribute() 함수를 사용하여 입력 값을 설정할 수도 있습니다. getElementById() 또는 querySelector() 함수 대신 forms() 함수를 사용하여 양식 이름과 입력 이름을 사용하여 요소를 가져올 수도 있습니다. 예를 들어 setAttribute() 및 froms() 함수를 사용하여 위의 예를 반복해 보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form name="FormABC">
<input type="text" id= "123" name="ABC" value="Some Value">
</form>
</body>
<script type="text/javascript">
var Myelement = document.forms['FormABC']['ABC'];
console.log(Myelement.value);
Myelement.setAttribute('value','New value');
console.log(Myelement.value);
</script>
</html>
출력:
Some Value
New value
보시다시피 이 모든 방법의 출력은 동일하므로 요구 사항에 따라 원하는 방법을 사용할 수 있습니다.
