使用javascript在html中获取alt以更改段落时遇到问题

这是我目前的想法。这是我对计算机编程的介绍。我想让悬停像这里一样说“来自国家，你好，世界！”

var alt = document.getElementById("picture")[0].alt;
    if (alt=="usa") {
        country = "United States";
    } else if(alt=="ecu"){
        country = "Ecuador";
    }else if(alt == "hai"){
        country = "Haiti";
    }else{
        country = "Turkey";
    }
    document.getElementById("msg").innerHTML = "from " + country + ", Hello World!";

要么我做错了，要么我需要一个更好（也许更容易？）的方法来做这件事，不管我的整个代码是否需要更改。我被难住了。我试过w3schools和其他几个网站，还有我的书，但我不知道如何做到这一点。。提前谢谢大家

您可以使用地图：

var countries = {
    usa: "United States",
    ecu: "Ecuador",
    hai: "Haiti",
    defaultCountry: "Turkey"
};

alt = document.getElementById("picture")[0].alt; // Is [0] correct?
country = countries.hasOwnProperty(alt) ? countries[alt] : countries.defaultCountry;

document.getElementById("msg").innerHTML = "from " + country + ", Hello world!";

---

这样就避免了代码中的所有

if/else if

，要添加国家，只需将其添加到

countries

对象。

getElementById

返回HTML元素。它不返回数组或任何类似数组的内容。HTML元素没有

0

属性

---

从示例中删除

[0]

工作代码：

function away() {
  document.getElementById("msg").innerHTML = "";
}

function clicked(url, alt) {
  document.getElementById("picture").src = url;
  document.getElementById("picture").alt = alt;
  document.getElementById("picture").style.height = "116px";
  document.getElementById("picture").style.width = "220px";

}

function hover() {
  var country;
  var alt = document.getElementById("picture").alt;
  console.log('alt', alt)
  if (alt === "usa") {
    country = "United States";
  } else if (alt === "ecu") {
    country = "Ecuador";
  } else if (alt === "hai") {
    country = "Haiti";
  } else {
    country = "Turkey";
  }
  document.getElementById("msg").innerHTML = ("from " + country + ", Hello World!");
}

document.getElementById("picture").addEventListener('mouseenter', hover);
document.getElementById("picture").addEventListener('mouseleave', away);

---

演示：

使用

[0]

意味着您希望访问数组的第一个元素（或

节点列表

）。但是，

document.getElementById（）

不返回数组，而是返回一个

元素。另一方面，像
document.getElementsByCassName（）
这样的方法将返回一个
NodeList
，您可以类似于数组来访问它

我是一个安全大佬，只要有可能，我就会推行良好的安全措施。当您编写类似于
document.getElementById（'someElement'）.innerHTML='的内容时，欢迎您的评论。。我尝试将其放入代码笔，但每当我将鼠标悬停在其中时，它仍然不会出现在表的第二列中。这将重写问题的一个工作部分，同时保留问题代码的完整性。
var alt=document.getElementById（“picture”）[0]。alt
删除
[0]
使代码正常工作，但所有if语句都是false，else语句是正在执行的。@EvanTheis-您的问题缺少任何HTML，因此很难解释原因。如果我们查看您链接到的站点：
-没有alt属性，因此我不知道您为什么希望它与任何If语句匹配。对不起，我没有保存代码笔。现在修好了，谢谢大家的帮助！非常感谢。现在开始工作了。我得读一下EventListeners，谢谢！：）没问题！还有Downvoter，介意解释一下这为什么不能回答OP的问题吗？
var picture = document.getElementById("picture");
var country = ''; // declare as a string
var message = document.getElementById("msg");

if (! (picture instanceof Element) || ! (message isntanceof Element) ) 
    return; // couldn't find the elements we need

switch (picture.alt.toLowerCase()) { // use toLowerCase() for robustness
    case 'usa':
        country = 'United States';
        break;
    case 'ecu':
        country = 'Ecuador';
        break;
    case 'hai':
        country = 'Haiti';
        break;
    default:
        country = 'Turkey';
}

message.textContent = "from " + country + ", Hello World!";