I have been working on a code snippet to extract checked checkboxes and match their names with an object array in order to retrieve certain values. You can find a sample fiddle here.
Now, I am wondering how I can utilize these extracted values to dynamically create a span element, update its color, and position it based on the checkboxes that are checked.
var inputElements = document.getElementsByName("fruits");
const item = {
"lychee" :{ price:10, pos:80, colCode:'ff0000' },
"orange" :{ price:12, pos:60, colCode:'00ff00' },
"apple" :{ price:8, pos:40, colCode:'ff6600' },
"mango" :{ price:12, pos:60, colCode:'00ff00' },
"banana" :{ price:4, pos:80, colCode:'ff0000' }
};
let result = [...document.querySelectorAll("[name=fruits]:checked")]
.map(chk => (
var marker = document.createElement('span');
marker.style.color = colCode:${item[chk.value].colCode}, //this does not seem to work
marker.style.marginLeft = pos:${item[chk.value].pos}px ) //this also does not work
); <input type="checkbox" name="fruits" value="lychee">Lychee <br>
<input type="checkbox" name="fruits" value="orange" checked>Orange <br>
<input type="checkbox" name="fruits" value="apple">Apple <br>
<input type="checkbox" name="fruits" value="mango" checked>Mango <br>
<input type="checkbox" name="fruits" value="banana">Banana