Calling Document Object in Separate JS File?

Question

I'm guessing this is a stupid question but I'm having a lot of trouble with this simple function:

--Sits in .js file--

function GetAssets() {
    alert("Hello World!");
    document.getElementById("asset_summary").innerHTML = "Test";
}

--sits in html.erb file--

<script type="text/javascript" src="jslogic/overview_summary.js"></script>
<script>GetAssets();</script>

I know the function call works b/c I can comment out the document.getElementByID line and then get an alert. I know the document.getElementByID works because I can copy/paste it into a script tag and it runs. So something must change in the syntax when you move this call to an external file? I'm sure this is easy but I can't find the right reference to fix it. Thanks in advance!

Clarifying the buried question: this function doesn't run properly and I'm assuming it's because of the document.getElementByID attribute on line 3 - if it is, could someone explain how I need to change this? If it's not, can someone explain why this works within the html script tags but not as a separate function?

Welcome to Stack Overflow! Can you please clarify your question? I don't understand what you need here. — Wais Kamal, Aug 31 '20 at 12:45
Sorry, this function doesn't run properly and I'm assuming it's because of the document.getElementByID attribute on line 3 - if it is, could someone clarify how I need to change this? If it's not, can someone explain why this works within the html script tags but not as a separate function? — RainySundays, Aug 31 '20 at 12:50
Moving a script from inline to an external file won’t make any difference. People often make other changes at the same time which cause problems, but the most common one of those would, given the code provided, cause the alert to fire successfully and *then* the next line to error. — Quentin, Aug 31 '20 at 12:56
I didn't think this was relevant, but in case it is... I get the following error on my terminal: ActionController::RoutingError (No route matches [GET] "/Peredrift/jslogic/overview_summary.js"): I'm working on figuring out how to clean this up to and I assumed they are unrelated because the alert function runs without the document call, but maybe I'm wrong? — RainySundays, Aug 31 '20 at 13:03

score 0 · Accepted Answer · answered Aug 31 '20 at 15:19

0

First of all please rename your function GetAssets() to getAssets()

Rule of thumb: function names should be camelCase. PascalCase are for class names. Read JavaScript naming convention to learn more.

In your javascript file you declared your function but you never invoked it.

//Goes in your javascript file
function getAssets() {
    alert("Hello World!")
}
//Invoke the function
//getAssets()
//is commented so we can use a button in the html file to call the function

Then in your HTML file just remove the line: <script>GetAssets();</script>

But if you want to run your function from the html you can use a button for it.

<button onClick="getAssets()">Get Assets</button>

All this is assuming that your html and your javascript files are linked correctly.

function getAssets() {
    alert("Hello World!");
    let divAssets = document.getElementById("asset_summary")
    divAssets.innerHTML = "<h3>Test</h3>"
}

<div>
  <h1>hola mundo</h1>
  <button onClick="getAssets()">Get Assets</button>
  <br />
  <div id="asset_summary">
    <h1>Sumary 1</h1>
  </div>
</div>

answered Aug 31 '20 at 15:19

jdromero88

148
1
6

Thanks, you helped me with two pieces here, though now I've got a different root issue. I needed to call the function so that makes sense. And then the file reference is (still) wrong - I thought I had the right linking because I had the file included as required in my application.js file (so it called the alert when the page loaded) but I can't actually access it from the html file (I created a button and it won't call the function). Time to look into this now, thanks for the help. – RainySundays Sep 01 '20 at 02:15
Yes, just starting out so there's a lot of built in functionality I'm still learning how to use and, unfortunately, this whole pathing thing is just eating my lunch. Even using an absolute path as the src to try and remove any error, I'm not having any luck.. Let the debugging continue ;) – RainySundays Sep 01 '20 at 13:03
@RainySundays you can try this: in your rails app put your js files inside ```assets/javascripts``` then use the javascrpt_include_tag ```javascript_include_tag "fileName"``` and then check the html to see what this generated. [javascript_include_tag](https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/javascript_include_tag) – jdromero88 Sep 01 '20 at 19:43
Thanks again, that helped narrow things down - for some reason, even though my .js file is within the right folder now, it's not finding it inside the asset pipeline. Been trying to read articles but it seems like being in the correct folder should be enough to put it in the pipeline; sorry to keep bugging you but what am I missing? – RainySundays Sep 02 '20 at 01:39
Ok, fixed that problem by specifying the folder structure but I still can't get this silly button to work! – RainySundays Sep 02 '20 at 02:39
Cool! OK, can you share the ``` – jdromero88 Sep 02 '20 at 02:46

Calling Document Object in Separate JS File?

1 Answers1