问题描述
我希望有一个输入框和一个滑块,该滑块使我可以更改三角形的高度。移动范围滑块时,输入框中的值已更改,但是如何在输入框中输入数字并更改滑块的值。提前谢谢。
//default ramp size parameters
let rampHeight = 200;
let rampLength = 150;
function setup() {
createCanvas(800,500);
var slider = document.getElementById('height')
slider.addEventListener('change',function(){ changeHeight(this.value)})
$('#height').on('input',function () {
var newVal = $(this).val();
$("#heightInput").val(newVal);
});
$('#heightInput').on('input',function(){
//console.log($(this).val())
$('#height').val($(this).val())
});
}
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;
}
}
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="height" type="range" min="20" max="40" value="30">
<div class="input-amount">
<input id="heightInput" name="price" value="30">
</div>
</body>
</html>
我正在使用p5.js ...
解决方法
这就是您要在注释中使用香草JS的方式。我只是在input
addEventListener
方法
//default ramp size parameters
let rampHeight = 200;
let rampLength = 150;
function setup() {
//createCanvas(800,500);
var slider = document.getElementById('height');
var input = document.getElementById('heightInput');
slider.addEventListener('input',function(){
input.value = changeHeight(this.value);
});
input.addEventListener('input',function(){
slider.value = this.value;
});
}
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;
}
}
setup();
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="height" type="range" min="20" max="40" value="30">
<div class="input-amount">
<input id="heightInput" name="price" value="30">
</div>
</body>
</html>