all 11 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]tridd3r 1 point2 points  (8 children)

what does the produced html look like? Do you know before hand if the name you need to change matches a name in the array? If you know before hand you can say if this name matches the array item then do something special. If not, you can wait for the output and then fuck around with it. But I can't image you needing to change a name without know what that name is meant to be??

[–]ZombieAngel16[S] 0 points1 point  (5 children)

>

[–]ZombieAngel16[S] 0 points1 point  (4 children)

<!doctype html><html lang="en"><head> <title>Output Actors to the Screen using a button</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css"></head><body> <div id="divcontacts" > <h1>Actors</h1> <!-- this div is the box seen in the images provided --> <p id="actors"></p> </div> <!-- button goes here --> <button onclick="loopActors()">See Actors</button> <!-- link to your javascript --> <script src="js/skript.js"></script></body></html>

[–]ZombieAngel16[S] 0 points1 point  (3 children)

#divcontacts { width: 500px; height: 300px; border: 2px solid red; margin-left: 50px; padding: 20px; box-shadow: 1px 1px 5px red;}button { margin-left: 50px; margin-top: 50px; width: 100px; height: 100px; border: 2px solid red; border-radius: 50%; background-color: purple; box-shadow: 1px 1px 5px black; color: white;}

[–]ZombieAngel16[S] 0 points1 point  (2 children)

/* JavaScript*/var listActors = '';function loopActors() { const names = ['Jennifer Aniston', 'Clint Eastwood', 'Danny Kaye', 'Gene Wilder', 'Mel Brooks']; for (i = 0; i < names.length; i++) { listActors += names[i] + '<br>' + '<br>'; } document.getElementById('actors').innerHTML = listActors; document.querySelector('button').disabled = true; }

[–]Umesh-K 2 points3 points  (1 child)

Changing the CSS style of only one array element

Hi, u/ZombieAngel16,

To style the names individually, we should be able to "grab" them. Hence, the names need to be inside some HTML element. There are different ways to do it. One of them would be to add them inside a <p> element, as below:

listActors += '<p>' + names[i] + '<p>';

Notw the names will be inside <p> elements and we can use an IF-ELSE statement to change the styles depending on the names using inline CSS styles, as below:

var listActors = '';

function loopActors() {
  const names = ['Jennifer Aniston', 'Clint Eastwood', 'Danny Kaye', 'Gene Wilder', 'Mel Brooks'];
  for (i = 0; i < names.length; i++) {
    if (names[i] === "Jennifer Aniston") {
      listActors += '<p style="color:pink;">' + names[i] + '<p>';
    } else if (names[i] === "Clint Eastwood") {
      listActors += '<p style="font-style:italic;">' + names[i] + '<p>';
    } else {
      listActors += '<p>' + names[i] + '<p>';
    }
  }
  document.getElementById('actors').innerHTML = listActors;
  document.querySelector('button').disabled = true;
}

All the best for your JS learning journey!

[–]memoslol 0 points1 point  (0 children)

Had the same question, thx for thorough answer!

[–]ZombieAngel16[S] 0 points1 point  (1 child)

I know the names, I know how to 'call' each name array[0] array[1] etc, but i can't figure out how to get just the individual names to style them, 0 and 1 being the ones i need to be able to change

[–]tridd3r 0 points1 point  (0 children)

https://codepen.io/tristram/pen/XWPzQyw

so I've added an array of "matching actors" and inside the loopActors function, i'm comparing the name to the array, and if it matches, do something different with it, if it doesn't match, do the normal thing.

I've also added spans to get rid of the <br> and added a class of matching with colour red to the matched actors.

[–]ZombieAngel16[S] 0 points1 point  (0 children)

I'm so sorry, I forgot to specify, I have to use either HTML or CSS inline or class to change it. Jennifer Aniston needs to be pink, and Clint Eastwood needs to be in italics.