Почему мой JavaScript не работает? Кажется, проблема с моим RegEx, но я не могу понять это

Как есть, если вы запустите это в браузере, это не сработает. Однако, если вы хотите прокомментировать первый «var rgbArray» и раскомментировать второй «var rgbArray», тогда скрипт будет работать.Почему мой JavaScript не работает? Кажется, проблема с моим RegEx, но я не могу понять это

Почему первый способ не работает?

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <script type="text/javascript"> 
      var rgbColorString = "rgb(60, 59, 110)"; 
      var rgbArray = parseRGBColor(rgbColorString); 
      // var rgbArray = [60, 59, 110] 
      convertRGBToHEX(rgbArray); 

      function parseRGBColor(rgbColorString){ 
       var colorStringMatch = rgbColorString.match(/[0-9]{1,3}/g); 
       return colorStringMatch; 
      } 

      function convertRGBToHEX(rgbArray){ 
       document.write("rgbArray: " + rgbArray + "<br>"); 
       var hexColor = ""; 
       for(var i=0; i<rgbArray.length; i++){ 
        hexColor = hexColor + convertToHexString(rgbArray[i]); 
       } 
      } 

      function convertToHexString(base10Color){ 
       document.write("Color In: " + base10Color + " => "); 
       var convertedColor = (base10Color < 16) ? ("0" + base10Color.toString(16)) : base10Color.toString(16); 
       document.write("Color Out: " + convertedColor + "<br>"); 
      } 
     </script> 
    </body> 
</html>

источник

2016-09-05 Brian

чуть ниже линии, где вы устанавливаете 'rgbArray', добавьте это:' console.log (rgbArray) '. Что вы видите на консоли? –

Важная часть: 'console.log (typeof base10Color)' – Bergi

В одном случае вы передаете '[60, 59, 110]', в случае с регулярным выражением, которое вы передаете '[" 60 "," 59 " «110»] ' –

Регулярные выражения всегда возвращают свои матчи в виде строк, даже если соответствует часть была численная.
Следовательно, когда вы вызываете .toString(16) на элементы массива, их значение остается неизменным.

Вам нужно изменить convertToHexString, чтобы преобразовать их в целые числа первых, предпочтительно с использованием parseInt:

<!DOCTYPE html> 
 
<html> 
 
    <head></head> 
 
    <body> 
 
     <script type="text/javascript"> 
 
      var rgbColorString = "rgb(60, 59, 110)"; 
 
      var rgbArray = parseRGBColor(rgbColorString); 
 
      // var rgbArray = [60, 59, 110] 
 
      convertRGBToHEX(rgbArray); 
 

 
      function parseRGBColor(rgbColorString){ 
 
       var colorStringMatch = rgbColorString.match(/[0-9]{1,3}/g); 
 
       return colorStringMatch; 
 
      } 
 

 
      function convertRGBToHEX(rgbArray){ 
 
       document.write("rgbArray: " + rgbArray + "<br>"); 
 
       for(var i=0; i<rgbArray.length; i++){ 
 
        convertToHexString(rgbArray[i]); 
 
       } 
 
      } 
 

 
      function convertToHexString(base10Color){ 
 
       document.write("Color In: " + base10Color + " => "); 
 
       var convertedColor = (base10Color < 16 ? "0" : "") + parseInt(base10Color).toString(16); 
 
       document.write("Color Out: " + convertedColor + "<br>"); 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

источник

2016-09-05 01:25:02 Siguza

Отличное объяснение ... спасибо. – Brian

если 'convertToHexString' ничего не возвращает, цикл for, который вызывает' hexColor' + 'convertToHexString ...', продолжает становиться неопределенным. –

Первое:

var rgbArray = parseRGBColor(rgbColorString); 
    //=> ["60","59","110"]

возвращает массив строки.

второе:

var rgbArray = [60, 59, 110]

является массив целых чисел

источник

2016-09-05 01:24:53

-1

Вы должны сделать две вещи:

вернуть значение из convertToHexString
Используйте целочисленное значение вместо строки в convertToHexString

Working JSBin

var rgbColorString = "rgb(60, 59, 110)"; 
var rgbArray = parseRGBColor(rgbColorString); 
// var rgbArray = [60, 59, 110] 
convertRGBToHEX(rgbArray); 

function parseRGBColor(rgbColorString){ 
    var colorStringMatch = rgbColorString.match(/[0-9]{1,3}/g); 
    return colorStringMatch; 
} 

function convertRGBToHEX(rgbArray){ 
    document.write("rgbArray: " + rgbArray + "<br>"); 
    var hexColor = ""; 
    for(var i=0; i<rgbArray.length; i++){ 
    hexColor = hexColor + convertToHexString(rgbArray[i]); 
    } 
    document.write("final hex color:" + hexColor); 
} 

function convertToHexString(base10Color){ 
    base10Color = parseInt(base10Color); 
    document.write("Color In: " + base10Color + " => "); 
    var convertedColor = (base10Color < 16) ? ("0" + base10Color.toString(16)) : base10Color.toString(16); 
    document.write("Color Out: " + convertedColor + "<br>"); 
    return convertedColor; 
}

источник

2016-09-05 01:26:16

Как правило, это хорошая практика, но это не проблема. Функция должна печатать только рассчитанные значения, и это просто отлично. – Siguza

Да, но для цикла for необходимо преобразовать значение 'convertToHexString', чтобы добавить значения в переменную' hexColor'. –

Почему мой JavaScript не работает? Кажется, проблема с моим RegEx, но я не могу понять это

ответ

Смежные вопросы