w3resource

JavaScript: Highlight the bold words of a paragraph, on mouse over a certain link

JavaScript DOM: Exercise-12 with Solution

Write a JavaScript program to highlight the bold words of the following paragraph, on mouse over a certain link.

Sample link and text:

[On mouse over here bold words of the following paragraph will be highlighted]

Sample Solution: -

HTML Code:

<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Get And Style All Tags</title>
  </head>
  <body> 
  <p>[<a href="#" onMouseOver="highlight()" onMouseOut="return_normal()">On mouse over here bold words of the following paragraph will be highlighted</a>]</p> 
<p><strong>We</strong> have just started <strong>this</strong> section for the users (<strong>beginner</strong> to intermediate) who <strong>want</strong> to work with <strong>various</strong> JavaScript <strong>problems</strong> and write scripts online to <strong>test</strong> their JavaScript <strong>skill</strong>.</p>
  </body>
  </html>

JavaScript Code:

//First create a list of all bold items 
var bold_Items;
window.onload = getBold_items();
 
// Collect all <strong> tags
function getBold_items() 
{
  bold_Items = document.getElementsByTagName('strong'); 
}
// iterate all bold tags and change color  
function highlight() 
{
   for (var i=0; i<bold_Items.length; i++)
   {                                                    
    bold_Items[i].style.color = "green";
    }
}

// On mouse out highlighted words become black
function return_normal()
{
  for (var i=0; i<bold_Items.length; i++) 
  {
       bold_Items[i].style.color = "black";
  }
}

Sample Output:

javascript-dom-exercise-12

Flowchart:

Flowchart: JavaScript - Highlight the bold words of a paragraph, on mouse over a certain link.

Live Demo:

See the Pen javascript-dom-exercise-12 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript program to display a random image (clicking on a button) from the following list.
Next: Write a JavaScript program to get the width and height of the window (any time the window is resized).

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



JavaScript: Tips of the Day

Returns true if the given number is a power of 2, false otherwise

Example:

const tips_isPowerOfTwo = n => !!n && (n & (n - 1)) == 0;
console.log(tips_isPowerOfTwo(0)); 
console.log(tips_isPowerOfTwo(4));
console.log(tips_isPowerOfTwo(16));

Output:

false
true
true