检查 HTML<p> 标记包含文本，然后更改背景颜色</p>

Question

I need to get help with the question above.

I tried doing:

var string = document.getElementById('t')
if(string.includes("ALARM"))
    document.body.style.backgroundColor = "red";

The html tag is

Current sensor data: 140 |ALARM

Thanks for help

Answer 1

var string = document.getElementById('t')

The above line gave you the element with id='t'

var string = document.getElementById('t').innerText;

The above line will give you the inner text of that HTML element

You will have to make this one change

Answer 2

If all you are doing is checking for the presence of ANY text in the element - then you can use the :empty pseudo-selector ....

If you are checking for the presence of specific text in the element - then you will need the javascript solutions provided by the other solutions.

However in the interest of a css solution - the:empty selector is a CSS selector that triggers when the element is empty (or contains only a comment) - note that whitespace DOES count as content so its not a perfect option....

The second and third p elements are empty - even though the third has a comment

 p { height: 16px; } p:empty { border:solid 1px red }

 <p>I have content</p> <p></p> <p><!-- I do not have content--></p> <p>I have content</p>

If you want the p with the content to be highlighted - then you can use the :not selector in combination with the :empty selector;

 p { height: 20px; } p:empty { border: dashed 1px lightgrey; } p:not(:empty) { background: yellow; border: solid 1px red; color:red; font-weight: bold; line-height: 20px; padding: 8px; }

 <p></p> <p>ALARM</p> <p></p>