[英]Return object from array to html javascript
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. 我有一个带有不同链接的html文件,如果将鼠标悬停在它们上面,我以前通常会在工具提示中提供该公司的描述。 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.
我试图在这里用JSON和CSV将所有内容都分离为JSON,但是我无法在此处将公司的“说明”重新添加到html中。
If I hover over a link it will start an OnMouseOver event and define a variable "manu" with the name of the manufacturer. 如果将鼠标悬停在链接上,它将启动OnMouseOver事件,并使用制造商的名称定义变量“ manu”。 Then it will return the description of the manufacturer at the end of the function openManu.
然后它将在函数openManu的末尾返回制造商的描述。 I need to then take that returned string and insert it into the html in the object with ID = content.
然后,我需要获取返回的字符串,并将其插入ID = content的对象的html中。 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. “ content” div应该与MouseEvent clientX和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 HTML manu
在你的函数的顶部为一个空字符串,否定你在从你的HTML传递 for
loop wasn't changing a variable or returning anything usable for
循环没有更改变量或返回任何可用的东西
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.