JavaScript에서 입력 텍스트 값을 얻는 방법

Program Tip

JavaScript에서 입력 텍스트 값을 얻는 방법

programtip 2020. 12. 4. 20:22

JavaScript에서 입력 텍스트 값을 얻는 방법

JavaScript에서 입력 텍스트 값을 얻으려면 어떻게해야합니까?

<script language="javascript" type="text/javascript">
    lol = document.getElementById('lolz').value;
    function kk(){
    alert(lol);
    }
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
</body>

위와 같이 lol = document.getElementById('lolz').value;함수 외부에 넣으면 kk()작동하지 않지만 안에 넣으면 작동합니다. 아무도 이유를 말해 줄 수 있습니까?

함수가 lol외부에서 정의 되었을 때 작동하지 않는 이유 는 JavaScript가 처음 실행될 때 DOM 이 아직로드되지 않았기 때문 입니다. 그 때문에 getElementById반환됩니다 null( MDN 참조 ).

이미 가장 확실한 해결책을 찾았습니다 getElementById. 함수 내부 를 호출 하면 DOM이로드되고 함수가 호출 될 때 준비되며 예상대로 요소를 찾을 수 있습니다.

몇 가지 다른 솔루션이 있습니다. 하나는 다음과 같이 전체 문서가로드 될 때까지 기다리는 것입니다.

<script type="text/javascript">
    var lolz;
    function onload() { 
        lolz = document.getElementById('lolz');
    }
    function kk(){
        alert(lolz.value);
    }
</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" onclick="kk();"/>
</body>

태그 의 onload속성에 유의하십시오 <body>. (참고 : 태그 의 language속성 <script>은 더 이상 사용되지 않습니다. 사용하지 마십시오.)

그러나 문제가 있습니다 onload: 모든 것 (이미지 등 포함) 이로드 될 때까지 기다립니다 .

다른 옵션은 DOM이 준비 될 때까지 기다리는 것입니다 (일반적으로 onload. 이것은 "일반"JavaScript로 수행 할 수 있지만 jQuery 와 같은 DOM 라이브러리를 사용하는 것이 훨씬 쉽습니다 .

예를 들면 :

<script type="text/javascript">
    $(document).ready(function() {
        var lolz = $('#lolz');
        var kk = $('#kk');
        kk.click(function() {
            alert(lolz.val());
        });
    });
</script>

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" id="kk" />
</body>

jQuery의 .ready () 는 함수를 인자로받습니다. 이 함수는 DOM이 준비되는 즉시 실행됩니다. 이 두 번째 예제는 HTML에서 인라인을 수행하는 대신 .click () 을 사용 하여 kk의 onclick핸들러 를 바인딩 합니다.

이런 식으로 전역 변수를 사용하지 마십시오. 이것이 효과가 있더라도 나쁜 프로그래밍 스타일입니다. 이런 방식으로 중요한 데이터를 실수로 덮어 쓸 수 있습니다. 대신 다음을 수행하십시오.

<script type="text/javascript">
   function kk(){
       var lol = document.getElementById('lolz').value;
       alert(lol);
   }
</script>

var lolkk 함수 외부에 설정 해야한다고 주장한다면 이 솔루션을 제안합니다.

<body>
    <input type="text" name="enter" class="enter" value="" id="lolz"/>
    <input type="button" value="click" OnClick="kk()"/>
    <script type="text/javascript">
       var lol = document.getElementById('lolz');
       function kk() {
           alert(lol.value);
       }
    </script>
</body>

요소는 이미 구문 분석되고 생성 된 경우 에만 쿼리 할 수 있으므로 요소는 참조 하는 script요소를 따라야합니다 .inputgetElementById

두 예제 모두 jsfiddler에서 테스트되고 작동합니다.

편집 : language="javascript"더 이상 사용되지 않기 때문에 속성을 제거 했습니다. W3 HTML4 사양, SCRIPT 요소를 참조하십시오 .

언어 = cdata [ CI ]

더 이상 사용되지 않습니다 . 이 속성은이 요소 컨텐츠의 스크립팅 언어를 지정합니다. 그 값은 언어에 대한 식별자이지만 이러한 식별자는 표준이 아니기 때문에이 속성은 유형 대신 사용되지 않습니다 .

과

더 이상 사용되지 않는 요소 또는 속성은 최신 구성에 의해 오래된 요소입니다. […] 사용되지 않는 요소는 향후 HTML 버전에서 더 이상 사용되지 않을 수 있습니다. […]이 사양에는 더 이상 사용되지 않는 요소를 사용하지 않는 방법을 보여주는 예가 포함되어 있습니다. […]

이 줄은 다음과 같습니다.

lol = document.getElementById('lolz').value;

<input>마크 업 의 실제 요소 앞에 있습니다.

<input type="text" name="enter" class="enter" value="" id="lolz"/>

코드는 한 줄씩 구문 분석 lol = ...되고 브라우저가 id 입력의 존재를 인식하기 전에 줄이 평가 lolz됩니다. 따라서, document.getElementById('lolz')반환 null하고, document.getElementById('lolz').value오류가 발생합니다.

해당 줄을 함수 내부로 이동하면 작동합니다. 이렇게하면 해당 행은 함수가 호출 될 때만 실행됩니다. 그리고 var다른 사람들이 제안한대로 사용 하여 전역 변수로 만들지 않도록합니다.

function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}

스크립트를 페이지 끝으로 이동할 수도 있습니다. 모든 스크립트 블록을 HTML 끝으로 이동하는 <body>것이 오늘날 이러한 종류의 참조 문제를 피하기위한 표준 관행입니다. 또한로드 및 구문 분석에 오랜 시간이 걸리는 스크립트는 HTML이 (대부분) 표시된 후에 처리되기 때문에 페이지로드 속도를 높이는 경향이 있습니다.

편집하다:

Move your javascript to end of the page to make sure DOM (html elements) is loaded before accessing them (javascript to end for fast loading).
Declare your variables always like in example using var textInputVal = document.getElementById('textInputId').value;
Use descriptive names for inputs and elements (makes easier to understand your own code and when someone other is looking it).
To see more about getElementById, see: http://www.tizag.com/javascriptT/javascript-getelementbyid.php
Using library such as jQuery makes using javascript hundred times easier, to learn more: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

<script type="text/javascript">
function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}


</script>

<body onload="onload();">
    <input type="text" name="enter" class="enter" id="lolz" value=""/>
    <input type="button" value="click" onclick="kk();"/>
</body>

use this

How to get an input text value in JavaScript

    var textbox;
    function onload() { 
        //Get value.
        textbox = document.getElementById('textbox');
    }

    function showMessage() { 
        //Show message in alert()
        alert("The message is: " + textbox.value);
    }

<body onload="onload();">
<div>
<input type="text" name="enter" class="enter" placeholder="Write something here!" value="It´s a wonderful day!" id="textbox"/>
<input type="button" value="Show this message!" onClick="showMessage()" />
</div>

as your lol is local variable now, its good practice to use var keyword for declaring any variables.

this may work for you :

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}

All the above solutions are useful. And they used the line lol = document.getElementById('lolz').value; inside the function function kk().

What I suggest is, you may call that variable from another function fun_inside()

function fun_inside()
{    
lol = document.getElementById('lolz').value;
}
function kk(){
fun_inside();
alert(lol);
}

It can be useful when you built complex projects.

<script>
function subadd(){
subadd= parseFloat(document.forms[0][0].value) + parseFloat(document.forms[0][1].value) 
window.alert(subadd)  
}
</script>

<body>
<form>
<input type="text" >+
<input type="text" >
<input type="button" value="add" onclick="subadd()">
</form>
</body>

<input type="password"id="har">
<input type="submit"value="get password"onclick="har()">
<script>
    function har() {
        var txt_val;
        txt_val = document.getElementById("har").value;
        alert(txt_val);
    }
</script>

document.getElementById('id').value

The reason that this doesn't work is because the variable doesn't change with the textbox. When it initially runs the code it gets the value of the textbox, but afterwards it isn't ever called again. However, when you define the variable in the function, every time that you call the function the variable updates. Then it alerts the variable which is now equal to the textbox's input.

참고URL : https://stackoverflow.com/questions/11810874/how-to-get-an-input-text-value-in-javascript

'Program Tip' 카테고리의 다른 글

한 클래스가 두 클래스를 확장 할 수 있습니까? (0)	2020.12.04
Twitter 부트 스트랩 탭 및 자바 스크립트 이벤트 (0)	2020.12.04
servletcontext.getRealPath ( "/")는 무엇을 의미하며 언제 사용해야합니까? (0)	2020.12.04
Lisp의 read-eval-print 루프는 Python과 어떻게 다릅니 까? (0)	2020.12.04
여러 열의 값을 사용하여 Pandas 데이터 프레임을 정렬하는 방법은 무엇입니까? (0)	2020.12.04

현재글JavaScript에서 입력 텍스트 값을 얻는 방법

programtip

JavaScript에서 입력 텍스트 값을 얻는 방법

JavaScript에서 입력 텍스트 값을 얻는 방법

'Program Tip' 카테고리의 다른 글

'Program Tip'의 다른글

티스토리툴바

JavaScript에서 입력 텍스트 값을 얻는 방법

JavaScript에서 입력 텍스트 값을 얻는 방법

'Program Tip' 카테고리의 다른 글

'Program Tip'의 다른글

관련글

티스토리툴바