Форум

Voksin · #1 (**permalink**) 23.11.2012, 15:43

Пытался это сделать посредством :

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

danik.js · #2 (**permalink**) 23.11.2012, 16: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 · #3 (**permalink**) 23.11.2012, 16:10

а почему textContent а не innerHTML?.. кроссбраузерно же..

lord2kim · #4 (**permalink**) 23.11.2012, 16: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 · #5 (**permalink**) 23.11.2012, 17:06

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

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@ · #6 (**permalink**) 23.11.2012, 17: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 · #7 (**permalink**) 23.11.2012, 18:25

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

Voksin · #8 (**permalink**) 26.11.2012, 16:41

допустим в верстке есть некий
<INPUT TYPE=text NAME="view" SIZE=30>
подскажите плз как заствить js записывать в это поле кликнутую кнопку ?

P.S. только плз не забрасывайте тухлыми яйцами

lord2kim · #9 (**permalink**) 26.11.2012, 17:32

Voksin, что имелось в виду под

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

заствить 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 · #10 (**permalink**) 26.11.2012, 18:02

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

Форум

Справочник

Discord чат

Курсы javascript