Как получить шестнадцатеричные символы из короткой строки для цветового кода

Я хочу шестнадцатеричный код цвета из строки имени пользователя. для длинного имени пользователя он работает правильно, но для короткого имени он не работает. Для freddie_steven он возвращает feddee, но для alex_steven возвращает только aeee, что очень коротко. Как это исправить.

Как получить действительный шестнадцатеричный код цвета из имени пользователя, чтобы установить фон миниатюры, отличный от имени пользователя.

#user-thumbnail{
    width: 100px;
    height: 100px;
    border-radius: 100%;
}

<div id='user-thumbnail'></div>

var username = 'freddie_steven';
var colorCode = '';

for(var i = 0; i<username.length; i++){
    if(username.charCodeAt(i) >= 97 && username.charCodeAt(i) <= 102)
        colorCode += username.charAt(i)
}

document.getElementById('user-thumbnail').style.background = '#' +colorCode.substr(0, 6);

Что вы ожидаете вместо aeee? Ваш код берет символы a, e, b, c, e и f из имени и помещает их в строку.

Nick Parsons 17.05.2022 11:54

ну, мы не можем "исправить" это, если вы не знаете, чего вы ожидаете.

I am L 17.05.2022 11:56

Я хочу добавить символы, чтобы сделать действительный шестнадцатеричный код цвета

Incognito 17.05.2022 11:56

Хотите получить одинаковый цветовой код для одного и того же имени пользователя? Если да, можете ли вы сгенерировать случайный цвет и сохранить его в базе данных, или вам нужно, чтобы код цвета вычислялся из имени пользователя?

Nick Parsons 17.05.2022 12:06
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
4
16
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Выберите случайный символ, если символ не совпадает!

var username = 'alex_steven';
var colorCode = '';

var validHex = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f'
];
var randomNumber = Math.floor(Math.random() * validHex.length);

for (var i = 0; i < username.length; i++) {
  if (username.charCodeAt(i) >= 97 && username.charCodeAt(i) <= 102) {
    colorCode += username.charAt(i)
  } else {
    colorCode += validHex[randomNumber]
  }
}

console.log(colorCode.substr(0, 6));

Другие вопросы по теме