Das kommt davon, wenn man es nicht testet: Beim Lesen der Werte aus den Eingabefeldern hatte ich das
.value
vergessen. Und Du hast nicht bemerkt, dass es sich bei den Hochkommas bei der Zuweisung auf
style
um die Rückwärtsversion handelt, ` statt '.
Außerdem wird beim Drücken des Submitbuttons das Formular abgeschickt, so dass die Seite neu geladen wird. Das müssen wir durch event.preventDefault unterbinden.
So funktioniert es dann:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Crop Image</title>
<style>
#cropped {
clip-path: inset(100px 100px 10px 30px);
}
</style>
</head>
<body>
<form method="post" action="">
<input type="text" id="input1" value="50"><br />
<input type="text" id="input2" value="50"><br />
<input type="text" id="input3" value="50"><br />
<input type="text" id="input4" value="50"><br />
<input type="submit" value="los" onclick="crop(event);">
</form>
<img id="cropped" src="images/dia0.jpg" />
<script>
function crop(event) {
event.preventDefault();
const
val1 = document.getElementById('input1').value,
val2 = document.getElementById('input2').value,
val3 = document.getElementById('input3').value,
val4 = document.getElementById('input4').value,
style = `inset(${val1}px ${val2}px ${val3}px ${val3}px)`;
document.getElementById('cropped').style.clipPath = style;
}
</script>
</body>
</html>
Jetzt wäre es noch schön wenn die Variablennamen valx das wiedergeben würden, was drin steht, wenn Du möchtest, kannst Du das selbst noch ändern.