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)
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?
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.
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.