[Twitch API] setAttribute() function doesn't work with certain classes

1

HTML:

<head>
  <header class="col-lg-12">
    <h1>Twitch API</h1>
  </header>
  <nav>
    <ul>
      <a href="#">
        <li>Online</li>
      </a>
      <a href="#">
        <li>Offline</li>
      </a>
      <a href="#">
        <li>All</li>
      </a>
    </ul>
    <div class="handle">Menu</div>
  </nav>
</head>

<body>
  <div class="container" id="container">
<!-- divs are inserted here -->
  </div>
</body>

Relevant CSS:

.row {
  max-width: 100%;
  margin: 10px 10px 10px 10px;
  position: relative;
  box-shadow: 1px 1px 1px #888888;
  background-color: #E9E9E6;
}

.row:hover {
  max-width: 100%;
  margin: 10px 10px 10px 10px;
  position: relative;
  box-shadow: 1px 1px 1px #888888;
  background-color: #99998D;
}

.rowOnline {
  max-width: 100%;
  margin: 10px 10px 10px 10px;
  position: relative;
  box-shadow: 1px 1px 1px #888888;
  background-color: #007C00;
}
.rowOffline {
  max-width: 100%;
  margin: 10px 10px 10px 10px;
  position: relative;
  box-shadow: 1px 1px 1px #888888;
  background-color: #CB0500;
}

Function I’m having trouble with:

function appendToHtml(index, jsonObject) {
  var userName, row, twitchUserStatus, twitchImage, newElement, container, rowClass;
  console.log(jsonObject); 
  
  //get the info from the JSON object
  if(jsonObject.stream !== null) {
    userName = jsonObject.stream.display_name;
    twitchUserStatus = jsonObject.stream.status;
    twitchImage = jsonObject.stream.logo;
    rowClass = 'rowOnline';
  } else {
    userName = jsonObject.display_name;
    twitchUserStatus = "offline";
    twitchImage = 'https://player.twitch.tv/favicon.png';
    rowClass = 'rowOffline';
  }
  container = document.getElementById('container');
  var row = document.createElement('div');
  row.setAttribute('class', 'row');
  //create a div for the user's image, import the image into html and append the image to the div
  var twitchImageDiv = document.createElement('div');
  twitchImageDiv.setAttribute('class', 'twitchImage col-sm-4');
  var image = document.createElement('img');
  image.src = twitchImage;
  image.setAttribute('class', 'img-fluid');
  twitchImageDiv.appendChild(image);
  
  //create a div for the twitch user's name, append the text to the div
  var twitchUserNameDiv = document.createElement('div');
  twitchUserNameDiv.setAttribute('class', 'twitchUser col-sm-4');
  var twitchUserNameText = document.createTextNode(userName);
  twitchUserNameDiv.appendChild(twitchUserNameText);
  
  //create a div for the twitch channel's description, append the text to the div
  var twitchDescriptionDiv = document.createElement('div');
  twitchDescriptionDiv.setAttribute('class', 'twitchDesription col-sm-4');
  var descriptionText = document.createTextNode(twitchUserStatus);
  twitchDescriptionDiv.appendChild(descriptionText);
  
  row.appendChild(twitchDescriptionDiv);
  row.insertBefore(twitchUserNameDiv, twitchDescriptionDiv);
  row.insertBefore(twitchImageDiv, twitchUserNameDiv);
  
  container.appendChild(row);
  
  
}

In my function, on the line:

row.setAttribute('class', 'row');

I hardcoded the line to test the output. This line works, but if I hardcode the class to rowOnline or rowOffline, it’s will not set the class properly. row and rowOnline/rowOffline are the same, except for the background-color property being different. When I do hardcode it, there is no CSS styling at all. Any idea how I can fix this? [Here’s my Codepen.]
(https://codepen.io/stepup2stepout/pen/XeNKOj/) Thanks!

3

Hey. As an alternative, you could just leave the “row” class in your rowClass vars:

rowClass = 'row rowOnline';
...
rowClass = 'row rowOffline';

and then do:

row.setAttribute('class', rowClass);

It’ll work the same as @camperextraordinaire solution. Without the “row” class, you lose the Bootstrap styling for that class (which is a display:flex and flex-wrap: wrap); that’s why it seems like there’s no styling at all.

1 Like