Скачать или смотреть Why is the Code at the Bottom Not Executed? Understanding JavaScript vs jQuery

Discover why your JavaScript code isn’t executed as intended and learn the difference between JavaScript and jQuery for window resizing.
---
This video is based on the question https://stackoverflow.com/q/63249208/ asked by the user 'wallzry' ( https://stackoverflow.com/u/13165413/ ) and on the answer https://stackoverflow.com/a/63249397/ provided by the user 'Nahuen' ( https://stackoverflow.com/u/4138246/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Why is the code at the bottom not executed?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Why is the Code at the Bottom Not Executed? Understanding JavaScript vs jQuery

Have you ever faced an issue where your code simply doesn't run as expected? You're not alone! Many developers encounter problems that can be difficult to troubleshoot. In this guide, we will explore a specific scenario: a developer is confused about why the code at the bottom of their JavaScript file isn't executing properly. By the end of this post, you'll understand the difference between JavaScript and jQuery and how to fix the issue at hand.

The Problem: Code Not Recognized

The developer has a well-structured JavaScript file that includes a function to trigger a navigation animation on click. However, they faced a challenge with the functionality intended to change the inner HTML of a link based on the window size. Here’s the original JavaScript for managing the link text on a viewport resize:

[[See Video to Reveal this Text or Code Snippet]]

The developer expressed confusion over why this part of the script is not being recognized or executed.

The Solution: Different Approaches for Different Libraries

1. Understanding the Issue

The main issue here is that the resize event is written incorrectly for a plain JavaScript environment. The code uses window.resize, which is actually a jQuery method, not native JavaScript. In JavaScript, the correct method to listen for resize events is window.onresize. There's also a common mistake present: innerwidth should be innerWidth to reference the correct property.

2. How to Fix the Code

Here’s how you can rewrite the resize functionality using plain JavaScript:

[[See Video to Reveal this Text or Code Snippet]]

Key Changes Made:

Using onresize: Replaced window.resize with window.onresize to correctly bind the resize event in JavaScript.

Correct Property Name: Changed window.innerwidth to window.innerWidth to correctly reference the viewport's width.

Element ID Matching: Ensure that the ID used in document.getElementById() matches the ID in your HTML.

3. HTML Element Update

You should also ensure that your HTML reflects the right ID that your JavaScript is targeting. Here’s the updated HTML:

[[See Video to Reveal this Text or Code Snippet]]

With these adjustments, your code should now function correctly, updating the link text as the window size changes.

Conclusion

In summary, the confusion arose from using a jQuery method in a pure JavaScript file. By converting to the correct JavaScript methods, you can achieve the desired result. As you continue to develop, keep in mind the differences between JavaScript and jQuery, as they can significantly impact how your code runs.

If you have any further questions or run into similar issues, don’t hesitate to ask for help in forums or communities dedicated to coding. Happy coding!