0

I’m new to javascript and trying to add some right padding to the database variable. The table is in a div with the id “tableDisplay”. I tried adding padding using that id but it affects the whole table, not just the information within it. I tried adding another div and using document.getElementById but it’s not working. Any help would be greatly appreciated! Here is the code:

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Billboard Top 10 Artists</title>
    <meta charset="utf-8" />

  </head>

  <body>

<button id="sortName">Sort by name</button>
<button id="sortSong">Sort by song</button>
<button id="reverseData">Reverse</button>

<div id="dataBase"></div>


<div id="tableDisplay"></div>

    <script>

var sortBy = 0;

var database = [
  ['The Beatles',   'Hey Jude',      'The White Album', 'Liverpool, UK'],
  ['Madonna',    'Into the Groove',     'The Immaculate Collection', 'Bay City, MI'],
  ['Elton John',   'Candle in the Wind 1997', 'Goodbye Yellow Brick Road', 'Pinner, UK'],
  ['Elvis Presley',    'Hound Dog',    "It's Christmas Time", 'Tupelo, MS'],
  ['Mariah Carey',     'All I Want for Christmas is You',    'Daydream', 'Huntington, NY'],
  ['Stevie Wonder', 'Superstition',  'Songs in the Key of Life', 'Saginaw, MI'],
  ['Janet Jackson',  'All For You',     'Design of a Decade', 'Gary, IN'],
  ['Michael Jackson',    'Thriller',    'Thriller', 'Gary, IN'],
  ['Whitney Houston',  'I Will Always Love You',     'The Bodyguard', 'Newark, NJ'],
  ['Rihanna',  'We Found Love',     'Good Girl Gone Bad', 'Saint Michael, Barbados']

];

 function resortData() {
     if (sortBy==-1) {
    database.reverse();
  } else {
  database.sort(function(a, b) {
    if (a[sortBy].toLowerCase() < b[sortBy].toLowerCase()) {
      return -1;
    } else if (a[sortBy].toLowerCase() > b[sortBy].toLowerCase()) {
    return 1;
    } else {
    return 0;
    }
  });
}

var htmlString = '<h1>Billboard Top 10 Artists of All Time</h1>'
  + '<table>'
  +'<tr><th>Artist</th>'
  +'<th>Most Popular Song</th>'
  +'<th>Best Selling Album</th>'
  +'<th>Birth Place</th>'
  +'</tr>';
for (var i = 0; i < database.length; i++) {
  htmlString += '<tr>';
  for (var j = 0; j < database[i].length; j++) {
    htmlString += '<td>'
      + database[i][j]
      + '</td>';
  }
  htmlString += '</tr>';
}
htmlString += '</table>';
document.getElementById('tableDisplay').innerHTML = htmlString;
}

resortData();

document.getElementById("sortName").onclick = function() {
  sortBy = 0;
  resortData();
};
document.getElementById("sortSong").onclick = function() {
  sortBy = 1;
  resortData();
 };
document.getElementById("reverseData").onclick = function () {
  sortBy = -1;
  restoreData();
};

document.getElementById("sortSong").style.backgroundColor = "PaleTurquoise";
document.getElementById("reverseData").style.backgroundColor = "SkyBlue";
document.getElementById("sortName").style.backgroundColor = "LightCyan";
document.getElementById("dataBase").style.paddingRight = "10px";

 </script>

  </body>

</html>
Grace
  • 1
  • 1
  • `I tried adding padding` where? show the code you have an issue with, without that, the question is harder to interpret than it needs to be – Bravo Jun 30 '22 at 03:04
  • `add some right padding to the database variable` makes no sense ... a variable doesn't have padding, an HTML Element does - and your variable `database` is a nested array ... what "padding" do you want on it – Bravo Jun 30 '22 at 03:05
  • Hello Bravo, I want to add space between the information in the table. – Grace Jun 30 '22 at 03:43
  • and how have you tried? putting padding on the cells (td/th) would be the way to go - `#tableDisplay :where(td, th) { padding:10rem;}` – Bravo Jun 30 '22 at 03:44
  • Sorry for the confusion. I’m new to writing css in javascript. That code didn’t work – Grace Jun 30 '22 at 03:48
  • I’m just trying to add about 10px to the right so the columns aren’t so squished together – Grace Jun 30 '22 at 03:52
  • 1
    `That code didn’t work` ... what happened? nothing? too much padding? not enough padding? your dog ran away from home? `#tableDisplay :where(td, th) { padding-right:10rem;}`? – Bravo Jun 30 '22 at 04:05
  • oops, just noticed 10rem, was supposed to be 1rem ... that must've caused a huge padding – Bravo Jun 30 '22 at 06:01

0 Answers0