곱하기 더하기? 질문좀 드리겠습니다.
본문
안녕하세요 질문좀 드리겠습니다.
사진과 같이 text 를 만들어놨는데요
처번째에는 수량 2 개일시
두번째에서 금액을 1,000원 입력시
세번째에서 2천원이 나오게끔 하고싶은데 ㅠㅠ
구글링해도 초보라 잘모르겠고 관련 소스가 있을까요 ㅠㅠ?
부탁드립니다.
답변 1
간단한 예제 첨부합니다.
<input type="text" id="a" onkeyup="calc()">
<input type="text" id="b" onkeyup="calc()">
<input type="text" id="c" readonly tabindex="-1">
<script>
function calc() {
var a = parseInt(document.getElementById('a').value) | 0;
var b = parseInt(document.getElementById('b').value) | 0;
// ,가 들어가도 계산되게 하려면 아래처럼 숫자 외의 문자[열] 제거하면 됩니다.
// var a = parseInt(document.getElementById('a').value.replace(/[^\d]+/g, '')) | 0;
document.getElementById('c').value = a*b;
}
</script>
안녕하세요 우선 답변 주셔서 감사합니다
그런데 변경하다 보니 안되어서 죄송하지만 한번만 더여쭤보겠습니다
아래와같이 이용할려는데 합산 금액이 안나오는데 어떤게 문제일까요?
<td class="td_num">
<label for="ct_qty_<?php echo $chk_cnt; ?>" class="sound_only" onkeyup="calc()" value="<?php echo $opt['ct_qty']; ?>"> 수량</label>
<?php echo $opt['ct_qty']; ?>
</td>
<td class="td_num_right "><input type="text" name="opt_price" value="<?php echo $opt_price ?>" id="opt_price" onkeyup="calc()"> </td>
<td class="td_num_right"><input type="text" id="stotal" readonly tabindex="-1"><?php echo number_format($ct_price['stotal']); ?></td>
<script>
function calc() {
var ct_option = parseInt(document.getElementById('ct_option').value) | 0;
var opt_price = parseInt(document.getElementById('opt_price').value) | 0;
// ,가 들어가도 계산되게 하려면 아래처럼 숫자 외의 문자[열] 제거하면 됩니다.
// var ct_option = parseInt(document.getElementById('ct_option').value.replace(/[^\d]+/g, '')) | 0;
document.getElementById('stotal').value = ct_option*opt_price;
}
</script>
이렇게 적용했는데 왜안되는걸까요 ㅠㅠ?
id는 유일해야 합니다.
반복되는 구간의 코드라면, 처리를 달리 해줘야 합니다.
수량 구하는 코드가 달라져야 합니다.
- 대상을 편하게 선택하기 위해 class 지정
- 편의상 jQuery 사용
- 댓글의 구조 기반
- 가격, 계산값에 , 붙이는 것은 생략
<!-- 반복 -->
<tr>
<td class="td_num">
<label for="ct_qty_<?php echo $chk_cnt; ?>" class="sound_only" value="<?php echo $opt['ct_qty']; ?>"> 수량</label>
<span class="quantity"><?php echo $opt['ct_qty']; ?></span>
</td>
<td class="td_num_right "><input type="text" name="opt_price" class="price" value="<?php echo $opt_price ?>"> </td>
<td class="td_num_right"><span class="calc_price"><?php echo number_format($ct_price['stotal']); ?></span></td>
</tr>
<!-- /반복 -->
<script>
// 반복되는 부분 말고, 한번만 출력되면 OKAY
$('.price').on('keyup', function() {
var quantity = parseInt($(this).closest('tr').find('.quantity').text().replace(/[^\d]+/g, '')) | 0;
var price = parseInt($(this).val().replace(/[^\d]+/g, '')) | 0;
$(this).closest('tr').find('.calc_price').text(quantity*price);
});
</script>
