Javascript-форум - Почему не создаются дивы и не работает код?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Почему не создаются дивы и не работает код? (https://javascript.ru/forum/misc/55450-pochemu-ne-sozdayutsya-divy-i-ne-rabotaet-kod.html)

Почему не создаются дивы и не работает код?

Есть простой код, который должен преобразовать строку в массив символов, потом сравнить каждую букву с массив "letters" если нашлось совпадение, то создать div с фоном соответствующим и все.
Но вот что-то не работает он.

var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#f1c40f", "#e67e22", "#e74c3c"];
var letters = ["a", "b", "c", "d", "e", "1", "2", "3"];

function action() {
    var message = document.getElementById("sinput").value;
    var b = new Array(message.length);
    for (var i = 0; i < message.length; i++) {
        b[i] = message.charAt(i);
    }
    for (var i = 0; i < b.length; i++) {
        if(b[i] == "a") {
            var div = document.createElement("div");
            div.style.backgroundColor = colors[0];
        }
        if(b[i] == "b") {
            var div = document.createElement("div");
            div.style.backgroundColor = colors[1];
        }
        if(b[i] == "c") {
            var div = document.createElement("div");
            div.style.backgroundColor = colors[2];
        }
        if(b[i] == "d") {
            var div = document.createElement("div");
            div.style.backgroundColor = colors[3];
        }
        if(b[i] == "e") {
            var div = document.createElement("div");
            div.style.backgroundColor = colors[4];
        }
        if(b[i] == "1") {
            var div = document.createElement("div");
            div.style.backgroundColor = colors[5];
        }
        if(b[i] == "2") {
            var div = document.createElement("div");
            div.style.backgroundColor = colors[6];
        }
        if(b[i] == "3") {
            var div = document.createElement("div");
            div.style.backgroundColor = colors[7];
        }
    }
}

maximepihin,
создали div а потом что? и где html

Цитата:

Сообщение от рони (Сообщение 368607)

maximepihin,
создали div а потом что? и где html

<!DOCTYPE html>
<html>
    <head>
        <title>Smart color code</title>
        <style>
            div {
                width: 100px;
                height: 25px;
            }
        </style>
        <script src="sccg.js"></script>
    </head>
    <body>
        <input type="text" name="sinput" id="sinput" value="abcde123">
        <input type="button" id="cinput" value="Generate" onclick="action();">
    </body>
</html>

Цитата:

Сообщение от maximepihin

Почему не создаются дивы и не работает код?

Вопрос задан не верно. На самом деле дивы создаются и код работает
проблема в том что ты не видишь в браузере результат работы данного кода.
Это происходит потому что элементы нужно не только создать но и еще добавить их в текущий документ в ту или иную позицию
Обычно это делают с помощью appendChild
А в целом это вопрос работы с DOM т.е. объектной моделью документа.

maximepihin,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div {
    width: 28px;
    height: 28px;
    text-align: center;
    display: inline-block;
  }

  </style>
  <script>
var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#f1c40f", "#e67e22", "#e74c3c"],
    letters = ["a", "b", "c", "d", "e", "1", "2", "3"],
    obj = Array.prototype.reduce.call(letters, fn, {}),
    message;

function fn(obj, el, i) {
    obj[el] = colors[i];
    return obj
}

function create(el) {
    var text = document.createTextNode(el);
    if (obj[el]) {
        var div = document.createElement("div");
        div.style.backgroundColor = obj[el];
        div.appendChild(text);
        text = div
    }
    document.body.appendChild(text);
    return text
}

function init() {
    message = document.getElementById("sinput").value.split("");
    message.map(create)
}
window.onload = init;
</script>

</head>

<body>
<input type="text"  value="911abctestde" id="sinput">


</body>

</html>