@green300

Почему аватарка из этого скрипта выводится только один раз?

Раздобыл в интернете такой код для генерации аватарки, но он срабатывает только один раз почему то..не пойму что я не так делаю.
уже начал свой код на чистом пхп писать для этого дела, но там тоже загвоздка - не пойму как сделать чтоб цвет аватара сохранялся у юзера.
есть мысли что я неправильно его подключаю - инклудом файл с данным скриптом подключаю.
может надо как то js подключать в хеде как библиотеку?
<div class="user-info">
    <div class="user-info-avatar" id="avatar"></div>
    <div class="user-info-name" id="name"></div>
</div>

<script>
   var stringToColor = function stringToColor(str) {
    var hash = 0;
    var color = '#';
    var i;
    var value;
    var strLength;

    if(!str) {
        return color + '333333';
    }

    strLength = str.length;

    for (i = 0; i < strLength; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }

    for (i = 0; i < 3; i++) {
        value = (hash >> (i * 8)) & 0xFF;
        color += ('00' + value.toString(16)).substr(-2);
    }

    return color;
};

var name = '<?="$user"?>'; //здесь вставляю переменную имени юзера из php
var letter = name.substr(0, 1);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar');
var elementName = document.getElementById('name');

elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor; 

</script>

<style>
    .user-info-avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 25px;
    border-radius: 15px;
    text-align: center;
    margin-right: 10px;
    color: white;
}
.user-info-name {
    display: inline-block;
}

</style>

а здесь выходит вот так
63dfa06a6a2b1018668117.png
  • Вопрос задан
  • 62 просмотра
Решения вопроса 2
@pantsarny
Выбирается один и тот же первый элемент по айди…
Ответ написан
@3v4l
Потому что элемент с Id avatar, name, может быть только один.

Откройте консоль и увидите ошибку, если у вас несколько таких же элементов на странице.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Попробуй сделать перебор, чтобы функция аватара была у каждого элемента
{% for user in users %}
    <div class="user-info">
        <div class="user-info-avatar" id="avatar"></div>
        <div class="user-info-name" id="name"></div>
    </div>
{% endfor %}

Или цикл while, пока не перебрал все элементы пользователей
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы