I am making a shop, and I made a “Colors available” part, but I want to be able to color separate words with different colors, in Javascript, css, or HTML, or however it is possible
<button onclick="getColors()">Colors Available</button> <script> function getColors(){ if(!document.getElementById('colors_ava')){ let colors_ava = document.createElement('div'); colors_ava.id = 'colors_ava'; document.body.appendChild(colors_ava); colors_ava.innerText = "Rich Navy - True Red - Dark Geen - Olive Drab Green - Patriot Blue"; } } </script>
Advertisement
Answer
You can have util method to create span with style.
function getColors() { function createSpan(str, color) { const span = document.createElement("span"); span.style.color = color; span.style.marginRight = "20px"; span.textContent = str; return span; } if (!document.getElementById("colors_ava")) { let colors_ava = document.createElement("div"); colors_ava.id = "colors_ava"; document.body.appendChild(colors_ava); colors_ava.append(createSpan("Red color - ", "red")); colors_ava.append(createSpan("Blue color - ", "blue")); // colors_ava.innerText = "Rich Navy - True Red - Dark Geen - Olive Drab Green - Patriot Blue"; } }
<button onclick="getColors()">Colors Available</button>