Javascript 使用两个相同的Java脚本

我一直在尝试创建一个包含多个前后图像的页面（使用滑块在这两个图像之间切换）

但是，当我添加第二段JavaScript代码时，它会破坏页面。即使我试图修改（var）代码，使其与前面的脚本不同

老实说，我不太明白JavaScript在做什么，这就是为什么我可能无法用谷歌搜索解决方案的原因。如果您能尽可能详细地解释我需要做什么，并解释任何有助于我进一步发展的具体条款，我们将不胜感激

您可以在链接（及下面）上看到我的所有代码：

var-inkbox=document.getElementById（“涂墨水的”）；
var colorbox=document.getElementById（“有色”）；
var fillerImage=document.getElementById（“inked”）；
inkbox.addEventListener（“mousemove”，trackLocation，false）；
inkbox.addEventListener（“touchstart”，trackLocation，false）；
inkbox.addEventListener（“touchmove”，trackLocation，false）；
功能跟踪定位（e）
{
var rect=inked.getBoundingClientRect（）；
变量位置=（（e.pageX-rect.left）/inked.offsetWidth）*100；
if（positionFirst，Java！=JavaScript。它们是两种截然不同的语言

其次，您的问题是第二个函数的名称与第一个函数的名称相同。第二个函数实质上覆盖了第一个函数，因此第一个函数不再存在。只需为第二个函数使用不同的名称，代码就可以正常工作

但是，最好找到一种方法来重用第一个函数，而不是拥有两个几乎相同的函数。
下面是您使用JavaScript所做的事情，以及它当前的编写方式

声明和分配变量墨水盒、颜色盒、fillerImage
添加事件处理程序
以trackLocation的名称在全局范围内创建函数
声明并分配变量inkbox1、colorbox1、fillerImage1
添加事件处理程序
覆盖全局范围内的trackLocation函数
所有这些都是同步完成的，正如我在这里列出的。因此，当一个事件在
inkbox
上触发时，它会调用重写原始内容的新函数

我看到的另一个问题（除非您省略了一些代码）是您有一些未定义的变量，这将导致函数中出现问题

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+"%"; }
}

功能轨迹定位（e）{
//墨迹未定义
var rect=inked.getBoundingClientRect（）；
//墨迹未定义
变量位置=（（e.pageX-rect.left）/inked.offsetWidth）*100；
if（positionHoward的解决方案有效，但可以进一步改进以消除重复


使用类而不是ID
查找接收mousemove的div中的元素，而不是将它们传入
不要复制CSS


移动鼠标的功能（e）{
var inked=this.getElementsByTagName（“img”）[0]；
var colorbox=this.querySelector（'.colored'）；
var rect=inked.getBoundingClientRect（）；
变量位置=（（e.pageX-rect.left）/inked.offsetWidth）*100；
如果（你要么需要更改函数的名称，要么需要重用第一个函数。我会选择后者，因为它总是鼓励重用。顺便说一句，效果不错，只是这两个函数做的事情完全一样……函数定义也一样。）hoisted@JuanMendes他们做同样的事情，但在不同的组件上做otice
inkbox
和
inkbox1
。是的，函数定义被提升。这就是为什么第一个函数永远不能被使用的原因，因为第二个函数定义是在运行任何其他代码之前重新定义第一个函数。是的，我没有注意到一些变量之后的1
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+"%"; }
}

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); });