Running a JavaScript as an external script in Laravel

Question

I have a blade code like this:

<input type='text' id="input1">
<div >
 <h3 id="showData"> Data will be shown here  </h3>

</div>

<script>
  var input=document.getElementById('input1').value;

  document.getElementById('showData').innerHTML=input;
</script>

What I want is to write the script part in a separate file (say called externalScript.js) and call it here in the blade file.

Also, I have a doubt about it. If I do that, since the script is run from an external file, how will it fetch the id values like input1 or showData ?

Aless55 · Accepted Answer · 2021-05-06 05:47:05Z

3

Write a new file called: externalScript1.js

Add the script tag, best in the head or foot part of your code.

    <script src="{{ asset('externalScript1.js') }}" defer></script>

(the asset helper gets the path to the public folder, https://laravel.com/docs/8.x/helpers#method-asset)

In the end everything will load from one page, ergo the elements are found, so you won't have a problem.

answered May 6, 2021 at 5:47

Aless55

2,7092 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Skumar Over a year ago

Thanks a lot. I had to use the same script everywhere, now, all I need to do is use the source

JanuszO · Accepted Answer · 2021-05-06 05:46:03Z

2

Just add js file in laravel resources directory, link to webpack and compile more info.

when it comes to executing the script, attach it at the end of the page (before </body>) or wait for the page to be loaded document.addEventListener('DOMContentLoaded', function() {})

Attach the js file in the main wrapper, not in the nested blade element

answered May 6, 2021 at 5:46

JanuszO

1,26015 silver badges29 bronze badges

Collectives™ on Stack Overflow

Running a JavaScript as an external script in Laravel

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related