reset variable onclick event

Question

I have a javascript like given below, what it does is, it calls

doSomethingWithSelectedText

function which checks that if any text is selected (using function getSelectedObj ).

getSelectedObj returns an object.

The problem is that div #text gets updated everytime some text is selected. And div #search opens the new google tab searching the highlighted/ selected text.

But it stops updating after that on any other selection.

document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;


function getSelectedObj() {
var selObj = {};
selObj.text = '';
if (typeof window.getSelection != "undefined") {
    selObj.rect = window.getSelection().getRangeAt(0).getBoundingClientRect() ;
    selObj.text = window.getSelection().toString();
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
    // this block not used in new versions of chrome, mozilla and IE11
    selObj.text = document.selection.createRange().text;
}
return selObj;
}


function doSomethingWithSelectedText(e) {

var selectedObj = getSelectedObj();
if (selectedObj.text) {
    document.querySelector('#popup').style.display = 'block';
    document.querySelector('#popup').style.top = e.clientY - 40;
    document.querySelector('#popup').style.left = e.clientX + 20;
    document.querySelector('#text').innerHTML = selectedObj.text;

    document.querySelector('#search').addEventListener('click', function (e)             {
     window.open('https://www.google.com/search?q=' + selectedObj.text);

});

}
else {
    document.querySelector('#popup').style.display = 'none';
    selectedObj.text = '';
}
}

May be it is because of the addEventlistener is defined inside if () of the mouseup event. And it does not get updated. I don't know how to handle this.

index.html

<div id="popup">
    <div id ="text"></div>
    <div id="search" class="fa fa-search"></div>
    <div id="save" class="fa fa-file"></div>
</div>

styles.css

#popup{

display: none;
background-color: orange;
color: white;
position: absolute;
z-index: 1000;
width:100px;
height: 50px;
}

#search,#save {
display: inline-block;
padding: 15px;
font-size: 20px;

}

Answer 1

You should indeed put the event handler outside of your function, as you will be stacking up handlers that all will be executed on the next search click.

Here is an update of your code with the changes marked with *** :

document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;

function getSelectedObj() {
    var selObj = {};
    selObj.text = '';
    if (typeof window.getSelection != "undefined") {
        // ***Additional safety to avoid runtime errors
        if (window.getSelection().rangeCount) {
            selObj.rect = window.getSelection().getRangeAt(0).getBoundingClientRect() ;
            selObj.text = window.getSelection().toString();
        }
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        // this block not used in new versions of chrome, mozilla and IE11
        selObj.text = document.selection.createRange().text;
    }
    return selObj;
}

// ***Variable for retaining the search string
var searchStr = '';
// ***Capture mouseup instead of click, so we can prevent the document level
//  handler to get called.
document.querySelector('#search').addEventListener('mouseup', function (e)             {
    window.open('https://www.google.com/search?q=' + searchStr);
    return false; // ***Cancel bubbling to document.
});

function doSomethingWithSelectedText(e) {
    var selectedObj = getSelectedObj();
    if (selectedObj.text) {
        console.log('text:' + selectedObj.text);
        document.querySelector('#popup').style.display = 'block';
        document.querySelector('#popup').style.top = e.clientY - 40;
        document.querySelector('#popup').style.left = e.clientX + 20;
        // ***Use textContent instead of innerHTML
        document.querySelector('#text').textContent = selectedObj.text;
        // ***Store search string to be used when launching search
        searchStr = selectedObj.text;
    } else {
        document.querySelector('#popup').style.display = 'none';
    }
}