how to trigger a function when input value changes

Question

I have a program that lets you create a 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.

i could not find it on google.

Does somebody know the answer.

you can use `change` and `input` see: [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) — pilchard, Dec 28 '20 at 11:44
Duplicate: [How can I run a javascript function when input changes](https://stackoverflow.com/questions/4886114/how-can-i-run-a-javascript-function-when-input-changes) — , Dec 28 '20 at 11:49
@ChrisG that's a poor duplicate and recommends `onBlur` which isn't appropriate here. rather [setting oninput event with Javascript](https://stackoverflow.com/questions/9355499/setting-oninput-event-with-javascript) — pilchard, Dec 28 '20 at 11:53
@pilchard The top answer recommends `onchange`, just the accepted one is bad. I agree it's not a perfect duplicate, but it's the first Google result when I search for this question's title. — , Dec 28 '20 at 11:55

score 0 · Answer 1 · answered Dec 28 '20 at 11:47

0

You can use onchange to trigger your reset() function.

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

Additionally, you can pass the updated value to your function (e.g, onchange="onChange(this.value)") instead of getting the value programmatically like your current code.

answered Dec 28 '20 at 11:47

Thunderbolt Engineer

1,524
7
12

`oninput` is actually more appropriate here, `onchange` waits for loss of focus on the element whereas `oninput` triggers immediately on value change. – pilchard Dec 28 '20 at 11:53

how to trigger a function when input value changes

1 Answers1