add css style with both php and Javascript [duplicate]

Question

I got a .css file linked to my HTML file. And somewhere, as a basis to my question, I got this:

<div class="input_container">

Later on, with javascript, I can add a .error to activate some class changes.

inputControl.classList.add('error');

Changing the class="input_container" to <div class="input_container.error">

Perfect. But now when I enter this page through a diffrent direction, I want/need PHP to add this .error aswell.

And the following (simplified) does not work.

$style = "input_container";

<div class=<? echo "\"".$style."\""; ?>>

How about <div class="<?= $style ?>">? Not sure what you were trying to do there with the quotes — Phil
– Phil, Commented May 28 at 14:06
"It doesn't work" is not helpful. Please describe the output you actually received and how it differs from what you expected. Did you get any error messages? Include them verbatim. — Alex Howansky
– Alex Howansky, Commented May 28 at 14:09
You're using <? to start a PHP section. That will only work if you have short_open_tag enabled. Maybe that's the problem? We don't actually know what your question/problem really is. See: PHP tags. — KIKO Software
– KIKO Software, Commented May 28 at 14:31
You would need to add the "error" class to your php variable at some point. — mykaf
– mykaf, Commented May 28 at 14:33
Changing the class="input_container" to <div class="input_container.error">...no, it changes it to input_container error - no dot. Not the same thing. — ADyson
– ADyson, Commented May 28 at 15:10

ADyson · Accepted Answer · 2025-05-28 15:09:46Z

2

The issue:

"input_container.error" will not work.

Instead use:

<div class="input_container error">

Add the class in PHP

<?php
// base class
$class = 'input_container';

// append the extra class when you need it
if ($hasError) {          // whatever condition you use
    $class .= ' error';   // note the leading space
}
?>
<div class="<?= htmlspecialchars($class) ?>">
    …
</div>

.= ' error' concatenates a space plus the word error, outputting input_container error.
<?= … ?> is shorthand for <?php echo … ?>.
htmlspecialchars() is good practice to guard against XSS injection (although since this isn't user-generated data in this case the risk should be zero).

The JavaScript part has to stay the same.

edited May 28 at 15:09

ADyson

62.9k16 gold badges86 silver badges100 bronze badges

answered May 28 at 14:22

Jason Lommelen

13310 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Desert Wind · Accepted Answer · 2025-05-28 15:44:35Z

0

All credit for the answer goes to @KIKO Software and @Phil .

To answer everyones question first: The error is that there is no style added to the class, so the div doesn't revieve a cc style class. My bad that I didn't expres this specificly.

The answer, by @KIKO Software and @Phil, is the quotes and the php tag. I did not add the short_open_tag, so <? didn't work, it should have been <?php And I quotes, I added the quotes because the class should be between quotes "". And to skip a quote during the echo I used the ". But echo itself was sufficient, and the extra quotes just got in the way.

$style = "input_container";

~

<div class=<?php echo $style; ?>>

And special thank you @Jason Lommelen for the htmlspecialchars() tip! I can definatly use that at some places.

answered May 28 at 15:44

Desert Wind

198 bronze badges

2 Comments

Phil May 28 at 22:17

You should have quotes around the class attribute value. They will be absolutely necessary if you have multiple classes

Desert Wind May 29 at 16:23

@Phil This is true. I just stumbeld on this myself.

Collectives™ on Stack Overflow

add css style with both php and Javascript [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related