How to write a correct list from string (on website)?

Question

We have a community with supporters and I want to display them on a website. If they pay 50€ or more their name will be colored, for any other amount it will be white. I have two strings in the JS where I can insert the donators, I want all of them to be displayed side by side but it doesn't quite work :/

Here's my JS, CSS and HTML:

var donators = [];
var donatorsColor = ["<p id='d'>Zalon</p>", "<p id='d'>RotaryCoast</p>"];

function donatorNames() {
    document.getElementById("donator").innerHTML = donatorsColor.join(" • ");
    document.getElementById("donator").innerHTML = donators.join(" • ").style.color;
}

#d {
    color: #2890da;
}

<div id="donatorbox">
  <h4>Unsere Unterstützer:</h4>
  <p id="donator"></p>
</div>

Screenshot:

Many thanks in advance, David :)

Answer 1

Many things needed to be fixed.

1. <p> is a block element, thus to show side by side you need a <span> tag.
2. donators.join(" • ").style.color make no sense, as join returns a string of array elements joined together.
3. ID of an element on a web page is unique. No two elements on the same page can have the same ID.
4. donatorNames() function needed to be ended with }.

var othersDonators = ["<span class='o'>John</span>", "<span class='o'>Mike</span>"];
var donatorsMoreThan5 = ["<span class='d'>Zalon</span>", "<span class='d'>RotaryCoast</span>"];

function donatorNames() {
   document.getElementById("donator").innerHTML = donatorsMoreThan5
                                                .concat(othersDonators)
                                                .join(" • ")
  
}

donatorNames();

body{
  color: #FFFFFF;
}
.box {
  background: #000;
}

.d {
  color: #2890da;
}

.o {
  color: #FFFFFF;
}

<div class="box">
  <h4>Our supporters(Unsere Unterstützer):</h4>
  <div id="donator"></div>
</div>

Answer 2

There are a few things that need fixing:

1. <p> is a block element; if you want the names to appear side-by-side you need to use an inline one (e.g. <span>)
2. ids must be unique in a document; you should change your #d ID to a .d class
3. You are missing a closing } for the donatorNames() function
4. the JavaScript line donators.join(" • ").style.color; makes no sense as donators.join(" • ") returns a string, not an HTML element, therefore donators.join(" • ") has no style.color property

A possible solution to your problem would be:

var donators = ['foo', 'bar', 'baz'];
var donatorsVip = ["Zalon", "RotaryCoast"];

/*
 * Sorted only by VIP status (VIPs appear first)
 */
function donatorNames() {
  document.getElementById("donator").innerHTML = donatorsVip
    .map(item => (`<span class="d">${item}</span>`)) // add color to VIP donors
    .concat(donators) // add the non-VIP donors *after* the VIP ones
    .join(' • '); // convert the array into a string of donors, separated by ' • '
}

/*
 * Sorted by VIP status (VIPs appear first) AND alphabetically
 * NOTE: javascript will sort CAPITAL letters before lower case ones
 *       therefore 'Zalon' would appera before 'aaron'; this behaviour can be
 *       controlled by providing an appropriate sorting functioon to `Array.prototype.sort()`
 */
function donatorNamesSorted() {
  document.getElementById("donator2").innerHTML = donatorsVip
    .sort() // sort the VIP donors by alphabetical order 
    .map(item => (`<span class="d">${item}</span>`)) // add color to VIP donors
    .concat(donators.sort()) // add the alpabetically sorted non-VIP donors *after* the VIP ones
    .join(' • '); // convert the array into a string of donors, separated by ' • '
}

function load() {
  donatorNames();
  donatorNamesSorted()
}

load();

body {
  background-color: #333;
  font-family: sans-serif;
}

#donatorbox,
#donatorbox2 {
  color: #efefef;
}

.d {
  color: #2890da;
}

<div id="donatorbox">
  <h4>Unsere Unterstützer:</h4>
  <p id="donator"></p>
</div>

<div id="donatorbox2">
  <h4>Unsere Unterstützer: (alphabetically sorted, VIPs first)</h4>
  <p id="donator2"></p>
</div>