Return object from array to html javascript

Question

I have an html file with different links and if you hover over them I used to have a tooltip come up with the description of the company. I am trying to separate this all out with JSON and CSV to JSON here but I can't get the 'description' of the company back into the html here.

If I hover over a link it will start an OnMouseOver event and define a variable "manu" with the name of the manufacturer. Then it will return the description of the manufacturer at the end of the function openManu. I need to then take that returned string and insert it into the html in the object with ID = content. I think there is just something fundamentally wrong with my code and I need help finding what it is.

The "content" div is supposed to follow the mouse cursor around with MouseEvent clientX and clientY.
It should contain the description text correspondent with the manufacturer.

function openWeb(URL) {

  window.open(URL);}



function openManu(manu) {

    var manu = ""

    var arr =   [

      {

        "Manufacturer": "Generic Company",

        "Description": "Brief description of said generic company"

      },

      {

        "Manufacturer": "Different company",

        "Description": "A description of this different company"

      }

    ]



    for (var i=0; i<arr.length; i++){

      var obj = arr[i];

      var m = obj["Manufacturer"];

      if (manu == m) {

        return obj["Description"];

      }



    var desc = func("openManu")



    try {

      document.getElementById('content').innerHTML = desc

    }



}







return "";



var tooltipSpan = document.getElementById('content');



window.onmousemove = function (e) {

    var x = e.clientX,

        y = e.clientY;

    tooltipSpan.style.top = y + 'px';

    tooltipSpan.style.left = (x + 20) + 'px';

}

//if mouse leaves link area, hide text file container

function mouseOut()

{

	document.getElementById('content').style.display = 'none'

}



}

<div id="content"></div>



<pre style="float:left;">

<a onmouseover="openManu('Generic Company')" onmouseout="mouseOut()" onClick="openWeb('http://www.stackoverflow.com/')">Generic Company</a>

<a onmouseover="openManu('Different company')" onmouseout="mouseOut()" onClick="openWeb('http://www.stackoverflow.com/')">Different Company</a>

</pre>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

function openManu(manu) {
   document.getElementById('content').style.display = 'block'
    var arr =   [
      {
        "Manufacturer": "Generic Company",
        "Description": "Brief description of said generic company"
      },
      {
        "Manufacturer": "Different company",
        "Description": "A description of this different company"
      }
    ]
    
    var desc
    
    for (var i=0; i<arr.length; i++){
      var obj = arr[i];
      var m = obj["Manufacturer"];
      if (manu == m) {
        desc = obj["Description"];
      }
    }
    document.getElementById('content').innerHTML = desc
}


window.onmousemove = function (e) {
    var tooltipSpan = document.getElementById('content');
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y - 20) + 'px';
    tooltipSpan.style.left = x + 'px';
}
//if mouse leaves link area, hide text file container
var mouseOut = function(){
  document.getElementById('content').style.display = 'none'
}

#content {
  position: absolute;
  background-color: grey;
  opacity: 0.75;
  border: 1px solid black;
  color: white;
 }

<div id="content"></div>

<pre style="float:left;">
<a onmouseover="openManu('Generic Company')" onmouseout="mouseOut()" onClick="openWeb('http://www.stackoverflow.com/')">Generic Company</a>
<a onmouseover="openManu('Different company')" onmouseout="mouseOut()" onClick="openWeb('http://www.stackoverflow.com/')">Different Company</a>
</pre>

A few issues -

on mouseOver, change the display back to block (or whatever)
problems with scope within your various functions
you were redefining manu to an empty string at the top of your function, negating what you passed in from your HTML
your for loop wasn't changing a variable or returning anything usable
some functionality that I assume you didn't want in your for loop was nested inside it. Proper indentation will help you notice these issues.
something I have come to learn when working with UI - tooltips are best displayed above what you're hovering over since most people scroll top to bottom

Return object from array to html javascript

Sign up