html5滑块破坏javascript

我有一个网站，它使用两个滑块来更改画布上显示的直线的坡度和y轴截距。使用滑块更改坡度时效果良好，但由于某些原因，使用滑块进行y轴截距时会中断

“严格使用”；
//瓦尔斯
var ctx=document.getElementById（'mahcanvas'）.getContext（'2d'）；
变量形状；
常数pi=Math.pi；
ctx.lineWidth=2；
//功能
//建设者
功能点（x，y）{
这个.x=x；
这个。y=y；
this.array=[x，y]；
}
功能线（坡度，yint）{
这个斜率=斜率；
this.yint=yint；
this.eval=函数（n）{
返回this.slope*n+this.yint；
};
this.intersect=函数（直线）{
返回（Number（line.yint）-Number（this.yint））/（this.slope-line.slope）；
};
}
var line1=新线（5,50）；
var line2=新线（1200）；
setInterval（函数（）{
ctx.clearRect（0,0500500）
line1.slope=document.getElementById（'s1'）。值/10；
//document.getElementById（'debug'）。innerHTML=document.getElementById（'s2'）。value.toString（）；
line1.yint=document.getElementById（'s2'）。值；
//画
ctx.beginPath（）；
ctx.arc（line1.intersect（line2），line1.eval（line1.intersect（line2）），5,0，pi*2）；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.moveTo（0，第1行评估（0））；
ctx.lineTo（500，line1.eval（500））；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.moveTo（0，第2行评估（0））；
ctx.lineTo（500，line2.eval（500））；
ctx.stroke（）；
ctx.closePath（）；
}, 20);
document.addEventListener（'keydown'，函数（事件）{
line1.yint=编号（事件键）*100；
});
正文{
文本对齐：居中；
保证金：0；
背景色：红色；
}
帆布{
背景色：白色；
保证金：0；
}

标题
你好


正如我在评论中指出的，您只需要将滑块值转换为一个数字

带有固定行注释的代码副本，
/*BM67…


“严格使用”；
var ctx=mahcanvas.getContext（'2d'）；
变量形状；
常数pi=Math.pi；
ctx.lineWidth=2；
功能点（x，y）{
这个.x=x；
这个。y=y；
this.array=[x，y]；
}
功能线（坡度，yint）{
这个斜率=斜率；
this.yint=yint；
this.eval=函数（n）{
返回this.slope*n+this.yint；
};
this.intersect=函数（直线）{
返回（line.yint-this.yint）/（this.slope-line.slope）；
};
}
var line1=新线（5,50）；
var line2=新线（1200）；
setInterval（函数（）{
ctx.clearRect（0,0500500）
line1.slope=s1.value/10；//将/转换为数字
/*BM67固定线路-------------------------------------*/
line1.yint=编号（s2.值）；
/*----------------------------------------------------------*/
ctx.beginPath（）；
ctx.arc（line1.intersect（line2），line1.eval（line1.intersect（line2）），5,0，pi*2）；
ctx.fill（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.moveTo（0，第1行评估（0））；
ctx.lineTo（500，line1.eval（500））；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.moveTo（0，第2行评估（0））；
ctx.lineTo（500，line2.eval（500））；
ctx.stroke（）；
ctx.closePath（）；
}, 20);
document.addEventListener（'keydown'，函数（事件）{
line1.yint=编号（事件键）*100；
});
正文{
文本对齐：居中；
保证金：0；
背景色：红色；
}
帆布{
背景色：白色；
保证金：0；
}

标题
你好


change
line1.yint=document.getElementById（'s2'）.value
to
line1.yint=Number（document.getElementById（'s2'）.value）当您尝试使用滑块控制y轴截距时，它是如何“断开”的？您注释掉了一行设置id为“debug”的
h1
的值。在代码未注释掉的情况下运行时，该值发生了什么变化？