Javascript onmousehover事件连接信息

时间:2017-11-16 18:05:46

标签: javascript

因此,在我的代码中,我创建了一个从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;
}
}
}
}

1 个答案:

答案 0 :(得分:0)

您可以尝试使用addEventListener方法,看看它是否有效?

android:checked="@={com.example.stackoverflow.MyConversions.myUnbox(viewModel.value)}"

或者使用您创建的原始循环

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

我不是什么专业人士,我在这些事件监听函数中经常遇到的一个常见问题是调用全局函数有时会失败,但是在事件监听器内部使用函数会像addEventListener一样工作( &#34; onmouseover&#34;,function(){return 0;});