Develop Reference

Issue running function from external js file

I am trying to do something which I feel should be elementary and basic but it is not working. I have looked at many related Stackoverflow QAs but none covers this exact issue.
I want to run a function from an external js file called main.js. The file is loaded at the bottom of the body section of an html page in the usual way. All contents of the file is within the standard jQuery wrappers. I know it is loading properly because I can see it in Developer Tools and various animations coded in it are running correctly. I have jQuery 3.3.1 loaded in the head section of the page and again it must be loading properly because the animations are working.
As a test I have the following function in main.js:
function alerttest() {
alert('Function test works');
}
Then in the main body of the html page I call the function as follows:
<script>
alerttest();
</script>
So when I refresh the page I should get an alert but this does not happen. I get an error in the console:
Uncaught ReferenceError: alerttest is not defined.
This would happen if I loaded scripts in the wrong location so I also tried this to call the function so the DOM would be loaded first:
<script>
$(function() {
alerttest();
});
</script>
but I get the same Reference error. Can anyone suggest what is going on?
Environment: Windows 10, VSCode, Codeigniter 3, jQuery 3.3.1, WAMP with PHP 7.4.7

I believe I have solved the problem and, as I suspected, it was about the location of scripts. I have always been advised to include scripts at the bottom of the page just above the closing body tag but this didn't work in this instance. I have now located my main.js in the head section along with the jQuery CDN and everything works just fine.
Many thanks for responding.

Injecting chrome extension UI using shadow DOM

I am very new to HTML and the complete web world wrt development. I am trying to create a chrome extension and have decided upon showing the extension UI to the user by injecting a content script when the browser action is clicked. I have created an HTML page for the UI to be shown and now I need to load this HTML page as a small widget somewhere on the right top of the current page (to appear like a popup). From the different things looked up on the internet, I have decided to use shadow DOM but have no clue how to do all this. Can someone help me with a sample code to help me go ahead with this? I am not able to write a javascript that would be used as the content script to do the above mentioned job.
Edit 1: After some more reading, I found out out that we need to create the element hierarchy using javascript and cannot directly make use of any created HTML page. Is that correct? And if we have to make use of javascript, should make use of calls to document.createElement and add element? or document.write?

Just compiling reference from the responses I've got in this thread:
My Background.js:
function hello() {
chrome.tabs.executeScript(null, { file: "injectedScripts/jquery-2.1.3.min.js" }, function () {
chrome.tabs.executeScript(null, { file: "injectedScripts/a.js" });
});
}
// Supposed to Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(hello);
Injected Script a.js:
$.get(chrome.extension.getURL("popup.html"), function (data) {
//$(data).appendTo('body');
// Or if you're using jQuery 1.8+:
$($.parseHTML(data)).appendTo('body');
});
Also added popup.html and a.js paths to web_accessible_resources in manifest.json

For Chrome extension content scripts you'll only be able to inject JavaScript/CSS. You won't be able to have you're own HTML popup page like when using browserAction.
With JavaScript you'll need to dynamically create elements and insert them into the DOM. You're on the right track. You can use document.createElement or a library like jQuery to help with DOM manipulation as you get more familiar with web dev.

Jquery.min.js conflict

My site has a problem when I use the following type function located in the header:
<script>
$(document).ready(function() {
$('#showVolunteer').click(function() {
$('.vol_info').slideToggle("fast");
});
});
</script>
I have to include the following line of code in order to get it to do what I want within the site:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
The above function, is used in the link "How to Volunteer..." on the main page and allows for the expanding and collapsing of data. However, when I call the jquery.min.js library as I have, it causes the featured content show to stop rotating pictures every six seconds. When I remove the line:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
the slide show refreshes normally and the "How to Volunteer..." link STOPS working. I cannot get them both working together.
I realize that wordpress includes a copy of jquery.js at the following location \wp-includes\js\jquery\jquery.js which is the non compressed version, but somehow my function above does not recognize what is in this library. It only recognizes jquery.min.js when called in the fashion above.
My question is, what do I need to do to get the expand and collapse data link working on the front page TOGETHER with the featured content rotator changing the picture every few seconds? In other words BOTH working at the same time.
Should I place all my functions (similar to the ones above) in a .js file that is already resident in wordpress?
thanks

This question has been resolved. Apparently, you're not suppose to use the $ symbol in Wordpress .js files, as it is used by other libraries and causes confusion within calls to jQuery. Instead, you have to use "jQuery" in place of the "$" symbol. Once this was done, everything worked as it should.
jQuery() NOT $() for Wordpress.

jQuery tabs is loaded but not working in WordPress

I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!

I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.

Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.

Javascript Function Not Defined On Click Event, But Works on Page Load?

I have a Wordpress site set up on my local machine where I'm building a custom theme. In an 'enqueue-assets.php' file, I am using wp_enqueue_script to load a main bundle javascript file. In that bundle are additional imports of other .js files. In one of the imported .js files is the following function:
function svgPageJump(target){
alert(target);
}
I also tried assigning the function to variable, just to make sure I got the same results explained below:
let svgPageJump = function(target){
alert(target);
};
and
var svgPageJump = function(target){
alert(target);
};
When I call this function in the same .js file with .ready():
$(document).ready(function(){
svgPageJump('section-plan');
});
I get the alert when the page loads, as expected. I also get the alert by just calling it after the function declaration (also as expected.)
Unfortunately this isn't working on click events elsewhere on the page. Ultimately I'm trying to get these events to fire when clicking elements in a SVG, to create page jumps. On the clickable elements I'm using:
onclick="top.svgPageJump('section-plan');"
Clicking on the element gives me this error:
Uncaught TypeError: top.svgPageJump is not a function
at SVGGElement.onclick
At first I thought it was a targeting issue from the SVG, but I did another test on a bit of text elsewhere on the page. In a Gutenburg Heading Block in a Wordpress Page, I placed the following markup using the HTML editor for the block:
<h2 id="section-plan" onclick="svgPageJump('section-plan');">PLAN</h2>
I also did this in a Custom HTML Block, but either way when I click the h2 on the actual page I get this error:
Uncaught ReferenceError: svgPageJump is not defined
at HTMLHeadingElement.onclick
I'm obviously missing something (probably something simple) but not sure how to track the problem down between the theme's files (which are all working correctly otherwise) or the event being defined in the page via the Wordpress admin, or...?
Another note on this... I originally used the simpler approach to making these page jumps using anchor tags and associated ids. This worked fine but I have a sticky header on the page so when the page scrolls, the element with the id scrolls under the header so I am attempting to use JavaScript/jQuery to account for the header height.
Thanks!

As per this question (which I'd close as a duplicate of it if has an upvoted answer):
var in the top level of a non-module script will create a property on the window object. So will using a function declaration. You can access this from a frame via top.
let does not create a property on the window object, so you can't access it that way if you use let.