How to pass parameters to a javascript function from the element that calls the function?

Question

I have a number of <li> items, which call the same onmouseover javascript function. The function needs to extract some data from the element that calls it, to fill some name and tel variables. This data is typed in capitals in the html code below. Any idea on how to do this is really appreciated.

My HTML:

<li id="item1" onmouseover= "onmouseoveragent(this)" >
<a href="some link">
    <span class="hideme">name</span>
</a>
    <p class="hideme"> NAME TO BE PASSED TO JS
    <strong class="tel">NUMBER TO BE PASSED TO JS</strong>
</p>
</li>

MY javascript:

<script language="javascript" type="text/javascript">
    function onmouseoveragent(e) {
        var name = e.?????;
    var tel = e.?????;
};
</script>

Answer 1

yes you do something like this

JAVASCRIPT :

var elements = document.getElementsByClassName('data-item');

var mouseoverHandler = function() {
   var name = this.getElementsByClassName('name')[0].textContent,
       tel = this.getElementsByClassName('tel')[0].textContent;
    alert('Name - ' + name + "\nTel - " + tel);
}

for( var i = 0; i < elements.length; i++ ) {
     var current = elements[i];
     current.addEventListener('mouseover', mouseoverHandler);
}

HTML MARKUP :

<li id="item1" class="data-item"> 
    <a href="some link">
        <span class="hideme">name</span>
    </a>

    <p class="hideme">
        <span class="name">John Smith</span>
        <strong class="tel">555-666-777</strong>
    </p>
</li>

<li id="item1" class="data-item"> 
    <a href="some link">
        <span class="hideme">name</span>
    </a>

    <p class="hideme">
        <span class="name">Caprica Smith</span>
        <strong class="tel">545-334-641</strong>
    </p>
</li>

MDN - document.getElementsByClassName();

MDN - element.textContent

It won't be e.something because e is referring to the event that just happened, that has nothing to do the other elements in the DOM

Demo

Answer 2

Well, there is an easier way to do it, just traverse the childNodes of your current hovered element and parse the results. Here is a working JSFiddle of the snippet below(yes, it works with all the LIs matching that structure):

function onmouseoveragent(e) {
    var children = this.childNodes,
        name = null,
        tel = null;
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
        if (child.tagName === 'P') {
            name = child.firstChild.nodeValue; // the first node is the text node
            tel = child.childNodes[1].firstChild.nodeValue; // the strong's text node
            break; // let's stop the iteration, we've got what we needed and the loop has no reason to go on
        }
    }
    console.log(name, tel); // "NAME TO BE PASSED TO JS " "NUMBER TO BE PASSED TO JS"
}

The only difference in HTML is that you need to pass your handler this way:

<li id="item1" onmouseover="onmouseoveragent.call(this, event)">

So this inside the handler will refer to the element and not to the global object.

Answer 3

I suggest you two thing one change the structure of you li tag ie; make the tag as shown

<li id="item1" class="someClass" >
<a href="some link">
<span class="hideme">name</span>
</a>
<p class="hideme">NAME TO BE PASSED TO JS </p>
<strong class="tel">NUMBER TO BE PASSED TO JS</strong>
</li> 

remove strong from p because when you try to fetch p(data to be passed the strong tag will come along with it so better change it)

and also try jquery it will give you more flexibility and ease of use(what i feel)

$(".someClass").mouseover(function(e){
    var name = $(e.target).find("p:first").html()
    var tel = $(e.target).find("strong:first").html()

})

Answer 4

try this

function onmouseoveragent(e) {

  var text = e.getElementsByClassName('hideme')[1].textContent; var name = text.split("\\n")[0]; var num = text.split("\\n")[1]; alert(name); alert(num); }