Javascript 为什么这个HTML表单允许我增加表单中的数字，而不是减少它们？
我已经写了一个HTML页面，其中的标题是一个表单，您可以在其中输入三个数字。每个数字在圆环图中画一个环。如果输入零，则不会绘制环。如果输入50，将绘制半个环。如果输入100，将绘制一个完整的环。有一个绿色的外环，一个橙色的中环和一个蓝色的内环 当我将表单中的数字从0增加时，通过键入或单击在输入字段中增加数字的按钮，然后单击“更新环”，一切正常。但是，当我试图通过降低输入字段中的数字使任何环变短时，单击“更新环”不会使环变短。简而言之，我可以增加百分比值，但不能减少它们 代码如下：Javascript 为什么这个HTML表单允许我增加表单中的数字，而不是减少它们？,javascript,html,css,forms,donut-chart,Javascript,Html,Css,Forms,Donut Chart,我已经写了一个HTML页面，其中的标题是一个表单，您可以在其中输入三个数字。每个数字在圆环图中画一个环。如果输入零，则不会绘制环。如果输入50，将绘制半个环。如果输入100，将绘制一个完整的环。有一个绿色的外环，一个橙色的中环和一个蓝色的内环 当我将表单中的数字从0增加时，通过键入或单击在输入字段中增加数字的按钮，然后单击“更新环”，一切正常。但是，当我试图通过降低输入字段中的数字使任何环变短时，单击“更新环”不会使环变短。简而言之，我可以增加百分比值，但不能减少它们 代码如下： <!DO
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
</style>
<form id="frm1" action="/action_page.php">
Outer Ring Completion %: <input type="number" name="apercent" value="0" min="0" max="100">
Middle Ring Completion %: <input type="number" name="bpercent" value="0" min="0" max="100">
Inner Ring Completion %: <input type="number" name="cpercent" value="0" min="0" max="100">
</form>
<br>
<button onclick="ChangeNums()">Update rings</button>
<br>
</head>
<body onload="ChangeNums()">
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
var outerval;
var middleval;
var innerval;
function ChangeNums() {
var x = document.getElementById("frm1");
outerval = x.apercent.value;
middleval = x.bpercent.value;
innerval = x.cpercent.value;
RenderChart()
};
function RenderChart() {
//Outermost line
var canvas = document.getElementById('myCanvas');
var outerline = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 270;
var startAngle = 1.5 * Math.PI;
var endAngle = ((outerval - 25) / 50) * Math.PI;
//var endAngle = 0.25 * Math.PI;
var counterClockwise = false;
outerline.beginPath();
outerline.arc(x, y, radius, startAngle, endAngle, counterClockwise);
outerline.lineWidth = 30;
// line color
outerline.strokeStyle = 'green';
if(outerval != 0){
outerline.stroke();
}
//Middle line
var middleline = canvas.getContext('2d');
var radiusB = 240;
var startAngleB = 1.5 * Math.PI;
var endAngleB = ((middleval - 25) / 50) * Math.PI;
//var endAngleB = 0 * Math.PI;
var counterClockwiseB = false;
middleline.beginPath();
middleline.arc(x, y, radiusB, startAngleB, endAngleB, counterClockwiseB);
middleline.lineWidth = 30;
// line color
middleline.strokeStyle = 'orange';
if(middleval != 0){
middleline.stroke();
}
//Inner line
var innerline = canvas.getContext('2d');
var radiusC = 210;
var startAngleC = 1.5 * Math.PI;
var endAngleC = ((innerval - 25) / 50) * Math.PI;
//var endAngleC = 0.5 * Math.PI;
var counterClockwiseC = false;
innerline.beginPath();
innerline.arc(x, y, radiusC, startAngleC, endAngleC, counterClockwiseC);
innerline.lineWidth = 30;
// line color
innerline.strokeStyle = 'blue';
if(innerval != 0){
innerline.stroke();
}
}
</script>
</body>
</html>
身体{
边际：0px；
填充：0px；
}
外圈完成百分比：
中环完成百分比：
内圈完成百分比：
更新环
外部变异；
middleval变种；
内侧变异；
函数ChangeNums（）{
var x=document.getElementById（“frm1”）；
外层=x.apercent.value；
middleval=x.bpercent.value；
innerval=x.cpercent.value；
RenderChart（）
};
函数RenderChart（）{
//最外线
var canvas=document.getElementById（'myCanvas'）；
var outerline=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/2；
var半径=270；
var startAngle=1.5*Math.PI；
var endAngle=（（outerval-25）/50）*Math.PI；
//var endAngle=0.25*Math.PI；
var逆时针=假；
outerline.beginPath（）；
外弧（x，y，半径，星形，端角，逆时针）；
outerline.lineWidth=30；
//线条颜色
outerline.strokeStyle='绿色'；
if（outerval！=0）{
外侧线笔划（）；
}
//中线
var middleline=canvas.getContext（'2d'）；
var=240；
var startAngleB=1.5*Math.PI；
var endAngleB=（（middleval-25）/50）*Math.PI；
//var endAngleB=0*Math.PI；
var逆时针方向b=假；
middleline.beginPath（）；
中线。弧（x，y，半径B，星形B，端角B，逆时针B）；
中线。线宽=30；
//线条颜色
middleline.strokeStyle='橙色'；
如果（middleval！=0）{
中线笔划（）；
}
//内线
var innerline=canvas.getContext（'2d'）；
var radiusC=210；
var startAngleC=1.5*Math.PI；
var endAngleC=（（内部值-25）/50）*Math.PI；
//var endAngleC=0.5*Math.PI；
var逆时针C=假；
innerline.beginPath（）；
内弧（x，y，半径，星形C，端角C，逆时针C）；
innerline.lineWidth=30；
//线条颜色
innerline.strokeStyle='blue'；
if（innerval！=0）{
innerline.stroke（）；
}
}
outerline.clearRect(0, 0, canvas.width, canvas.height);
outerline.beginPath();
你有一个