Order within script

[phppup]

I guess my first mistake was using an AI program to help me with some code.

Eventually the AI informed me that the file was getting too big for it to produce as a complete file, so I broke it up (around my original code)

<script src="myscripts_A.js"></script>

<script src="myscripts_B.js"></script>

<script>
  
  //original JavaScript stuff
</script>

<script src="myscripts_C.js"></script>

The code worked as well as could be expected.

Then, I decided to put it back as one file, and after I did, certain features and button triggers stopped working.

I haven't fully gotten to troubleshooting this, but is there something about the way JS organizes src files that I need to know?

Edited October 25 by phppup

[gizmola]

Not really, no.

It is likely a scope issue, or a situation where intialization is being done, and a secondary file is redeclaring a variable or changing an event handler.  

This is where the Web developer tools (console, js debugger) should be the first thing you investigate. 

One other thing to mention is that there are many tools used by js/web developers like webpack or node libraries people use to combine js and css files, and minify/add definitions to make your code work better across browser platforms, and allow the use of typescript or sass/scss etc. You might want to look into those tools, as combining multiple js files into one "combined" file is one of the most used features.

[phppup]

That's what the AI told me.

What i don't understand is: Why?

If everything (all functions, listeners, etc.) is 'cut and pasted' in the same order within the full script to duplicate what is within the broken pieces assembly, why should ANYTHING change?

If it works separated, shouldn't it work identically as a unit, @gizmola ?

[gizmola]

Probably because something IS different between the two scenarios, despite your belief that they are exactly the same.

The only other thing that occurs to me to question, is whether or not you have cached versions of any of the included scripts.  It's important when debugging javascript scripts to insure you've cleared your cache.  Shifting into Incognito Mode, installing a browser extension, and validating the code you are actually testing are all techniques that can help, but it is a pervasive problem that confounds even experienced developers at times, and is a challenge for deployment strategies.

We don't have your code, we don't know what the specific issues are, and we can't debug it for you.

To reiterate, you have access to the tools you need to answer this question, built right into your browser.  

Your other option would be to reproduce all the code in snippets, with the hope that someone here would take the time to do the analysis and debugging needed to pinpoint what issues are coming up, but I'd rather teach you to fish.

[maxxd]

It sounds like it may be a hoisting issue as well? JS will hoist a `var` declaration (but not the initialization, so this may very well not be the problem) while `let` and `const` do not hoist even the declaration, let alone the initialization. Without seeing actual code obviously this is grasping at straws but it might be something to look into.

[phppup]

It's an embarrassing situation, but I felt I should post on case someone can be helped in the future.

And yes, @maxxd , that possibility came up in my search for resolution and may be a contributing factor.

At this point however, AI provided a helpful lil script that offered a clue:

document.addEventListener('DOMContentLoaded', () => {
  const applyBtn = document.getElementById('bulkApplyBtn');
  if (applyBtn) {
    alert('✅ Button found!');
    applyBtn.addEventListener('click', onApplyBulk);
  } else {
    alert('⚠️ applyBulkBtn not found in DOM.');
  }
});

and I ultimately discovered that the same AI had jumbled my naming convention (so my ID="orderSubmitBtn" was somehow associated with a listener that was waiting for a click from submitOrderBtn.

Got that worked out in the large single file and things seem to be falling into place.

I still haven't backtracked to see where this kerfuffle began. And there's no telling whether the code will respond differently if broken into smaller attached files again (which I may not endeavor anyway).

One thing for sure @gizmola is that I really do need a crash course in CONSOLE LOG.

To be honest, I've never really used it bc throughout my learning I wasn't introduced to it.  I generally use alerts to troubleshoot JS, but I can see where console will pick up lots of additional pieces for preventative maintenance.

Thanks for helping.

Edited October 30 by phppup

[gizmola]

Here's an overview, including debugging:

 

Once you open the devtools view, "console" is one of the tabs.  Any javascript errors will be displayed there, so that's a good first thing to check.

In your js code you can do this as an alternative to what you were doing:

document.addEventListener('DOMContentLoaded', () => {
  const applyBtn = document.getElementById('bulkApplyBtn');
  if (applyBtn) {
    console.log('✅ Button found!');
    applyBtn.addEventListener('click', onApplyBulk);
  } else {
    console.log('⚠️ applyBulkBtn not found in DOM.');
  }
});

With your dev tools open, and the console tab selected, you'll see those log statements when the page runs.  For situations like this you probably want to open the dev tools view, and then reload the page, so it reinitializes.  FIrefox and Safari have developer tools with these same features, but there are often small differences, and a learning curve that goes into whichever you choose to work with, but you don't have to use Chrome.

[phppup]

@gizmola Thanks, I'll have to take some time and watch it.

Actually, the AI have me the troubleshooting script WITH console.log and I told it to swap for alerts. LOL  It's just the way I know (or discovered... versus learning more properly, but I do see the advantages)