输入值更改时如何触发 function
[英]how to trigger a function when input value changes
问题描述
I have a program that lets you create a box-shadow() .
我有一个程序可以让你创建一个box-shadow() 。
Here is my code这是我的代码
var inset = ""; var input1 = document.getElementById('input1').value = 0; var input2 = document.getElementById('input2').value = 0; var input3 = document.getElementById('input3').value = 0; var input4 = document.getElementById('input4').value = 0; var color = document.getElementById('color').value = 0; function clicked() { inset = "inset"; } reset(); function reset() { input1 = document.getElementById('input1').value; input2 = document.getElementById('input2').value; input3 = document.getElementById('input3').value; input4 = document.getElementById('input4').value; color = document.getElementById('color').value; document.getElementById('div').style.boxShadow = inset + " " + input1 + "px" + " " + input2 + "px" + " " + input3 + "px" + " " + input4 + "px" + " " + color; document.getElementById('span').innerHTML = "box-shadow" + '"' + inset + " " + input1 + "px" + " " + input2 + "px" + " " + input3 + "px" + " " + input4 + "px" + " " + color + '"'; }
div#div { height: 100px; width: 200px; background-color: gray; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>shadow</title> <link rel="stylesheet" href="shadow.css"> </head> <body> <div id="div"></div> <p></p> <input id="input1" type="range" onmousemove="reset()"> <p></p> <input id="input2" type="range" onmousemove="reset()"> <p></p> <input id="input3" type="range" onmousemove="reset()"> <p></p> <input id="input4" type="range" onmousemove="reset()"> <p></p> <input type="color" id="color" onmousemove="reset()"/> <p></p> <button id="inset" onclick="clicked()">inset</button> <p></p> <span id="span"></span> <script src="shadow.js"></script> </body> </html>
right now i use a onmousemove="" to trigger reset function, is there a way to trigger the function when input value changes.现在我使用onmousemove=""触发重置 function，有没有办法在输入值更改时触发 function。
i could not find it on google.我在谷歌上找不到它。
Does somebody know the answer.有人知道答案吗。
1 个解决方案
解决方案1
0 2020-12-28 11:47:27
You can use onchange to trigger your reset() function.您可以使用onchange触发您的reset() function。
<input id="input1" type="range" onchange="reset()" />
Additionally, you can pass the updated value to your function (eg, onchange="onChange(this.value)" ) instead of getting the value programmatically like your current code.此外，您可以将更新后的值传递给 function（例如onchange="onChange(this.value)" ），而不是像当前代码那样以编程方式获取值。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.