일반 자바 스크립트를 사용하여 입력 필드 값의 합계를 얻기 위해 keyup 함수를 가져 오는 문제

개인 프로젝트에서 작업 중이며 해결할 수 없었던 문제가 발생했습니다.일반 자바 스크립트를 사용하여 입력 필드 값의 합계를 얻기 위해 keyup 함수를 가져 오는 문제

function addNewRow(){ 
    var tableEl = document.getElementById("tableData"); 
    var newLine = '<tr class="newEntry">'; 
    var classArray = ["classA", "classB", "classC", "classD"]; 

    for (var i = 0; i < classArray.length; i++){ 
    newLine += '<td><input class="' + classArray[i] + '"></td>'; 
    } 
    newLine += '</tr>'; 
    tableEl.insertAdjacentHTML("beforeend", newLine); 
} 

document.getElementById("addRow").addEventListener("click", addNewRow, false); 
//the element with id="addRow" is a button

나는 이익을 위해 위의 함수의 코드를 단순화했습니다 : 여기

은 버튼을 클릭하면 ("tableData"의 ID로) 테이블에 새 테이블 행을 생성하는 기능입니다 문제의 초점이 아니기 때문에 가독성을 높일 수 있습니다. 버튼을 클릭하면 새 행이 성공적으로 추가됩니다.

문제가있는 부분에는 각 행의 각 클래스의 합계를 사용하여 div에 표시하는 또 다른 기능이 있습니다.

목표는 일치하는 클래스 이름으로 모든 입력 필드 값의 합계를 얻는 것입니다. 예를 들어, addNewRow 함수를 사용하여 여섯 개의 행을 얻는다 고 가정 해 봅시다. 그런 다음 모든 입력 필드 값의 합계를 클래스 이름 "classA"로 표시하는 div를 원합니다. 해당 div의 숫자는 값을 입력하거나 클래스 이름이 "ClassA"인 입력 필드의 기존 값을 변경하면 업데이트되는 6 개의 값의 합계가되어야합니다. 솔루션을 웹을 수색하고 하나를 찾기 위해 실패한 후, 난 그냥 버튼에 이벤트 리스너를 추가,

document.input.addEventListener("keyup", sumValues("genericDivId", "classA"), false); 

document.getElementsByClassName("classA").onkeyup = function(){sumValues("genericDivId", "classA");}

불행하게도 : 여기

function sumValues(divId, inputClass){ 
    var sumVal = document.getElementsByClassName(inputClass); 
    var addedUp = 0; 
    for (var j = 0; j < sumVal.length; j++){ 
    addedUp += Number(sumVal[j].value); 
    } 
    document.getElementById(divId).innerHTML = addedUp; 
}

는 (여러 점 만점) 부부가 시도 실패하다 클릭하면 값의 합계를 표시하도록 div가 업데이트됩니다. 또한 인수를 받아들이 기보다는 배열에서 값을 취하도록 sumValues 함수를 수정해야했습니다.

내 질문은 : 순수 값 Javascript (vanilla JS)를 사용하여 새 값을 입력하거나 기존 값을 변경하면 합계 값이 업데이트되도록 코드를 어떻게 수정할 수 있습니까?

출처

2016-07-29 doc_gunthrop

이 DOM 객체의 배열을 반환하는 경우가 매우 가까우므로 해당 배열을 반복하여 각 요소에 대해 onkeyup 함수를 설정해야합니다.

var classA = document.getElementsByClassName('classA'); // this is an array 
classA.forEach(function(elem){ // loop through the array 
    elem.onkeyup = function(){ // elem is a single element 
    sumValues("genericDivId", "classA"); 
    } 
}

는 희망이

출처

2016-07-29 16:09:56

은 아마 아래의 예는 상황과 동일하지 않은 문제 해결,하지만 당신은 쉽게 논리를 얻을 수 있습니다. 어쨌든, 더 많은 안내를 요청하는 것을 망설이지 마십시오.

document.getElementById("row_adder").addEventListener("click", function() { 
 
\t \t var t = document.getElementById("my_table"); 
 
\t \t var r = t.insertRow(-1); // adds rows to bottom - change it to 0 for top 
 
\t \t var c = r.insertCell(0); 
 
\t \t c.innerHTML = "<input class='not_important_with_that_way' type='number' value='0' onchange='calculate_sum()'></input>"; \t \t 
 
\t }); 
 

 
function calculate_sum() { 
 
\t var sum = ([].slice.call(document.querySelectorAll("[type=number]"))).map(e=>parseFloat(e.value)).reduce((a, b) => a+b); 
 
\t document.getElementById("sum").innerHTML = sum; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
<div> 
 
<p> 
 
    <strong>Sum</strong>:<span id="sum">0</span> 
 
</p> \t 
 
</div> 
 
<button id="row_adder"> 
 
\t Click me 
 
</button> 
 
<table id="my_table"> 
 
\t 
 
</table> 
 

 

 

 
</body> 
 
</html>

출처

2016-07-29 18:02:53 marmeladze

일반 자바 스크립트를 사용하여 입력 필드 값의 합계를 얻기 위해 keyup 함수를 가져 오는 문제

답변

관련 문제