자바 스크립트 양식 업데이트 Onclick

Question

사용자가 숫자를 제출할 수있게 해주는 html 양식을 만들고 있습니다. 사용자가 숫자를 입력하는 대신, 텍스트 입력에서 숫자를 늘리거나 줄이려면 버튼을 클릭하기 만하면됩니다. 다음 코드 중요한 부분은 내가 원하는이가 않습니다 정확히 :

자바 스크립트 :

<script type="text/javascript"> 
    function increase (form) { 
     var val = form.h1.value; 
     val++; 
     form.h1.value = val; 
     } 

    function decrease (form) { 
     var val = form.h1.value; 
     val--; 
     form.h1.value = val; 
     } 
</script> 

HTML

<input type="textbox" name="h1" size="3"> 
<input type="button" onclick="increase(this.form)" value="+"> 
<input type="button" onclick="decrease(this.form)" value="-"> 

내 문제는 내가 사용할 수 있도록하려는 것입니다 다른 텍스트 상자 (예 : h2, h3 등)에 대한 '증가'및 '감소'기능 두 번째 매개 변수 인 id를 추가하고이를 사용하여 업데이트 할 폼 요소를 결정하여 코드를 변경하려고했습니다. 그래도 작동하지 않습니다. 내가 잘못한 곳을 알아내는 데 도움이된다면 고맙겠습니다!

자바 스크립트

<script type="text/javascript"> 
    function increase (form, id) { 
     var val = form.id.value; 
     val++; 
     form.id.value = val; 
     } 

    function decrease (form, id) { 
     var val = form.id.value; 
     val--; 
     form.id.value = val; 
     } 
</script> 

HTML

<input type="textbox" name="h1" size="3"> 
<input type="button" onclick="increase(this.form, h1)" value="+"> 
<input type="button" onclick="decrease(this.form, h1)" value="-"> 

Answer 1

시도

function increase (form, id) { 
    var val = form[id].value; 
    val++; 
    form[id].value = val; 
} 

및

<input type="button" onclick="increase(this.form, 'h1')" value="+"> 
<input type="button" onclick="decrease(this.form, 'h1')" value="-"> 

양식은 필드를 이름으로 지정할 수있는 사전 역할을합니다. 대괄호를 사용하여이 작업을 수행합니다. 필드의 이름은 문자열이기 때문에 h1 대신 'h1'을 전달해야합니다. 이러한 변경을

Answer 2

시도 : 양식에서

대신 변수의 ID의 문자열을 전달합니다.

<input type="textbox" name="h1" size="3"> 
<input type="button" onclick="increase(this.form, 'h1')" value="+"> 
<input type="button" onclick="decrease(this.form, 'h1')" value="-"> 

JavaScript에서 입력란을 참조하는 방식을 변경하십시오.

<script type="text/javascript"> 
    function increase (form, id) { 
     var val = form[id].value; 
     val++; 
     form.id.value = val; 
    } 

    function decrease (form, id) { 
     var val = form[id].value; 
     val--; 
     form.id.value = val; 
    } 
</script> 

Answer 3

두 개의 매개 변수를 전달하는 대신 값을 변경해야하는 textbox 요소를 직접 전달할 수 있습니다. 아래 변경을 시도하십시오.

<input type="textbox" name="h1" size="3"> 
<input type="button" onclick="increase(document.h1)" value="+"> 
<input type="button" onclick="decrease(document.h1)" value="-"> 

그리고 자바 스크립트 기능은 아래와 같습니다.

<script type="text/javascript"> 
function increase (element) { 
    element.value = element.value++; 
} 

function decrease (element) { 
    element.value = element.value--; 
} 
</script>