How to do this in a for loop?

This is my html:

<html>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' media='screen' href='index.css'>
    </head>
    <body>

        <div class="row">
          <div class="column" style="background-color:pink;"></div>
          <div class="column" style="background-color:purple;"></div>
          <div class="column" style="background-color:blueviolet;"></div>
          <div class="column" style="background-color:blue;"></div>
          <div class="column" style="background-color:rebeccapurple;"></div>
          <div class="column" style="background-color:royalblue;"></div>
          <div class="column" style="background-color:red;"></div>
          <div class="column" style="background-color:yellow;"></div>
          <div class="column" style="background-color:green;"></div>
          <div class="column" style="background-color:greenyellow;"></div>
        </div>

    </body>
</html>

JavaScript
​x
 
<html>    <head>        <meta charset='utf-8'>        <meta http-equiv='X-UA-Compatible' content='IE=edge'>        <meta name='viewport' content='width=device-width, initial-scale=1'>        <link rel='stylesheet' type='text/css' media='screen' href='index.css'>    </head>    <body>​        <div class="row">          <div class="column" style="background-color:pink;"></div>          <div class="column" style="background-color:purple;"></div>          <div class="column" style="background-color:blueviolet;"></div>          <div class="column" style="background-color:blue;"></div>          <div class="column" style="background-color:rebeccapurple;"></div>          <div class="column" style="background-color:royalblue;"></div>          <div class="column" style="background-color:red;"></div>          <div class="column" style="background-color:yellow;"></div>          <div class="column" style="background-color:green;"></div>          <div class="column" style="background-color:greenyellow;"></div>        </div>​    </body></html>​

I want a for loop in php where there gets printed as many boxes as ‘x’ is. I have tried this:

for ($x = 0; $x <= 10; $x++) {
     echo "<div class="column" style="background-color:pink;"></div>";
}

JavaScript
 
for ($x = 0; $x <= 10; $x++) {     echo "<div class="column" style="background-color:pink;"></div>";}​

But it’s not echoing anything, and also, how do I make sure they all have a different background color when I echo?

Answer

Store all colors in array and:

$colors = ['pink', 'purple', 'blue'];
foreach ($colors as $color) {
    echo '<div class="column" style="background-color:' . $color . ';"></div>';
}

JavaScript
 
$colors = ['pink', 'purple', 'blue'];foreach ($colors as $color) {    echo '<div class="column" style="background-color:' . $color . ';"></div>';}​

Also note usage of " and ' in echo.

Advertisement

Answer