не может получить преобразованное значение по javascript

Question

Я делаю преобразование rgb в hsl. Но я не получаю никакой ценности. Просто скажите «Объект объекта». Я знаю, что делаю что-то неправильно. Но я не могу найти, что происходит не так. Вот fiddle и вот коды:

$(function() { 
    function hueToRgb(t1, t2, hue) { 
     if (hue < 0) hue += 6; 
     if (hue >= 6) hue -= 6; 
     if (hue < 1) return (t2 - t1) * hue + t1; 
     else if(hue < 3) return t2; 
     else if(hue < 4) return (t2 - t1) * (4 - hue) + t1; 
     else return t1; 
    } 
    function hslToRgb(hue, sat, light) { 
     var t1, t2, r, g, b; 
     hue = hue/60;   
     if (light <= 0.5) { 
      t2 = light * (sat + 1); 
     } else { 
      t2 = light + sat - (light * sat); 
     } 
     t1 = light * 2 - t2; 
     r = hueToRgb(t1, t2, hue + 2) * 255; 
     g = hueToRgb(t1, t2, hue) * 255; 
     b = hueToRgb(t1, t2, hue - 2) * 255; 
     return {r : r, g : g, b : b}; 
    } 
    document.getElementById("slidevalue2").innerHTML = hslToRgb(0, 100, 50); 
}); 

Answer 1

hslToRgb() возвращает объект, а не строка. Может быть, вы хотите попробовать document.getElementById("slidevalue2").innerHTML = JSON.stringify(hslToRgb(0, 100, 50));?

Answer 2

Когда вы устанавливаете значение innerHTML объекту, он вызывает toString() на нем, и вы получаете [Объект объекта]. Таким образом, решение зависит от того, как вы хотите его выводить.

Вы можете позвонить JSON.stringify

document.getElementById("slidevalue2").innerHTML = JSON.stringify(hslToRgb(0, 100, 50)); 

или вы можете ссылаться на куски

var parts = hslToRgb(0, 100, 50); 
document.getElementById("slidevalue2").innerHTML = "r:" + parts.r + " g: " + parts.g + " b: " + parts.b; 

или вы можете определить toString

var obj = { 
 
    r:1, 
 
    b:2, 
 
    toString : function() { 
 
     return "r: " + this.r + " b:" + this.b 
 
    } 
 
}; 
 

 
document.getElementById("out").innerHTML = obj;

<div id="out"></div>