时间戳

首页 > 解决方案 > 输入值变化时如何触发函数

javascript - 输入值变化时如何触发函数

问题描述

我有一个程序可以让你创建一个box-shadow().

这是我的代码

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>

现在我使用onmousemove=""触发重置功能，有没有办法在输入值更改时触发该功能。

我在谷歌上找不到它。

有人知道答案吗。

标签： javascripthtmlcss

解决方案

您可以使用onchange来触发您的reset()功能。

<input id="input1" type="range" onchange="reset()" />

此外，您可以将更新后的值传递给您的函数（例如onchange="onChange(this.value)"），而不是像当前代码那样以编程方式获取值。

推荐阅读