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

Question

[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>

а здесь выходит вот так

Answer 1

[pantsarny]

Выбирается один и тот же первый элемент по айди…

Comments

[green300]

я уже свой скрипт написал..спасибо)
но сейчас надо как то его в функцию запихать и подключать к ней юзеров чтоб перед их ником выводилась аватарка..

Answer 2

[3v4l]

Потому что элемент с Id avatar, name, может быть только один.

Откройте консоль и увидите ошибку, если у вас несколько таких же элементов на странице.

Answer 3

[Полина Титова]

Попробуй сделать перебор, чтобы функция аватара была у каждого элемента

{% 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, пока не перебрал все элементы пользователей

Comments

[green300]

в форыч пробовал вставлял инклудом..может надо просто дивы эти запихать в while..спс попробую так..)