변수 값을 설정했지만 JS가 undefined를 반환합니다.

mysql에서 데이터를 가져오고 확인란으로 표시하는 코드가 있습니다. 확인란을 클릭하면 합계가 표시됩니다.변수 값을 설정했지만 JS가 undefined를 반환합니다.

<td><input type="checkbox" name=check[] value="<?php echo $row['amount'];?>" data-weight="<?php echo $row['amount'];?>"> </td> 
<div>Total: <span id="total">0</span></div>

와 JS는

<script> 
    (function() { 
      var totalEl = document.getElementById('total'), 
       total = 0, 
       checkboxes = document.form1['check[]'], 
       handleClick = function() { 
        total += parseInt(this['data-weight'], 10) * (this.checked ? 1 : -1); 
        totalEl.innerHTML = total; 
        alert (this['data-weight']); 
       }, 
       i, l 
      ; 
      for (i = 0, l = checkboxes.length; i < l; ++i) { 
       checkboxes[i].onclick = handleClick; 
      } 
     }()); 
    </script>

입니다하지만 항상 내가 NaN가와 (나는 목적을 디버깅하기 위해 추가 한) 경고에 정의되지 않은 같은 결과 총을 얻을. 내가 잘못하고있는 것은 무엇입니까 ??

출처

2014-09-16 Arvind

@MikeChristensen : 아니요, 'this'는 분명히 ** 아닙니다 **는 함수 자체를 가리 킵니다. (당신이 * 명시 적으로하지 않으면, 매우 드뭅니다.) 이벤트 처리기로 사용되므로 'this'는 DOM 요소를 나타냅니다. '어떻게'작동하는지에 대해서는 http://www.quirksmode.org/js/this.html –

@FelixKling에 설명되어 있습니다. –

내가 잘못하고있는 것은 무엇입니까?

data-* 특성에 올바르게 액세스하지 않았습니다 (this['data-weight']). DOM 요소에는 특정 속성 집합이 있으며 모든 HTML 특성이 DOM 속성 1 : 1에 매핑되는 것은 아닙니다. data-* 속성은 확실히 그렇지 않습니다.

당신은 속성의 값을 얻기 위해 getAttribute를 사용할 수 있습니다

this.dataSet.weight

DEMO

이

총은 NaN입니다 :

this.getAttribute('data-weight')

은 또한 당신이 dataSet 속성을 사용할 수 있습니다 0123이기 때문에은 NaN을 반환하므로 더 이상의 계산은 NaN이됩니다.

출처

2014-09-16 18:02:33

변수 값을 설정했지만 JS가 undefined를 반환합니다.

답변

관련 문제