使用两个相同的JavaScript

Question

I've been trying to create a page with several before and after images (Using a slider to swap between the two).

However when I add the second piece of JavaScript code, it breaks the page. Even if I try to amend the (var) code to be unique from the previous script

In all honesty I don't quite understand what the JavaScript is doing which is why I'm probably unable to Google the solution. Any help would be appreciated, if you could try to explain in as much detail what I need to do and explain any specific terms that would help me develop further.

You can see all my code on the link (and below): http://codepen.io/sn0wm0nkey/pen/DakbA

 var inkbox = document.getElementById("inked-painted"); var colorbox = document.getElementById("colored"); var fillerImage = document.getElementById("inked"); inkbox.addEventListener("mousemove",trackLocation,false); inkbox.addEventListener("touchstart",trackLocation,false); inkbox.addEventListener("touchmove",trackLocation,false); function trackLocation(e) { var rect = inked.getBoundingClientRect(); var position = ((e.pageX - rect.left) / inked.offsetWidth)*100; if (position <= 100) { colorbox.style.width = position+"%"; } } /* -----second JavaScript code---- */ var inkbox1 = document.getElementById("inked1-painted"); var colorbox1 = document.getElementById("colored1"); var fillerImage1 = document.getElementById("inked1"); inkbox1.addEventListener("mousemove",trackLocation,false); inkbox1.addEventListener("touchstart",trackLocation,false); inkbox1.addEventListener("touchmove",trackLocation,false); function trackLocation(e1) { var rect1 = inked.getBoundingClientRect(); var position1 = ((e1.pageX - rect1.left) / inked1.offsetWidth)*100; if (position1 <= 100) { colorbox1.style.width = position1+"%"; } } 

 body { background: #113; } div#inked-painted { position: relative; font-size: 0; -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } div#inked-painted img { width: 100%; height: auto; } div#colored { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg); position: absolute; top: 0; left: 0; height: 100%; width: 50%; background-size: cover; } div#inked-painted:hover { cursor: col-resize; } /*-------- second css sheet --------- */ div#inked1-painted { position: relative; font-size: 0; -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } div#inked1-painted img { width: 100%; height: auto; } div#colored1 { position: absolute; top: 0; left: 0; height: 100%; width: 50%; background-size: cover; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg); } div#inked1-painted:hover { cursor: col-resize; } 

 <Div> <div id="inked-painted"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" id="inked" alt> <div id="colored"></div> </div> <p></p> <div> <div id="inked1-painted"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" id="inked1" alt> <div id="colored1"></div> </div> 

Answer 1

First, Java != JavaScript. They are two very different languages.

Second, your issue is that your second function is named the same as your first function. The second one essentially overwrites the first one, so the first doesn't exist any longer. Simply use a different name for your second function, and your code works just fine.

However, it would be better to find a way to reuse your first function, instead of having two almost identical functions.

Answer 2

Here is what you are doing with your JavaScript how it is currently written.

1. Declare and assign variables inkbox, colorbox, fillerImage
2. Add event handlers
3. Create a function in the global scope by the name of trackLocation
4. Declare and assign variables inkbox1, colorbox1, fillerImage1
5. Add event handlers
6. Overwrite the trackLocation function in the global scope

All of this is being done synchronously, just as I have it listed here. So, when an event fires on inkbox , it calls the new function that overwrote the original.

Another problem that I see (unless you omitted some code) is you have some variables that are not defined, which will cause a problem within your function.

function trackLocation (e) {
    // inked is undefined
    var rect = inked.getBoundingClientRect();

    // inked is undefined
    var position = ((e.pageX - rect.left) / inked.offsetWidth)*100;

    if (position <= 100) { colorbox.style.width = position+"%"; }
}

You'll need to rewrite your function to accept local variables like this:

function trackLocation (e, inked, colorbox) {
    var rect = inked.getBoundingClientRect();
    var position = ((e.pageX - rect.left) / inked.offsetWidth)*100;
    if (position <= 100) { colorbox.style.width = position+"%"; }
}

Now this one function can be reused in all of your event handlers, like this:

function trackLocation (e, inked, colorbox) {
    var rect = inked.getBoundingClientRect();
    var position = ((e.pageX - rect.left) / inked.offsetWidth)*100;
    if (position <= 100) { colorbox.style.width = position+"%"; }
}


var inkbox = document.getElementById("inked-painted");
var colorbox = document.getElementById("colored");
var fillerImage = document.getElementById("inked");
inkbox.addEventListener("mousemove", function (e) { trackLocation(e, inkbox, colorbox); });
inkbox.addEventListener("touchstart", function (e) { trackLocation(e, inkbox, colorbox); });
inkbox.addEventListener("touchmove", function (e) { trackLocation(e, inkbox, colorbox); });

var inkbox1 = document.getElementById("inked1-painted");
var colorbox1 = document.getElementById("colored1");
var fillerImage1 = document.getElementById("inked1");
inkbox1.addEventListener("mousemove", function (e) { trackLocation(e, inkbox1, colorbox1); });
inkbox1.addEventListener("touchstart", function (e) { trackLocation(e, inkbox1, colorbox1); });
inkbox1.addEventListener("touchmove", function (e) { trackLocation(e, inkbox1, colorbox1); });

Answer 3

Howard's solution works but can be improved even more to remove duplication.

• Use classes instead of Ids
• Find the elements inside the div that is receiving the mousemove instead of passing them in
• Don't duplicate the CSS

 function onMouseMove(e) { var inked = this.getElementsByTagName("img")[0]; var colorbox = this.querySelector('.colored'); var rect = inked.getBoundingClientRect(); var position = ((e.pageX - rect.left) / inked.offsetWidth) * 100; if (position <= 100) { colorbox.style.width = position + "%"; } } function trackLocation(el) { el.addEventListener("mousemove", onMouseMove, false); el.addEventListener("touchstart", onMouseMove, false); el.addEventListener("touchmove", onMouseMove, false); } var wrappers = document.querySelectorAll('.inked-painted'); for (var i = 0; i < wrappers.length; i++) { trackLocation(wrappers[i]); } 

 div.inked-painted { position: relative; font-size: 0; -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } div.inked-painted img { width: 100%; height: auto; } .colored { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg); position: absolute; top: 0; left: 0; height: 100%; width: 50%; background-size: cover; } div.inked-painted:hover { cursor: col-resize; } 

 <div class="inked-painted"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" /> <div class="colored"></div> </div> <p></p> <div class="inked-painted"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" /> <div class="colored"></div> </div>