Вход

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

maximepihin
28.04.2015, 16:34
Есть простой код, который должен преобразовать строку в массив символов, потом сравнить каждую букву с массив "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];
}
}
}
рони
28.04.2015, 17:11
maximepihin,
создали div а потом что? и где html
maximepihin
28.04.2015, 17:20
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>
MallSerg
28.04.2015, 17:43
Почему не создаются дивы и не работает код?
Вопрос задан не верно. На самом деле дивы создаются и код работает
проблема в том что ты не видишь в браузере результат работы данного кода.
Это происходит потому что элементы нужно не только создать но и еще добавить их в текущий документ в ту или иную позицию
Обычно это делают с помощью appendChild (https://www.google.ru/webhp?sourceid=chrome-instant&rlz=1C1MSIM_enRU616RU616&ion=1&espv=2&es_th=1&ie=UTF-8#newwindow=1&q=appendchild)
А в целом это вопрос работы с DOM (https://www.google.ru/webhp?sourceid=chrome-instant&rlz=1C1MSIM_enRU616RU616&ion=1&espv=2&es_th=1&ie=UTF-8#newwindow=1&q=DOM+Javascript) т.е. объектной моделью документа.
рони
28.04.2015, 17:44
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>