How to remove text from selected text that is loaded by default on a page?

Question

When we refresh or reload the page, you can see the selected text in the middle of the circle when you click on the part below the image:

• Discuss goals and challenges
• Cash flow analysis
• Tax analysis ...

And so on.

Example: http://ivyfa.advisorproducts.com/financial-planning-process

The selected text is suitable only for the first click - when you click on these parts of the image again, you will not see the selected text. Therefore, I also want to remove the selection from the text on the first attempt.

It’s hard for me to explain this problem. Below is the JS code I'm using. I think the problem is in ChangeText() functionality.

 /*----------Text change on click - Our Process page---------------*/ var prev; var IdAry = ['slide1', 'slide2', 'slide3', 'slide5', 'slide8', 'slide9', 'slide12', 'slide13', 'slide14', 'slide15', 'slide16']; window.onload = function() { for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) { var el = document.getElementById(IdAry[zxc0]); if (el) { setUpHandler(el); el.onmouseover = function() { $(this).addClass("hover"); } el.onmouseout = function() { $(this).removeClass("hover"); } } } } function setUpHandler(el) { /*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/ $("#" + IdAry.join(",#")).click(function() { $(this).addClass("selected"); $("#graphics .selected").not(this).removeClass("selected"); }) /*---------This will add show hide class to thier spans and vise versa-------*/ $("#" + IdAry.join(",#")).click( function() { changeText(this, "hide", "show"); }, function() { changeText(this, "show", "hide"); }) } function changeText(obj, cl1, cl2) { obj.getElementsByTagName('SPAN')[0].className = "hide"; obj.getElementsByTagName('SPAN')[1].className = "show"; if (prev && obj !== prev) { prev.getElementsByTagName('SPAN')[0].className = "show"; prev.getElementsByTagName('SPAN')[1].className = "hide"; } prev = obj } 

I want to remove the selected text from the text in the middle when you click on the tag with the <2> tag.

Image to view selected text:

Answer 1

You must clear the text selection after displaying your control; you can do this by calling this function (there must be a fully cross browser):

 function clearSelection() { if (window.getSelection) window.getSelection().removeAllRanges(); else if (document.selection) document.selection.empty(); }