Я новичок в JavaScript.
Я сделал цветовую палитру hsl и хотел бы автоматически преобразовать цвет hsl в rgb и hex.Я нашел кусок кода от w3schools, который я хотел бы использовать для этого.Единственная проблема заключается в том, что цветовой код преобразуется только тогда, когда цветовой код вводится вручную.
Я бы хотел, чтобы цвета автоматически преобразовывались при изменении цвета с помощью функции oniput в ползунках.Я просто не знаю, как изменить код для этого.
Вот код:
// below color converter
// Make sure to include https://www.w3schools.com/lib/w3color.js
var colora1, rgba1, hexa1;
$('#colora1').on('keyup', function() {
colora1 = w3color($(this).val());
if(colora1.valid) {
hexa1 = colora1.toHexString();
$('#hexa1').html(hexa1);
if(colora1.opacity == 1) {
rgba1 = colora1.toRgbString();
$('#rgbNamea1').text('Rgb');
$('#hslNamea1').text('Hex');
}
else {
rgba1 = colora1.toRgbaString();
hexa1 = colora1.toHslaString();
$('#rgbNamea1').text('Rgba');
$('#hslNamea1').text('Hsla');
}
$('#rgba1').html(rgba1);
$('#hexa1').html(hexa1);
}
});
body{
text-align: center;
}
#view-color{
width: 200px;
height: 200px;
border: solid #000 1px;
margin: 10px auto;
}
.colors{
width: 200px;
margin: 20px auto;
}
#colora1, textarea{
width: 100%;
height: 20px;
}
<div id="view-color" style="background-color: hsl(100, 100%, 50%)"></div><br>
hue<br>
<input oninput="changeColor()" type="range" id="hue" max="360" min="0" value="100"><br>
sat<br>
<input oninput="changeColor()" type="range" id="sat" max="100" min="0" value="100"><br>
light<br>
<input oninput="changeColor()" type="range" id="light" max="100" min="0" value="50">
<div class="colors">
input<br>
<input id="colora1" value="red" type="text">
output rgb<br>
<textarea id="rgba1" readonly>rgb(255, 0, 0)</textarea>
output hex<br>
<textarea id="hexa1" readonly>#ff0000</textarea>
</div>
<script>
function changeColor(){
hue = document.getElementById('hue').value;
sat = document.getElementById('sat').value;
light = document.getElementById('light').value;
hsl = 'hsl('+hue+', '+sat+'%, '+light+'%)';
document.getElementById('view-color').style.backgroundColor = hsl;
document.getElementById('colora1').value = hsl;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3color.js"></script>