Js variable of span classes undefind in if statment [duplicate]

Here's my entire js code:

var htmlLang = document.documentElement.getAttribute("lang");
var en = document.getElementsByClassName("en");
var es = document.getElementsByClassName("es");

if(htmlLang == "en"){
    es.style.display = "none";
} else if(htmlLang == "es"){
    en.style.display = "none";
}

And here are the HTML elements I'm trying to modify:

<td><a href='register.php'><span class='en'>Register</span><span class='es'>Registrar</span></a></td>
<td><a href='about.php'><span class='en'>About Me</span><span class='es'>Sobre mi</span></a></td>
<td><a href='login.php'><span class='en'>Log In</span><span class='es'>Iniciar sesi&otilde;n</span></a></td>

When I launch the page, I get the error:

Uncaught TypeError: Cannot set property 'display' of undefined at main.js:6 < Which is at the "es.style..." in the js.

To me everything looks right and I thought it had to do with scope, but putting the whole variable (document.getElements...) in the if statement I get the same error.

Thanks to anyone who can help!