Javascript onmousehover情報を接続するイベント

Question

私のコードでは、植物に関する情報を2列表示したXMLファイルからテーブルを作成しました。私のプログラムの目標は、最初のものにカーソルを合わせ、そのプラントに関する他の情報を印刷して、テーブルの右側の別のセクションに印刷することです。問題は、コンソールのエラーを取り消していないことと、ホバーの影響が情報を出力していないことです。

window.addEventListener("load", link_events); 
var xhr = false; 
function link_events() { 
    xhr = new XMLHttpRequest(); 
     if(xhr) { 
      xhr.addEventListener("readystatechange", ShowFile); 
      xhr.open("GET", "plants.xml", true); 
      xhr.send(); 
     } else { 
      alert("XHR not supported."); 
     } 
} 
function ShowFile() { 
    var i; 
    var title; 
    var cover; 
    var plant_table = "<table><tr><th>Common Name </th><th>Botanical Name </th></tr>"; 
    if (xhr.readyState == 4) { 
     if (xhr.status == 200) { 
     //here we have gotten the file correctly 
     //loop through it and print out cover and title 
     var plantlist = xhr.responseXML.getElementsByTagName("PLANT"); 
     //booklist is an array and each element is an object sub i 
     //so you have to use getElementBy something in order to pull the information 
     for (i = 0; i < plantlist.length; i++) { 
      var Common = plantlist[i].getElementsByTagName("COMMON")[0].firstChild.textContent; 
      var Botanical = plantlist[i].getElementsByTagName("BOTANICAL")[0].firstChild.textContent; 
      plant_table += "<tr>" + 
          "<td class =\"plant\">" + Common + "</td>" + 
          "<td>" + Botanical + "</td>" + 
         "</tr>"; 
    } 
     plant_table += "</table>"; 
     document.getElementById("outarea").innerHTML = plant_table; 
    } 
    var plants = document.getElementsByClassName("plant"); 
    for (i=0; i < plants.length; i++) { 
     plants[i].onmouseover = HoverChoice; 
    } 
    } 
function HoverChoice() { 
    var input = xhr.responseXML.getElementsByTagName("PLANT"); 
    for (i = 0; i < input.length; i++) { 
      Common = input[i].getElementsByTagName("COMMON")[0].firstChild.textContent; 
      var Zone = input[i].getElementsByTagName("ZONE")[0].firstChild.textContent; 
      var Light = input[i].getElementsByTagName("LIGHT")[0].firstChild.textContent; 
      var Price = input[i].getElementsByTagName("PRICE")[0].firstChild.textContent; 
    if (plants == this.innerHTML) { 
    document.getElementById("inarea").innerHTML = 
    "<h1>" + Common + "</h1>" + "<br />" + "<br />" + 
    "Zone: " + Zone + "<br />" + 
    "Light: " + Light + "<br />" + 
    "Price: " + Price; 
} 
} 
} 
} 

Answer 1

代わりにaddEventListenerメソッドを使用して動作するかどうかを確認できますか？

plants.forEach(function(plant){ 
    plant.addEventListener("onmouseover", HoverChoice); 
    }); 

またはあなたが作ったオリジナルのループと一緒に行く、それは私が何もプロじゃない

for (i=0; i < plants.length; i++) 
{ 
    plants[i].addEventListener("onmouseover", HoverChoice); 
} 

だろう、私はイベントリスニング機能のこれらの種類に直面するために使用される一般的な問題は、呼び出したということでしたグローバル関数が失敗することもありますが、イベントリスナーの内部の関数をaddEventListener（ "onmouseover"、function（）{return 0;}）のように動作させると、