SIR
목록으로
이전글 다음글

자바스크립트 input 자동합계 change keyup 동시사용이 가능한가요? 채택완료

바바케스터
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 2,171
답변 2
목록

개노미님의 도움으로 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

늦은시간까지 어떻게든 해결해보려했지만 안되네요... 그럼 부탁드립니다. (__);

Copy 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>

$(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)) ;
    });

});
</script>


<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>
#그누보드5

답변 2개

채택된 답변
+20 포인트
Copy 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<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개

잘되네요... 답변 정말 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

아래와 같이 변경해 보세요..

테스트는 해보지 않았지만 아마 해결 될 것입니다.

Copy 
$('.sum_11').on('keyup keypress',function(){
			.........
		});
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변감사드립니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고