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>
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 -
manu
to an empty string at the top of your function, negating what you passed in from your HTMLfor
loop wasn't changing a variable or returning anything usable