HOW DO I SELECT A DIV WITH PHP?

Asked

Viewed 101 times

-2

I’m stuck in an exercise in the following exercise.

Create a loop with do...while which displays within an element <div> the current index, but when the repeat index is 2, 6 and 10, change the background color of this div only. The loop starts from 0 and goes up to 12.

I managed to create the loop, however, I’m stuck in the coloring part of the Divs in the positions cited in the exercise. I’ll put the code below.

<!DOCTYPE html>
<html>
<head>
    <title>DoWhile</title>
    <meta charset="utf-8">
</head>
<body>  
        <?php
        $indice = 0; 
        do {
        ?>
        <div id="box" style="height:100px; width:500px; background-color:gray; margin-bottom:5px;" >
            <? = $indice;?>             
        </div>
        <?php
        $indice++;
        }
        while ($indice <= 12);
        ?>
</body>
</html>
php html div

2 answers

1

A way to do this without relying on several IF ELSE for each situation, would be keeping each style in a array and during the loop, check if there is a key in the array with the current value of $indice, otherwise, apply the standard style.

That way, you could just add new styles within the array, no need to create any new condition within the loop.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>DoWhile</title>
    <meta charset="utf-8">
</head>
<body>
    <?php
    
        $styles['default'] = "gray";
        $styles[2] = "yellow";
        $styles[6] = "red";
        $styles[10] = "blue";
        
        $indice = 0; 
        do {
        $style = $styles[$indice] ?? $styles['default'];
        ?>
        <div id="box" style="height:100px; width:500px; background-color:<?=$style?>; margin-bottom:5px;">
            <?= $indice;?>             
        </div>
        <?php
        $indice++;
        }
        while ($indice <= 12);
    ?>
</body>
</html>

Test here

0

One possibility is to separate the style of the markup in a CSS then to decide which <div> color with what color.

div {
  height: 100px;
  width: 500px;
  margin-bottom: 5px;
}

.gray {
  background-color: gray;
}

.red {
  background-color: red;
}

For this it is enough, with the help of ternary conditional operator, change the class of the element based on the function result in_array() returning true if a value is contained in a specified array.

<!DOCTYPE html>
<html>
<head>
    <title>DoWhile</title>
    <meta charset="utf-8">
    <!--link rel="stylesheet" href="{NOME DO ARQUIVO CSS}.css"-->
</head>
<body>  
        <?php
        $indice = 0; 
        do {
        ?>
        <div id="box" class="<?= in_array($indice,[2,6,10])? 'red': 'gray'; ?>">
            <?= $indice;?>             
        </div>
        <?php
        $indice++;
        }
        while ($indice <= 12);
        ?>
</body>
</html>

Which results in:

div {
  height: 100px;
  width: 500px;
  margin-bottom: 5px;
}

.gray {
  background-color: gray;
}

.red {
  background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <title>DoWhile</title>
  <meta charset="utf-8">
  <!--link rel="stylesheet" href="{NOME DO ARQUIVO CSS}.css"-->
</head>

<body>
  <div id="box" class="gray">
    0
  </div>
  <div id="box" class="gray">
    1
  </div>
  <div id="box" class="red">
    2
  </div>
  <div id="box" class="gray">
    3
  </div>
  <div id="box" class="gray">
    4
  </div>
  <div id="box" class="gray">
    5
  </div>
  <div id="box" class="red">
    6
  </div>
  <div id="box" class="gray">
    7
  </div>
  <div id="box" class="gray">
    8
  </div>
  <div id="box" class="gray">
    9
  </div>
  <div id="box" class="red">
    10
  </div>
  <div id="box" class="gray">
    11
  </div>
  <div id="box" class="gray">
    12
  </div>
</body>

</html>

Also as suggested in the comments it is possible to assign the class to be stylized only when the condition is met:

<!DOCTYPE html>
<html>
<head>
    <title>DoWhile</title>
    <meta charset="utf-8">
    <!--link rel="stylesheet" href="{NOME DO ARQUIVO CSS}.css"-->
</head>
<body>  
        <?php
        $indice = 0; 
        do {
        ?>
        <div id="box" <?= in_array($indice,[2,6,10])? 'class="red"':''; ?>>
            <?= $indice;?>             
        </div>
        <?php
        $indice++;
        }
        while ($indice <= 12);
        ?>
</body>
</html>

Resulting in:

div {
  height: 100px;
  width: 500px;
  margin-bottom: 5px;
  background-color: gray;
}

.red {
  background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <title>DoWhile</title>
  <meta charset="utf-8">
  <!--link rel="stylesheet" href="{NOME DO ARQUIVO CSS}.css"-->
</head>

<body>
  <div id="box">
    0
  </div>
  <div id="box">
    1
  </div>
  <div id="box" class="red">
    2
  </div>
  <div id="box">
    3
  </div>
  <div id="box">
    4
  </div>
  <div id="box">
    5
  </div>
  <div id="box" class="red">
    6
  </div>
  <div id="box">
    7
  </div>
  <div id="box">
    8
  </div>
  <div id="box">
    9
  </div>
  <div id="box" class="red">
    10
  </div>
  <div id="box">
    11
  </div>
  <div id="box">
    12
  </div>
</body>

</html>

  • 1

    One suggestion in this form would be to remove the class .gray and add to the standard class style div, applying only the alternative classes when they are triggered.

  • @Weslleyaraújo, the guidelines have been incorporated the reply. Thank you.

Browser other questions tagged php html div

You are not signed in. Login or sign up in order to post.