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


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