자바스크립트에서 입력값을 얻는 방법

프론트엔드 개발에서는 사용자가 입력한 데이터를 처리하기 위해서는 일반적으로 폼 요소의 입력 값을 얻어야 합니다. JavaScript는 입력 값을 가져오는 몇 가지 방법을 제공합니다. 살펴보겠습니다.

1. 텍스트 상자의 입력 값 가져오기

텍스트 상자는 입력 값을 가져올 때 가장 일반적인 양식 요소 중 하나입니다. getElementById 메소드를 통해 텍스트 상자 요소를 가져온 다음 value 속성을 사용하여 입력된 값을 가져올 수 있습니다.

샘플 코드:

<input type="text" id="myText">
<script>
    var inputVal = document.getElementById("myText").value;
    console.log(inputVal);
</script>

위 코드에서는 먼저 텍스트 상자 요소를 정의한 다음 JavaScript를 사용하여 입력 값을 가져온 다음 마지막으로 값을 콘솔에 출력합니다.

2. 다중 선택 상자의 입력 값 가져오기

다중 선택 상자는 일반적으로 하나 이상의 옵션을 선택하는 데 사용됩니다. 모든 선택 항목을 반복하여 입력 값을 얻을 수 있습니다. 먼저 다중 선택 상자의 모든 옵션을 가져온 다음 모든 옵션을 반복하고 확인된 속성을 통해 옵션 상태를 가져와야 합니다.

샘플 코드:

<input type="checkbox" class="checkbox" value="apple">
<input type="checkbox" class="checkbox" value="orange">
<input type="checkbox" class="checkbox" value="banana">
<script>
    var checkboxes = document.getElementsByClassName("checkbox");
    var checkedVal = [];
    for(var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
            checkedVal.push(checkboxes[i].value);
        }
    }
    console.log(checkedVal);
</script>

위 코드에서는 먼저 여러 다중 선택 상자 요소를 정의하고 getElementsByClassName 메서드를 통해 모든 다중 선택 상자 요소를 가져옵니다. 그런 다음 선택한 옵션 값을 순회하여 각 옵션의 상태를 얻고 배열에 저장합니다.

3. 라디오 버튼의 입력 값 얻기

라디오 버튼의 입력 값을 얻는 것은 다중 선택 상자와 유사하며 옵션 상태를 얻기 위해 라디오 버튼 요소를 탐색해야 합니다. 그러나 차이점은 라디오 버튼은 한 번에 하나의 옵션만 선택할 수 있기 때문에 일반적으로 name 속성을 사용하여 라디오 버튼 요소를 그룹화할 수 있으므로 모든 옵션을 더 쉽게 탐색할 수 있다는 것입니다.

샘플 코드:

<input type="radio" name="fruit" value="apple">
<input type="radio" name="fruit" value="orange">
<input type="radio" name="fruit" value="banana">
<script>
    var radios = document.getElementsByName("fruit");
    var checkedVal = null;
    for(var i = 0; i < radios.length; i++){
        if(radios[i].checked){
            checkedVal = radios[i].value;
            break;
        }
    }
    console.log(checkedVal);
</script>

위 코드에서는 먼저 여러 라디오 버튼 요소를 정의하고 이름 속성으로 그룹화합니다. 그런 다음 순회를 통해 현재 선택 상태를 가져옵니다. 옵션이 선택되면 해당 값을 selectedVal 변수에 저장합니다.

요약:

위는 폼 요소의 입력 값을 얻는 방법입니다. 텍스트 상자, 다중 선택 상자, 라디오 버튼을 얻는 방법은 다르지만 모두 요소를 순회하여 입력 값을 얻습니다. 그런 다음 특정 속성을 통해 입력 값을 얻습니다. 어떤 방법을 사용하든, 양식 요소의 입력 값을 얻는 것은 사용자 입력 데이터를 처리하는 데 필요한 단계입니다.

위 내용은 자바스크립트에서 입력값을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!