css onmouseover causing DOM error

Question

I have a php generated HTML where I would like to add some css onmouseover functionality like below

<span id='".$id."' class='userInfo' onmouseover='hoverdiv(event,'popupUserInfoDiv')' onmouseout='hoverdiv(event,'popupUserInfoDiv')'>".$c["test"]."</span>

The javascript is not even added yet that if I mouseover I get the following error at the beginning of my DOM:

SyntaxError: Unexpected token '}'

EDIT: sorry if I was not clear enough but my code is PHP generated so I cannot use any double quote ? I tried and it breaks my page

The PHP is useless here. Show us the HTML *after* the PHP has been processed. — John Conde, Jan 04 '18 at 16:04
Probably not the cause of the problem, but if you're using single quotes for your HTML attributes then `event,'popupUserInfoDiv')` is going to break it. — MCMXCII, Jan 04 '18 at 16:05
sorry but Im not sure the html you are asking about ? safari shows me error on line 3 of my dom right before ` ` — jotyhista, Jan 04 '18 at 16:08
@MCMXCII I have to use single quotes because this is inside PHP or is there an alternative ? — jotyhista, Jan 04 '18 at 16:10
@jotyhista Have a look at this https://stackoverflow.com/questions/3694327/php-using-gettext-inside-eof-string. you might benefit from using that format if you need the double quotes for PHP and the single quotes for HTML attributes. — MCMXCII, Jan 04 '18 at 16:12
@MCMXCII that did it thanks, had to wrap it in a variable; if you post an answer I'll accept it — jotyhista, Jan 04 '18 at 16:20

score 0 · Answer 1 · edited Jan 04 '18 at 16:08

0

You are closing the call earlier.

onmouseover='hoverdiv(event,'popupUserInfoDiv')'

should be

onmouseover='hoverdiv(event,"popupUserInfoDiv")'

same with

onmouseout='hoverdiv(event,'popupUserInfoDiv')'

and

".$c["test"]."

edited Jan 04 '18 at 16:08

UncaughtTypeError

8,226
4
23
38

answered Jan 04 '18 at 16:06

Sergio

19
2

Yea this works too, it's like mine but the other around... in fact it's better, more consistent, singles for all HTML attributes delimiters :) – Alix Bergeret Jan 04 '18 at 16:09
Being so oldschool, I prefer the double-quotes for attributes, and singles for javascript innards. ;) – IncredibleHat Jan 04 '18 at 16:10
thank you and sorry if I was not clear enough but my code is PHP generated so I cannot use any double quote ? I tried and it breaks my page – jotyhista Jan 04 '18 at 16:15

score 0 · Answer 2 · answered Jan 04 '18 at 16:08

0

You need to use single and double quotes, like this:

<span id='".$id."' class='userInfo' onmouseover="hoverdiv(event,'popupUserInfoDiv')" onmouseout="hoverdiv(event,'popupUserInfoDiv')">".$c["test"]."</span>

Or else the parser gets confused.

In this case I have used doubles for the HTML attributes, and singles for the JS ones. It works.

answered Jan 04 '18 at 16:08

Alix Bergeret

106
8

The problem with this being that since the whole thing is being output by PHP, the double quotes you've used for the HTML attributes will then kill the PHP string. – MCMXCII Jan 04 '18 at 16:20
It doesn't, you can "escape" the characters, like this: print("He said\"Hello\" to her"); – Alix Bergeret Jan 04 '18 at 16:27

score 0 · Accepted Answer · answered Jan 04 '18 at 16:22

As you're using double-quotes for your PHP string already and single-quotes for your HTML attributes, you won't be able to use single quotes for your JavaScript.

hoverdiv(event,'popupUserInfoDiv')

Convert your PHP string to a string block and that should free up your double-quotes, see below for an example of string-block.

<?php
    $str = <<<EOF
        <p>Hello</p>
        <p><?php echo _("World"); ?></p>
    EOF;
?>

css onmouseover causing DOM error

3 Answers3