使用滑块中的值作为参数在 javascript 中调用函数答案

【问题标题】：Calling a function in javascript with a value from a slider as a parameter使用滑块中的值作为参数在 javascript 中调用函数
【发布时间】：2020-10-03 11:16:54
【问题描述】：

我在 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 在线网络编辑器来编写代码。

【问题讨论】：

检查这个 [stackoverflow.com/questions/5457739/…

标签： javascript

【解决方案1】：

您需要监听滑块的change 或input 事件，然后相应地更改高度。

所以添加

document.querySelector('#height').addEventListener('input',(e)=>{
  changeHeight(e.target.value)
})

【讨论】：

【解决方案2】：

您需要将eventlistener 添加到slider 元素并监听更改事件，以便您可以调用changeHeight 函数。

var slider = document.getElementById('height')
slider.addEventListener('change', function(){ changeHeight(this.value)});

这是一个有效的fiddle

【讨论】：