2

I have an external js file with one function that I am trying to test. I cannot get the function to call from a onclick.

I had an init function and I removed the call to that and just called the loadJSON function directly, but no matter what I do I get a reference error.

I looked into these questions. Uncaught exception: ReferenceError: Undefined variable: $

Function is not defined - uncaught referenceerror

neither seemed to help.

function loadJSON(){
var xobj = new XMLHttpRequest();

// must set the mime type 
xobj.overrideMimeType("application/json");

// Open the JSON file
xobj.open('GET', 'json/data.json', true);

xobj.onreadystatechange=function(){
    if(xobj.readyState == 4 && xobj.status == "200"){
        // Required use of an anonymous callback as 
        // .open will NOT return a value but simply 
        // returns undefined in asynchronous mode
        console.log(xobj.responseText);
    }
};
xobj.send(null);
}

https://codepen.io/awschneider-dev/pen/LKKxyq?editors=1010

see codepen for example

All I want is for the JavaScript to pull the Json then I can start saving it in a JavaScript Object so I can dynamically start building a d3 chart with the data. I do use live-server with Node.JS so I can do the xml request on the JSON file, so I know that isnt the issue.

any and all help is appreciated.

Thank you!

****EDIT - My bad, I originally had the () after loadJSON but removed it as a last ditch effort just to see if it would work. I will fix the pen. My apologies"****

****EDIT 2 - I moved the script to be inline, and when I execute in NodeJS Live-Server the line console.log(xobj.responseText); is returning the entire source code for the html page. Thats interesting! What in the devil is going on here?****

****EDIT 3 - Added screenshot for Techie_28. When I click on the "Unexpected Token <" error for main.js all it does it show all the source code for the html page, as if the html page is somehow being dumped into the .js file. ****

****EDIT 4 - Added screenshot to show what appears when clicking on the "Unexpected token" error. I click on the link to main.js and all it does is show me the index.html page like somehow the html page is being dumped into the .js file. ****

screenshot of console

Screenshot of what the console shows if I click on the unexpected token error

Adam Schneider
  • 275
  • 1
  • 5
  • 18
  • 1
    The function call `onclick="loadJSON"` should be `onclick="loadJSON()"`. – random Jul 15 '19 at 13:11
  • read my edit. I removed it just as a testing thing, I forgot to add it back in before I posted my question. Sorry for the confusion. Will fix my pen to reflect that. – Adam Schneider Jul 15 '19 at 13:27
  • This could be related to the location where you have defined the function or the name `loadJSON` being overridden somewhere. – techie_28 Jul 15 '19 at 13:31
  • since this was just me purely testing, what you see in my CodePen is actually all I have. I had it in a much bigger project but I took this portion out just to test and see what the issue was and it just makes zero sense to me. Is it something with Node.JS live-server that I dont understand? – Adam Schneider Jul 15 '19 at 13:40
  • How so @techie_28 ? – Adam Schneider Jul 15 '19 at 15:27
  • 1
    Please post in the screenshot of what your browser `console` says when you click the button. The button & `loadJSON` may not be existing in the same scope. Also check for parse or other errors when the page loads which would also be seen in `console`. use `F12` to invoke & refresh the page `console` must be recording some JS error. – techie_28 Jul 16 '19 at 05:36
  • added a screenshot – Adam Schneider Jul 16 '19 at 16:34

0 Answers0