Цвет не хочет конвертировать автоматически

Question

Я нуб Javascript.

Я сделал hsl colorpicker и хотел бы автоматически конвертировать 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>

Answer 1

Вы должны получить значения цвета hex и rgb внутри changeColor функции и назначить их на соответствующие входы, как вы делаете с помощью hsl (document.getElementById('colora1').value = hsl;). Также вам нужно изменить

$('#rgba1').html(rgba1);
$('#hexa1').html(hexa1);

в

$('#rgba1').val(rgba1);
$('#hexa1').val(hexa1);

внутри keyup функция обратного вызова.

// 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').val(rgba1);
            $('#hexa1').val(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+'%)';
    
    
    color = w3color(hsl);

    document.getElementById('view-color').style.backgroundColor = hsl;
    document.getElementById('colora1').value = hsl;
    document.getElementById('hexa1').value = color.toHexString();
    document.getElementById('rgba1').value = color.toRgbString();
}
</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>

Answer 2

Ваш код не работает, потому что вы запускаете обновление двух последних полей только по "keyup" colora1, поэтому он не будет обновляться в любом другом случае. Это можно исправить, вызвав функцию в конце changeColor.

Вы JS будет что-то вроде:

    $('#colora1').on('keyup', function() {
        propagateColor();
    }

    function propagateColor() {
        var colora1, rgba1, hexa1;
        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);
        }

    });

    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;
        propagateColor()
    }