This week showed me, how tricky JavaScript can be, especially when you need to do something for your client. Here how it goes: the client wants some functions and you think it simple, no problem I can do this. But after meeting, when you sit down in front of your computer, you wrote code and realized, this functionality isn’t so easy to code. In this post, I share with you my experience of using JS to switch photos on the web page.
Changing photos on the website using JavaScript
The task was easy: when somebody put a cursor on a photo, this photo should change to another. So simple. What can goes wrong? To replace some DOM elements on a Web Page, you need to use event bumbling. That’s because you can’t delete elements, that you point in JS. So you point to an element, that you want to remove, then go one floor up in DOM Tree, and then remove Child. In code, this could like like this:
var element = document.getElementById(selectorID)
element.parentNode.removeChild(element);
After deleting previous code, you can insert new HTML using commend innerHTML and calling parent DOM element. Of course, in this new code, you put all deleted source code, replacing only image source.
This is easy, so where the problem?
If you use javaScript function onMouseOver() to do this, some tricky problems appear. The image will be flashing like a crazy disco ball. How is that? You replace code, and change only image source, so onMouseOver() function will run again, and again until you move the cursor out of the image. It taken me some time before I figure out what’s going on. The solution is very easy. You don’t call onMouseOver() function in replacing code. But this is no end. What if you move cursor out of the image, and then move on the image again? The image wouldn’t change because in the new HTML code there is no onMouseOver() function. That’s not what we want. Lucky there is another javaScript function called onMouseOut(). This function will run when you get the cursor out of the DOM element. Cool, we need something like this. Now we just need to separate injection HTML depend of mouse action and all will be good, and running just like we want.
Is this “JavaScript” problem really hard?
No. But for junior, like me, it’s a tricky one. I replaced a lot of the DOM element until now, but this kind of situation I have for the very first time. That’s why I decided to write about this because you might think just like me. After one year of study Java Script, I know this language, especially for Web Develop purpose. But one day, Java Script can surprise you and you will need some time to discover what’s going on.
Shortly info to boost JavaScript code
At the end of this post: have you ever think about speeding up heavy websites? These days, we have a lot of possibilities to make complex, beautiful, interactive web sites. On the other hand, this big complex web needs a lot of hardware power to run smoothly. So there is some solution to this. You can use GPU for heavy calculations. There is a JavaScript acceleration library for this. I won’t write about it now, because I didn’t use it so far, but I give you a link to a good article about this library:
https://blog.logrocket.com/improving-javascript-performance-with-gpu-js/
That’s all in this post. If you like it or want to share your opinion about this post or blog please use the comment section.
Have a good day.