Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by ja5on
ja5on
10,338 Points

How to Style my JavaScript results with CSS

https://w.trhou.se/q6l922yw4f

I have some random numbers that have been generated but when they display themselves i would like some styling, if I put the <script src="while.js"></script> into <td> tag.
example. <td><script src="while.js"></script></td> then i get the desired result.

However as people have pointed out its not correct having the JS file where it would be. Please Please could someone help with a fix to my problem (shortest code possible please) Thanks.

2 Answers

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

If I understand correctly you're wanting to put the generated numbers in individual cells in the second row of your table. One way you can do this is by giving the row in question a class, generate contents to add to that row in your JavaScript, and then write those contents inside the row with document.querySelector().innerhtml.

Here's an example based on your code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Loops</title>
    <link href="style.css" rel="stylesheet"> 
  </head>
  <body>
    <main>
      <h1>Random Numbers</h1>
        <p class="paragraph">Today I am focusing with producing random 
          numbers from one to ten.  The JavaScript I have written generates 
          a random number using the math.floor and math.random inside a 
          formula. The output generates only one random number so I passed 
          the formula into a while loop that captures ten numbers completely 
          at random.  I have displayed these using CSS.  
        </p>
      <table>
        <tr>
          <th>Random Number</th>
        </tr>
        <tr class="numberRow">
        </tr>

      </table>
    </main>
        <script src="while.js"></script>
  </body>
</html>

All that I've done to your HTML is add a class to the row we're targeting, calling it numberRow, and removed the <td></td> element. We'll be setting the contents of this <tr> element in the script. 

function getRandomNumber(upper) {
  return Math.floor( Math.random() * upper ) + 1;
  }

let counter = 0;
let rowContents = "";

while ( counter < 10 ) {
  rowContents += `<td>The random number is ${getRandomNumber(10)}</td>`;
  counter += 1;
  }

document.querySelector(".numberRow").innerHTML = rowContents;

Here I'm using document.querySelector(".numberRow") to target the class I've made. The .innerHTML property says "replace everything inside the element I'm targeting with what I set this equal to". I've declared a new variable rowContents with an empty string above the loop to give us a place to build the contents of the table.

Each time the loop runs it will add `<td>The random number is ${getRandomNumber(10)}</td>` to the rowContents variable. This gives us a new cell with a new number on each loop, stored conveniently to be used when the loop is done. After the loop the final line of the script runs, setting the contents of the targeted element to the message that was built.

ja5on
ja5on
10,338 Points

That's really clever, thank you so much... I'm always struggling with JavaScript so much so that I'm going over JavaScript again more slowly this time.

I added a <br> to tableContents += <tr>The random number is ${getRandomNumber(10)}</tr><br>; just so each loop starts new line. I had help from one guy who got me this far and another who left me swamped with code but you really nailed it.
Can't tell you how pleased I am thanks again.

Xavier Ritch
Xavier Ritch
11,099 Points
Xavier Ritch
Xavier Ritch
11,099 Points

based on the link to the code you posted above your question, your script tag is positioned just fine, just before the closing body tag. Its good practice to do this in order for your html to load first, then your javascript. However, you may also place your script tag within the HEAD of your html, and even include the 'defer' keyword on the script tag in order for your html to still load first before your javascript does. Either way is fine and its really a matter of preference. Hope this helps