使用滑块中的值作为参数在javascript中调用函数
我用javascript编写了一个函数来改变三角形的高度。我还做了一个范围滑块。我试图让滑块改变三角形的高度，但是我很难让它工作 HTML使用滑块中的值作为参数在javascript中调用函数,javascript,Javascript,我用javascript编写了一个函数来改变三角形的高度。我还做了一个范围滑块。我试图让滑块改变三角形的高度，但是我很难让它工作 HTML <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
<input type="range" name="rangeInput" min="20" max="40" value="20" id="height">
</body>
</html>
//default ramp parameters
let rampHeight = 150;
let rampLength = 150;
function setup() {
createCanvas(800, 500);
}
function draw() {
background(220);
fill(150);
triangle(700, rampHeight, 700, 400, rampLength, 400);
}
function changeHeight(height) {
rampHeight = 500 - height * 10;
if (height >= 20 && height <= 40) {
return rampHeight;
} else if (height > 40) {
return rampHeight = 100;
} else if (height < 20) {
return rampHeight = 300;
}
}
changeHeight(document.getElementById('height').value)
//默认渐变参数
匝道高度=150；
设匝道长度=150；
函数设置（）{
createCanvas（800500）；
}
函数绘图（）{
背景（220）；
填充（150）；
三角形（700，坡道高度，700，400，坡道长度，400）；
}
功能更改高度（高度）{
坡道高度=500-高度*10；
如果（高度>=20和高度40）{
返回高度=100；
}否则，如果（高度<20）{
返回高度=300；
}
}
changeHeight（document.getElementById（'height'）.value）
顺便说一下，我正在使用p5.js在线web编辑器对其进行编码。您需要收听滑块的
更改输入document.querySelector('#height').addEventListener('input',(e)=>{
changeHeight(e.target.value)
})
您需要将
eventlistenerslidervar slider = document.getElementById('height')
slider.addEventListener('change', function(){ changeHeight(this.value)});