I have a loop item template, where among other things, there is a button widget (with no click on it, used just for shape and easy to use) that fetches a custom field value from the post. This value is a number between 0-100. The button is accompanied by a script that changes the color of the button based on the value in it.
Now here’s the problem:
When using this template for the loop grid widget, the script works only for the first post in the list. All other post have standard color buttons that does not depend on the value in it. All other things work fine. My only problem is to let this javascript work for every element in the loop grid widget. I tried to put the script not in the loop item template but in page where the the loop grid widget will be used, but it doesn’t work either.
The button has the ID set to ‘myButton’, and I thought that’s where the problem lies, maybe in subsequent elements of the loop grid, the buttons lose that id?
function getColor(value) {
const colors = {
0: '#F50000', 1: '#F50000', 2: '#F50000', 3: '#F50000', 4: '#F50000', 5: '#F50000', 6: '#F50000', 7: '#F50000', 8: '#F50000', 9: '#F50000',
10: '#F50000', 11: '#F50000', 12: '#F50000', 13: '#F50000', 14: '#F50000', 15: '#F50000', 16: '#F50000', 17: '#F50000', 18: '#F50000', 19: '#F50000',
20: '#F50000', 21: '#F50000', 22: '#F50000', 23: '#F50000', 24: '#F50000', 25: '#F50000', 26: '#F50000', 27: '#F50000', 28: '#F50000', 29: '#F50000',
30: '#F50000', 31: '#F50000', 32: '#F50000', 33: '#F50000', 34: '#F50000', 35: '#F50000', 36: '#F50000', 37: '#F50000', 38: '#F50000', 39: '#F50000',
40: '#F50000', 41: '#F50000', 42: '#F00000', 43: '#EB0000', 44: '#E60000', 45: '#E10000', 46: '#DC0000', 47: '#D70000', 48: '#D20000', 49: '#CD0000',
50: '#C80000', 51: '#C80A00', 52: '#C81400', 53: '#C81E00', 54: '#C82800', 55: '#C83200', 56: '#C83C00', 57: '#C84600', 58: '#C85000', 59: '#C85A00',
60: '#C86400', 61: '#C86E00', 62: '#C87800', 63: '#C88200', 64: '#C88C00', 65: '#C89600', 66: '#C8A000', 67: '#C8AA00', 68: '#C8B400', 69: '#C8BE00',
70: '#C8C800', 71: '#BEC800', 72: '#B4C800', 73: '#AAC800', 74: '#A0C800', 75: '#96C800', 76: '#8CC800', 77: '#82C800', 78: '#78C800', 79: '#6EC800',
80: '#64C800', 81: '#5AC800', 82: '#50C800', 83: '#46C800', 84: '#3CC800', 85: '#32C800', 86: '#28C800', 87: '#1EC800', 88: '#14C800', 89: '#0AC800',
90: '#00C800', 91: '#00CD00', 92: '#00D200', 93: '#00D700', 94: '#00DC00', 95: '#00E100', 96: '#00E600', 97: '#00EB00', 98: '#00F000', 99: '#00F500',
100: '#00FA00'
};
return colors[value];
}
function updateCircle() {
const button = document.getElementById('myButton');
const value = parseInt(button.innerText, 10);
const primaryColor = '#605BE5'; // primary color fixed
const secondaryColor = getColor(value);
button.style.backgroundImage = `linear-gradient(to bottom, ${primaryColor}, ${secondaryColor} 80%)`;
}
// Constantly update color
setInterval(updateCircle, 10);<button id="myButton">1</button>