使用滑块中的值作为参数调用javascript中的函数
[英]Calling a function in javascript with a value from a slider as a parameter
问题描述
我在javascript中做了一个改变三角形高度的函数。 我还制作了一个范围滑块。 我试图让滑块改变三角形的高度，但是我正在努力让它工作。
HTML
<!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>
JavaScript
//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)
顺便说一下，我正在使用 p5.js 在线 Web 编辑器对此进行编码。
2 个解决方案
解决方案1
0 已采纳 2020-10-03 11:32:59
您需要监听滑块的change或input事件，然后相应地更改高度。
所以添加
document.querySelector('#height').addEventListener('input',(e)=>{
changeHeight(e.target.value)
})
解决方案2
0 2020-10-03 13:28:12
您需要将eventlistener添加到slider元素并监听更改事件，以便您可以调用 changeHeight 函数。
var slider = document.getElementById('height')
slider.addEventListener('change', function(){ changeHeight(this.value)});
这是一个工作小提琴
通过调用javascript函数在html中设置参数的值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.