append로 만든 input의 값들 합 구하기 채택완료
고수님들, 안녕하세요! 제가 지금 추가버튼을 누르면 빨간박스안에 input이 생기도록 구현까지는 했습니다!
구현은 append()를 사용해서 구현을 했구요. 그래서 append로 생성된 input에 클래스를 주어서 그 클래스의 합들을 구해 합계에 입력하려고 합니다.
그런데 생각한 것처럼 구현이 잘 되지 않아 질문글을 남깁니다!
귀한 시간이지만 조금만 살펴서 많은 조언 부탁드립니다!!ㅠㅠ
+추가로 궁금한 것은 제가 지금 추가버튼의 value값으로 버튼값을 가져와 사용하고 있는데 혹시 다른 방법이 없을까 궁금합니다,,,, 버튼의 이름을 저렇게 두고 싶지가 않아서요ㅠㅠ
일단 현재까지 구현한 화면입니다.
번호
날짜
개수
무게
총무게
나가는 양
총나가는 양
추가버튼
); // 최소
var char_max = parseInt(); // 최대
check_byte("wr_content", "char_count");
$(function() {
$("#wr_content").on("keyup", function() {
check_byte("wr_content", "char_count");
});
});
감사합니다!
답변 2개
1) 합계
: 다음과 같이 수정해야 됩니다. id는 여러 엘리먼트가 중복으로 사용될 수 없습니다. (class 는 가능) https://penguingoon.tistory.com/116
$("#addWordForm").append("");
->
$("#addWordForm").append("");
$('#misuClass').on('keydown', function(){
$('#misuSum').val(Number($('#misuClass').val()))
});
->
$('.misuClass').on('keydown', function(){
var sum = 0;
$('.misuClass').each(function() {
sum = sum + Number($(this).val());
});
$('#misuSum').val(sum);
});
2) data-xx 속성을 이용하는 방법이 있습니다. https://www.nextree.co.kr/p10155/
->
function addWord(e){
let tankName = document.getElementById(e.value);
let tankIdRandom = tankName.getAttribute('value');
console.log(e.value);
console.log(tankIdRandom);
~
}
->
$('.addButton').on('click', function() {
let tankIdRandom = $(this).data('num');
~
}); 답변에 대한 댓글 4개
[code]
$(document).on('keydown', '.misuClass', function(){
var sum = 0;
$('.misuClass').each(function() {
sum = sum + Number($(this).val());
});
$('#misuSum').val(sum);
});
[/code]
그런데 한가지 더 묻고 싶은게
제가 알려주신 것을 참고해서
[code]
<div><input type="button" onclick="addButton(this)" data-num="tankId<?php echo $i ?>" value="추가"></div>
[/code]
[code]
function addButton(e){
let tankName = $(e).data('num');
console.log(tankName);
let tankIdRandom = document.getElementById(tankName).getAttribute('value');
console.log(tankIdRandom);
$("#addWordForm").append("<div>"+tankIdRandom+"</div>");
$("#addWordForm").append("<div><input class='misuClass1' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass2' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass3' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass4' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass5' type='text'></div>");
}
[/code]
로 변경하여 하고 있는데 tankIdRandom을 딱 한번만 추가하고 다음에 중복으로 추가하는 것을 막으려고 하는데 어떻게 하면 좋을까요?
이미 입력된 값들은 배열로 담아서 배열에 있는 것들과 비교하는 것이 좋을까요?
var cnt = 0;
function addButton(e){
let tankName = $(e).data('num');
console.log(tankName);
let tankIdRandom = document.getElementById(tankName).getAttribute('value');
console.log(tankIdRandom);
if (cnt == 0)
$("#addWordForm").append("<div>"+tankIdRandom+"</div>");
$("#addWordForm").append("<div><input class='misuClass1' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass2' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass3' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass4' type='text'></div>");
$("#addWordForm").append("<div><input class='misuClass5' type='text'></div>");
cnt++;
}
[/code]
댓글을 작성하려면 로그인이 필요합니다.
일단 addWord() 함수에서 DOM을 append 할때
id='misuClass' 아이디가 겹치고요 (추가할 때마다 여러개)
쿼리 for() 문에서 id="addButton" 가 겹치네요 (여러개)
name="wr_15" id="wr_15" 도 겹치고요
html 먼저 정리하셔야 할 듯 싶네요
misuClass 에 keydown 했을 때
여러개의 misuClass 의 value 를 더해야하므로
each() 돌려야하지 않을까 싶고요
var sum = 0;
$.each($('.misuClass'), function() {
sum += parseInt($(this).val());
});
이런식으로?
답변에 대한 댓글 2개
[code]
$('.misuClass').on('change', function(){
var sum = 0;
$('.misuClass').each(function() {
sum = sum + Number($(this).val());
});
$('#misuSum').val(sum);
});
[/code]
변화했을 때 동작하도록 함수를 만들었는데
append함수에는 class가 적용이 되지 않는건지 잘 모르겠는데 잘 동작하지 않습니다ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
해보면서 문제가 append함수때문일 수도 있다고 생각했습니다!! 다른 곳에서 id나 class를 지정해서 값을 더하려고 하면 잘 되는데 append로 했을때만 잘 작동하지 않아 질문드립니다ㅠㅠ