I need to dynamically change the css padding. So every tenth number, I want to increase the padding. Here is my code
var padding = 200
Object.keys(MassAddressDict).forEach(function(key) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
var index = Object.keys(MassAddressDict).indexOf(key);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write("<p style='padding-bottom: 200px'></p>")
});what I want to do is at every tenth item in the dictionary, increase the padding by say 20px. How can I implement this?
Try this, I think this will solve your problem
var padding = 200;
Object.keys(MassAddressDict).forEach(function(key) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
var index = Object.keys(MassAddressDict).indexOf(key);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write(`<p style='padding-bottom: ${padding}px'></p>`)
});First you'll need to get your padding out of your forEach, now it's resetting to 200 for each new object.
Then simply add your padding in your style (you can easily add a variable in a string in javascript using backticks and putting your var inside ${} `This is your var => ${myVar}`).
Your code should look like that :
var padding = 200
Object.keys(MassAddressDict).forEach(function(key, index) {
console.log(key + " " + MassAddressDict[key]);
var recieverData = MassAddressDict[key]
var senderInfo = combineSenderInfo();
var receiverInfo = combineReceiverInfo(recieverData);
if (index % 10 === 0){
padding = padding + 20
console.log("Padding increased to ", padding)
}
printWindow.document.write('<div style="display:flex;justify-content:space-between">');
printWindow.document.write(senderInfo);
printWindow.document.write('</div>');
printWindow.document.write(receiverInfo);
printWindow.document.write(`<p style='padding-bottom: ${padding}px'></p>`)
});here is some way of the dynamic CSS style
1 var div = document.getElementById('div1');
// Clear Value
div.setAttribute('style','');
// OR
div.removeAttribute('style');
// Set Style / Append Style
2 div.style.backgroundColor = '#ff0000';
3 document.getElementById('#div1').style += "padding-top:40px";
4 $("#div1").css("property",'value');
5 Var Value=25;
<div id='div1' style='padding: ${Value}px'></div>
you should read this for complete reference https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript