3

I am starting out using JavaScript and I cannot understand why I cannot assign a HTML attribute description to a variable in an external JavaScript function. It works ok when inside the HTML page but will not work in the external script as the variable I am assigning tests out as undefined.

function NewFunction() {

  var x = document.getElementById("Year").href;
  //var x="hello"
  if (x === undefined) {
      alert("x is undefined");
  } else {
      alert("x is defined");
  }
 document.getElementById("demo").innerHTML = x;

I can change demo if I use the var x="hello". However if I try to assign x the document.getElementById("Year").href it reports back as undefined. This code works well inside the source page as a local script.

I am missing something as it seems you cannot assign a variable, information read from the HTML page.

What am I missing? Thanks

Andriy Ivaneyko
  • 20,639
  • 6
  • 60
  • 82
domenico fusco
  • 33
  • 3

3 Answers3

2

Likely problem in the time moment when script is loaded. Just call your function when DOM is ready ( see event DOMContentLoaded for more info).

document.addEventListener("DOMContentLoaded", function(event) { 
  NewFunction()
});

Below is your code ( with func calling on DOM Ready ) and everything seems to work fine. Try to compare with our actual code. 

function NewFunction() {
  var x = document.getElementById("Year").href;
  //var x="hello"
  if (x === undefined) {
      alert("x is undefined");
  } else {
      alert("x is defined");
  }
 document.getElementById("demo").innerHTML = x;
};
document.addEventListener("DOMContentLoaded", function(event) { 
  NewFunction()
});
<a href='123' id='Year'>123</a>

<p id='demo'>123</p>

Good Luck !

Andriy Ivaneyko
  • 20,639
  • 6
  • 60
  • 82
  • Yes it works well when it is embedded into the HTML page. But I am calling it from an external JavaScript file which is activated on a button click once the page has loaded. I must not be able to assign HTML elements in external js code but I am able to modify the page via the code which is what I don't understand. – domenico fusco Jul 05 '16 at 12:16
  • Must apologize to all. Rechecked my HTML code and did not realize that the element I was referencing did not have a href in the element as I was looking at the next item. The item I was actually referencing had a src instead and once I change it to var x =document.getElementById("Year").src; the code did what it was supposed to do. My apologies and thanks for the help I learnt a lot and i will be more careful in my posts – domenico fusco Jul 05 '16 at 13:09
0

You have to put <script> tag to the end of the body, or execute you function in load or DOMContentLoaded listeners.

Qwertiy
  • 19,681
  • 15
  • 61
  • 128
0

Your javascript code is probably running before your DOM (html page) is loaded. You need to wrap your code around a onload function:

window.onload = function() {
  var x = document.getElementById("Year").href;
  //var x="hello"
  if (x === undefined) {
      alert("x is undefined");
  } else {
      alert("x is defined");
  }
  document.getElementById("demo").innerHTML = x;
};
Wikiti
  • 1,626
  • 13
  • 21