Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Создание кнопок исключительно JS-ом (https://javascript.ru/forum/events/33449-sozdanie-knopok-isklyuchitelno-js-om.html)

Voksin 23.11.2012 17:43
Создание кнопок исключительно JS-ом
 
Пытался это сделать посредством :


чтоб JS создал 24 кнопки и навесил на них значение цифр (1-24) выводя их в отдельную строку :cray: :cray: :cray:

danik.js 23.11.2012 18:05
Я мож неправильно понял, но предложу такой код:

function doSomething(){
    alert(this.textContent);
}

var fragment = document.createDocumentFragment();

for (var i=0; i<24; i++) {
    var button = document.createElement('button');
    button.textContent = i + 1;
    button.onclick = doSomething;
    fragment.appendChild(button);
}

document.body.appendChild(fragment);

deivan 23.11.2012 18:10
а почему textContent а не innerHTML?.. кроссбраузерно же..

lord2kim 23.11.2012 18:36
Voksin,
<html>
<head>
<script>
function myFunction() {
    var btn, t;
    for (i=0; i < 24; i++) {
        btn=document.createElement("BUTTON");
        t=document.createTextNode("CLICK ME "+i);
        btn.appendChild(t);
        btn.onclick = (function(i){ return function() { alert(i); } })(i);
        document.body.appendChild(btn);
    }
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

Voksin 23.11.2012 19:06
Цитата:
Сообщение от lord2kim (Сообщение 217495)
Voksin,
<html>
<head>
<script>
function myFunction() {
    var btn, t;
    for (i=0; i < 24; i++) {
        btn=document.createElement("BUTTON");
        t=document.createTextNode("CLICK ME "+i);
        btn.appendChild(t);
        btn.onclick = (function(i){ return function() { alert(i); } })(i);
        document.body.appendChild(btn);
    }
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
Cпасибо огромное !
P.S. как вариант можно реализовать чтоб кнопки появлялись просто при загрузки хмль-ки, не клацая по кнопке?

Dim@ 23.11.2012 19:36
Voksin,
<html>
<head>
</head>
<body>
<script>
(function () {
    var btn, t;
    for (i=0; i < 24; i++) {
        btn=document.createElement("BUTTON");
        t=document.createTextNode("CLICK ME "+i);
        btn.appendChild(t);
        btn.onclick = (function(i){ return function() { alert(i); } })(i);
        document.body.appendChild(btn);
    }
})();
</script>
</body>
</html>

Voksin 23.11.2012 20:25
Dim@, спасибо! именно так я и хотел сделать

Voksin 26.11.2012 18:41
допустим в верстке есть некий
<INPUT TYPE=text NAME="view" SIZE=30>
подскажите плз как заствить js записывать в это поле кликнутую кнопку ? :)
P.S. только плз не забрасывайте тухлыми яйцами :(

lord2kim 26.11.2012 19:32
Voksin, что имелось в виду под
Цитата:
Сообщение от Voksin (Сообщение 217976)
заствить js записывать в это поле кликнутую кнопку ? :)
?
<html>
<head>
</head>
<body>
<script>
(function () {
    var btn, t;
    for (i=0; i < 24; i++) {
        btn=document.createElement("BUTTON");
        t=document.createTextNode("CLICK ME "+i);
        btn.appendChild(t);
        btn.onclick = (function(i){ return function() { alert(i); } })(i);
        document.body.appendChild(btn);
    }
})();

document.body.onclick = function(e) {
  var e = e || event;
  var target = e.target;
  if (target.tagName == "BUTTON") {
    document.getElementsByName("view")[0].value = target.innerHTML;
  }
}
</script>
<INPUT TYPE=text NAME="view" SIZE=30>
</body>
</html>

Voksin 26.11.2012 20:02
lord2kim,
оно, спасибо, сказываются пробелы в знании js...

Voksin 26.11.2012 22:56
подскажите плз как туда еще "+" и "=" вывести... чтоб он js юзал... :help:

(function () {
var btn, q;
{
btn=document.createElement("BUTTON");
q=document.createTextNode("+");
btn.appendChild(q);
btn.onclick = (function(ce){ return function()
{document.body.onclick = function(ce) {
var cee = cee || event;
var target = cee.target;
if (target.tagName == "BUTTON") {
document.getElementsByName("view")[0].value = target.innerHTML;
}
}} })(i);
document.body.appendChild(btn);
}
})();

lord2kim 27.11.2012 10:31
Voksin, куда туда?)
создайте объект с данными для кнопок (текст кнопок, функции, которые они должны выполнять) и цикле создайте необходимое количество кнопок...


Часовой пояс GMT +3, время: 23:53.