자바스크립트 input 자동합계 change keyup 동시사용이 가능한가요? 채택완료
바케스터
2년 전
조회 1,905
개노미님의 도움으로 input 자동합계식을 사용하고있는데요
입력이벤트에서 change로 하니 input창 입력 후 다른곳으로 이동하지 않으면 합계가 바뀌지 않는 문제가 발생하였습니다.
물론 keyup으로 해보려했으나 이렇게되면 input 값의 기본 number를 쓰고있어 마우스를 클릭하여 값을바꾸면 이 또한 자동계산되지 않네요
구글링으로 찾아보니
const searchInput = document.querySelector(".search");
const suggestions = document.querySelector(".suggestions");
searchInput.addEventListener("change", displayMatches);
searchInput.addEventListener("keyup", displayMatches);
위와같이 하면된다는데 어디에 적용해야하는지 모르겠습니다.
출처 : https://devlibrary00108.tistory.com/655
늦은시간까지 어떻게든 해결해보려했지만 안되네요... 그럼 부탁드립니다. (__);
</p>
<p><script src="<a href="https://code.jquery.com/jquery-1.12.4.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.12.4.min.js"></script></a>
<script></p>
<p>$(document).ready(function() {
$('.sum_11').change(function(evt) {
var sum11 = 0;
$('.sum_11').each(function(){
sum11 += +$(this).val() ;
});
$('input[name=wr_27]').val(Math.round(sum11)) ;
});</p>
<p>});
</script></p>
<p>
<table border=0 class="table table-bordered text-center">
<thead>
<tr class="table-secondary">
<th scope="col">항목</th>
<th scope="col">1항-1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1번</td>
<td><input type="number" name="wr_51" id="wr_51" class="sum_11" min="0" max="5" tabindex="51"></td>
</tr>
<tr>
<td>2번</td>
<td><input type="number" name="wr_52" id="wr_52" class="sum_11" min="0" max="5" tabindex="52"></td>
</tr>
<tr>
<td>3번</td>
<td><input type="number" name="wr_53" id="wr_53" class="sum_11" min="0" max="5" tabindex="53"></td>
</tr>
<tr>
<td>4번</td>
<td><input type="number" name="wr_54" id="wr_54" class="sum_11" min="0" max="5" tabindex="54"></td>
</tr>
<tr>
<td>5번</td>
<td><input type="number" name="wr_55" id="wr_55" class="sum_11" min="0" max="5" tabindex="55"></td>
</tr>
<tr>
<td>합계</td>
<td><input type="number" name="wr_27" id="wr_27" class="sum_27" readonly></td>
</tr>
</tbody>
</table></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
</p>
<p><script src="<a href="https://code.jquery.com/jquery-1.12.4.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-1.12.4.min.js"></script></a>
<script>
$(document).ready(function() {
$('.sum_11').on('change keyup', function(evt) { // 이 부분이 수정됨
var sum11 = 0;
$('.sum_11').each(function() {
sum11 += +$(this).val();
});
$('input[name=wr_27]').val(Math.round(sum11));
});
});
</script>
이렇게 한번 해보세요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
바케스터
2년 전
잘되네요... 답변 정말 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인