SHARE
TWEET

Topic Coloring

simeon_stoykov May 30th, 2020 871 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Topic Coloring</title>
  8.   <style>
  9.     p {
  10.       cursor: pointer;
  11.     }
  12.   </style>
  13. </head>
  14.  
  15. <body>
  16.   <div>
  17.     <p data-topic-name="discussion" onclick="newMessage('discussion')">General discussion</p>
  18.     <p data-topic-name="bugs" onclick="newMessage('bugs')">Bugs</p>
  19.     <p data-topic-name="animals" onclick="newMessage('animals')">Animals</p>
  20.   </div>
  21. </body>
  22.  
  23. <script>
  24.   function newMessage(topic) {
  25.     const paragraph = document.querySelector(`p[data-topic-name="${topic}"]`);
  26.     const pStyle = paragraph.getAttribute('style');
  27.     const coloredTopicStyle = 'background: red; color: white;';
  28.     const newStyle = pStyle === coloredTopicStyle ? '' : coloredTopicStyle;
  29.     paragraph.setAttribute('style', newStyle);
  30.   }
  31.  
  32.   newMessage('discussion');
  33. </script>
  34.  
  35. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top