Trouble with getting an alt in html with javascript to change a paragraph

Question

Here is what I have at the moment. This is for my introduction to Computer Programming. What I want is for the hover to say "from country, Hello World!" like here

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!";

Either i'm doing it wrong or need direction to a better(maybe easier?) way to do this, it doesn't matter if my whole code needs changed. I'm stumped. I've tried w3schools and a couple other sites, along with my book but i'm not understanding how to do this.. Thank you everyone in advance!

Answer 1

You could use a map:

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!";

This way you avoid all the if/else if in the code and to add a country, you would only need to add it to the countries object.

Answer 2

getElementById returns an HTML element. It doesn't return an array or anything array-like. HTML elements do not have a 0 property.

Remove the [0] .

Answer 3

Using [0] implies that you want to access the first element of an array (or a NodeList ). However, document.getElementById() does not return an array, it returns an Element . On the other hand, a method like document.getElementsByClassName() would return a NodeList that you could access similar to an array.

I'm a big security guy and I push good security practices whenever I can. When you write something like document.getElementById('someElement').innerHTML = '<strong>woohoo</strong'; , for example, you assume that:

1. An element with ID #someElement exists in document
2. That document.getElementById() will return an Element , which has the property innerHTML. (of course, in this case this is always true.)

I just want to recommend that you never trust data received by your functions. Always validate that the data you're about to manipulate was actually passed (it's not undefined ) and that it's the type you'd expect (such as number , string , Element , etc.)

I'd also recommend using a switch statement instead of all those if/else statements. Consider the following snippet:

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!";

Answer 4

Working code from your example:

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);

DEMO: http://codepen.io/miguelmota/pen/epdRmq