jQuery .val() program

Question

저는 jQuery와 javascript의 초보자입니다. 그러니 제발, 나와 함께 감내주십시오. 이 프로그램에서는 ID가 a1, aa1 및 baa1 인 3 개의 텍스트 상자가 있습니다.

a1은 순중량입니다. aa1은 요금입니다. baa1은 #a1 및 #aa1의 제품을 가진 읽기 전용 텍스트 상자입니다.

내 피들을보세요 here. 제품을 계산하는 프로그램을 작성했습니다. 그러나 어떤 이유로 인해 작동하지 않습니다.

function amtcal(id) 
{  
var ntwt=$("#a1").val(); 
var rval=$("#aa1").val(); 
var product=rval*ntwt; 
$("#baa1").val(product); 
}  

제발 뭐가 잘못 됐는지 말해줘.

Answer 1

가 여기에 몇 가지 문제가 있지만, 코드와는 아무 상관이없는 일을 시작 할 수 있습니다. JSFiddle에서 당신은 자바 스크립트를 배치 할 위치를 선택 얻을 - 기본 그래서 원래 jsfiddle의 출력에서 ​​생산되는 자바 스크립트의 모습 onload입니다 : 함수를 의미

$(window).load(function(){ 
function amtcal(id) 
{  
var ntwt=$("#a1").val(); 
var rval=$("#aa1").val(); 
var product=rval*ntwt; 
$("#baa1").val(product); 
} 
}); 

그 윈도우로드 함수 내에서 범위가되며, 그래서 DOM으로부터 완전히 접근 할 수 없다. 따라서 오류 :

ReferenceError: amtcal is not defined

왼쪽의 "줄 바꿈 없음"을 선택하면 문제를 해결할 수 있습니다.

실제 코드는 무엇이 문제입니까? 당신이 숫자로 변환해야하므로,

var ntwt=$("#a1").val(); 
var rval=$("#aa1").val(); 

그게 전부 좋아,하지만 텍스트 상자는 문자열을 반환하고, 문자열을 곱 할 수 없습니다 문제를 발견하기 쉬운 당신이 jQuery를 사용하여 두 개의 편집 가능한 텍스트 상자의 내용을 읽고 있다는 것입니다 . 정수를 원한다고 가정합니다 :

var ntwt= parseInt($("#a1").val(),10); 
var rval= parseInt($("#aa1").val(),10); 

이 시점에서 두 번째 텍스트 상자를 먼저 편집하는 한이 기능이 작동합니다.당신은 두 텍스트 상자에서 동일한 기능을 호출해야합니다 :이 시점에서

<input placeholder="Net Wt" id="a1" onchange="amtcal(this.id)"> 
<input id="aa1" placeholder="Rate" style="width:50px;" onchange="amtcal(this.id)"> 

모든 작품 : 그러나 http://jsfiddle.net/8JA4s/

을, 당신이 jQuery를 바닐라 자바 ​​스크립트/DOM을 혼합하고 있습니다. 종종 혼란을 막기 위해 하나 또는 다른 것을 고수하는 것이 더 쉽습니다.

이 작업을 수행하는 일반적인 방법은이 방법을 수행 할 때, 물론,

$('#a1, #aa1').on('change',function(){ 
    var ntwt=parseInt($("#a1").val(),10); 
    var rval=parseInt($("#aa1").val(),10); 
    var product=rval*ntwt; 
    $("#baa1").val(product); 
}); 

jQuery를 .on

당신을 사용하여 이벤트 핸들러를 부착 DOM에 이벤트 핸들러를 제거하는 것입니다. 이 은이어야합니다. 작동하려면 jsfiddle에 onLoad을 입력해야합니다. http://jsfiddle.net/8JA4s/2/

Answer 2

콘솔에서 보면 amtcal이 정의되지 않았 음을 알 수 있습니다. 이는 onchange="" 속성 대신 이벤트 처리기를 연결하는 HTML 사용 자바 스크립트 이후 처리되기 때문입니다.

HTML :

<input placeholder="Net Wt" id="a1"> 
<input id="aa1" placeholder="Rate" style="width:50px;"> 
<input id="baa1" readonly> 

JS : 그것은 바인딩 대신 인라인 JS를 사용

function amtcal() 
{  
    var ntwt=$("#a1").val(); 
    var rval=$("#aa1").val(); 
    var product=rval*ntwt; 
    $("#baa1").val(product); 
} 

$("#a1,#aa1").change(amtcal);//easier to use if both inputs trigger the update 

Updated JSFiddle

Answer 3

:

시어의 제안에 따라 경찰, 변화 대신 onKeyUp에 사용 .

$("#a1, #aa1").on('keyup', function(){ 
    amtcal($(this).prop('id')); 
}); 

Updated fiddle