JavaScript href toString() Checking if string is empty not giving desired results

Question

I'm checking if the href is empty and if so, then the JavaScript if statement

if ((ext_url_1).toString() != "") {

should not run its commands.

But so far whether the href is empty or not, the if statement still runs the commands which sets the <tr> to display: block.

By default the <tr> is set to display: none in the css style.

The JavaScript should only set the <tr> to display: block if the href is not empty.

I have to use JavaScript, not jquery.

Do you see any problem with the code?

<style>
#externaldocTR1 {
    display: none;
}
</style>

<tr id="externaldocTR1">
  <td>
    <img id="externaldocImg1" src="pdf.gif"> <a id="externaldocURL1" href="">document</a>
    <span id="externaldocExt1"></span>
  </td>
</tr>


<script>

function file_get_ext(filename)
{
return typeof filename != "undefined" ? filename.substring(filename.lastIndexOf(".")+1, filename.length).toLowerCase() : false;
}

var ext_url_1 = document.getElementById("externaldocURL1").href;
var ext_url_2 = document.getElementById("externaldocURL2").href;
var ext_url_3 = document.getElementById("externaldocURL3").href;

var ext_1 = file_get_ext(ext_url_1);
var ext_2 = file_get_ext(ext_url_2);
var ext_3 = file_get_ext(ext_url_3);

var icon_pdf = "pdf.gif";
var icon_word = "word.gif";
var icon_excel = "excel.png";
var icon_img = "jpg.png";

var src_1 = document.getElementById("externaldocImg1");
var src_2 = document.getElementById("externaldocImg2");
var src_3 = document.getElementById("externaldocImg3");


    if ((ext_url_1).toString() != "") {
    document.getElementById("externaldocTR1").style.display = "block";
    document.getElementById("externaldocExt1").innerHTML = " (" + (ext_1).toUpperCase() + ")";
      if (ext_1 == "pdf") { ( (src_1).src = icon_pdf); }
      else if (ext_1 == "DOC" || ext_1 == "DOCX" || ext_1 == "RTF") { ( (src_1).src = icon_word); }
      else if (ext_1 == "XLS" || ext_1 == "XLSX" || ext_1 == "CSV") { ( (src_1).src = icon_excel); }
      else if (ext_1 == "JPG" || ext_1 == "JPEG" || ext_1 == "GIF" || ext_1 == "PNG") { ( (src_1).src = icon_img); }
      else { ( (src_1).src = "");
      }
    }


</script>

Answer 1

rather than try to fetch the href property of element by doing

var ext_url_1 = document.getElementById("externaldocURL1").href;

try

var ext_url_1 = document.getElementById("externaldocURL1").getAttribute("href");

since this href property may not be supported on all browsers