Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2015, 16:34
Новичок на форуме
Отправить личное сообщение для maximepihin Посмотреть профиль Найти все сообщения от maximepihin
 
Регистрация: 28.04.2015
Сообщений: 2

Почему не создаются дивы и не работает код?
Есть простой код, который должен преобразовать строку в массив символов, потом сравнить каждую букву с массив "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, 28.04.2015 в 16:47.
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2015, 17:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

maximepihin,
создали div а потом что? и где html
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2015, 17:20
Новичок на форуме
Отправить личное сообщение для maximepihin Посмотреть профиль Найти все сообщения от maximepihin
 
Регистрация: 28.04.2015
Сообщений: 2

Сообщение от рони Посмотреть сообщение
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>
Ответить с цитированием
  #4 (permalink)  
Старый 28.04.2015, 17:43
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

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

Последний раз редактировалось MallSerg, 28.04.2015 в 17:54.
Ответить с цитированием
  #5 (permalink)  
Старый 28.04.2015, 17:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает console.log.apply(this,arguments) - Почему? Почемучкин Javascript под браузер 9 31.10.2014 17:17
Не работает JS, если подгружаю код из файла pashin76 Events/DOM/Window 3 24.10.2013 10:25
почему один вызов load работает, а другой - нет kravru jQuery 1 16.09.2013 20:51
Не работает код в ие. Событие click. Marv jQuery 2 13.02.2012 13:49
код нe работает в фаирфохе dadli Javascript под браузер 2 28.01.2012 21:18