こんにちはjavascript初心者です。
現在レコードの集計値をレコードの一番上に表示をしてます。一覧のスペースには「2021-10-10(決算日の日にち)」、「残高」と表示をしてます。残高の右のテキストボックスに値を入力し、右に表示されています、「金額」、「仮」、「支払額」、「未払金」のボタンを押しますと、テキストボックスの値から選択したボタンの値を引いた数を中央のスペースに表示しています。例、「3000000」とテキストボックスに入力し、「金額」ボタンを押しますと「3000000-2697155」の結果を画面中央の値「金額 302845」と表示します。また、「仮」ボタンの場合も、「3000000-1708783」の結果を中央スペースに「仮 1291217」させます。今回中央スペースに「金額」ボタンの結果「仮」ボタンの結果「支払額」ボタンの結果「未払金残高」ボタンの結果を一度にすべて表示したいです。
80~85行目に問題があると思っています。
ボタンを押すイベントで合計値の値を全て取得できない
レコードの並び替えを行うと「ボタン」の増殖等の発生
どなたかご教授お願いします
以下のものを参照にしました
宜しくお願いします
(function() {
"use strict";
kintone.events.on([
'app.record.index.show',
'app.record.index.edit.submit',
], function(event){
var oldTotalRow = document.getElementsByClassName('total-row')[0];
if(oldTotalRow) oldTotalRow.parentNode.removeChild(oldTotalRow);
var client = new KintoneRestAPIClient();
var table = document.getElementsByClassName('recordlist-gaia')[0];
kintone.Promise.all([
client.app.getFormFields({
app: kintone.app.getId()
}),
client.record.getAllRecordsWithCursor({
app: kintone.app.getId(),
query: kintone.app.getQueryCondition()
}),
]).then(function(responses){
var properties = responses[0].properties;
var records = responses[1];
var totalRow = document.createElement('tr');
totalRow.classList.add('total-row');
var firstCell = document.createElement('td');
firstCell.innerText = '計';
totalRow.prepend(firstCell);
var columnProperties = [].map.call(table.getElementsByClassName('recordlist-header-label-gaia'), function(label){
return Object.values(properties).find(function(property){
return property.label === label.innerText;
});
});
let newText = document.createElement('input');
newText.type = 'text';
newText.id = 'text1';
kintone.app.getHeaderMenuSpaceElement().appendChild(newText);
var columnTotals = columnProperties.map(function(property){
var totalCell = document.createElement('td');
if(['NUMBER', 'CALC'].includes(property.type)){
totalCell.innerText = records.reduce(function(sum, record){
return sum + Number(record[property.code].value);
}, 0).toLocaleString();
totalCell.style.textAlign = 'right';
var b = totalCell.innerText;
var c = b.replace(",","");
var d = c.replace(",","");
var e = d.replace(",","");
var f ;
for(var i = 0; i<=e.length; i++){
var j = j+e[i];
j = j.replace("undefined","");
if(e.length==j.length){
f = j;
i=i+e.length;
}
}
let newButton = document.createElement('button');
newButton.id = 'button1';
newButton.innerText = property.code;
kintone.app.getHeaderMenuSpaceElement().appendChild(newButton);
newButton.addEventListener('click', function(){
var a = document.getElementById('text1').value;
var z = a-f;
var myHeaderSpace = kintone.app.getHeaderSpaceElement();
var myListHeaderDiv = document.createElement('div');
if(z>=0){
myListHeaderDiv.style.width = '100%';
myListHeaderDiv.style.height = '35px';
myListHeaderDiv.style.textAlign = 'center';
myListHeaderDiv.style.fontSize = '30px';
myListHeaderDiv.style.fontWeight = 'bold';
myListHeaderDiv.style.backgroundColor = '#00bfff';
myListHeaderDiv.innerText = property.code + " " +z;
}
if(z<0){
myListHeaderDiv.style.width = '100%';
myListHeaderDiv.style.height = '35px';
myListHeaderDiv.style.textAlign = 'center';
myListHeaderDiv.style.fontSize = '30px';
myListHeaderDiv.style.fontWeight = 'bold';
myListHeaderDiv.style.backgroundColor = '#ff6347';
myListHeaderDiv.innerText = property.code + " " +z;
}
myHeaderSpace.innerText = ''; // ← 増殖を防ぐため一旦明示的に空文字をセット
myHeaderSpace.appendChild(myListHeaderDiv);
});
}
if(property.options){
var options = Object.values(property.options).sort(function(a, b){
if(a.index < b.index) return -1;
if(a.index > b.index) return 1;
return 0;
}).map(function(option){
return option.label;
});
var optionCounts = options.map(function(option){
return records.reduce(function(count, record){
var value = record[property.code].value;
if(Array.isArray(value) && value.includes(option)) count++;
if(!Array.isArray(value) && value === option) count++;
return records;
}, 0);
});
totalCell.innerText = options.map(function(option, index){
return option + ':' + optionCounts[index] + '件';
}).join(' | ');
}
totalRow.appendChild(totalCell);
return '';
});
var lastCell = document.createElement('td');
totalRow.appendChild(lastCell);
table.getElementsByTagName('tbody')[0].prepend(totalRow);
//alert(1);
});
});
})();