Динамическое создание кнопки с использованием DOM и редактирование события onclick

Я пытаюсь сгенерировать ввод (type="button") и установить событие onclick для функции, которая должна передать параметр. Весь объект должен быть добавлен в div и все. По сути это моя попытка, но я не понимаю, почему она не работает.

Я вставил код в jsfiddle, поэтому вам будет проще его воспроизвести. Нажмите здесь.

Что я делаю неправильно? Я учусь этому методом проб и ошибок, поэтому, пожалуйста, объясните, что не так. Большое спасибо!

[править] на случай, если jsfiddle однажды выйдет из строя, вот код, который я пытался запустить... :)

<!doctype html>
<html>
<head>
<title>onclick event example</title>
<script type="text/javascript" language="javascript">
var i = 0;
var h = new Array();

function addButton() {
    i++;
    var container = document.getElementById("check0");

    var h[i] = document.createElement("input");
    h[i].type = 'button';
    h[i].name = 'number' + i;
    h[i].value = "number" + i;
    h[i].id = 'number' + i;

    h[i].onclick = function() {
        showAlert(i)
    };

    container.appendChild(h[i]);
}

function showAlert(number) {
    alert("You clicked Button " + number);
}​
</script>
</head>
<body>
<div id="check0">
        <input type="button" value="klick mich" id="number0" onclick="addButton()"/>
</div>​
</body>
</html>

javascript input html dom appendchild
person cvoigt    schedule 22.05.2012    source источник
comment
Вставьте туда код. Что, если завтра jsfiddle не работает?   -  person Florian Margaine    schedule 22.05.2012

Ответы (3)


arrow_upward
3
arrow_downward

Вот фиксированная скрипка для вас.

  • var h[i] = ... является недопустимым JavaScript.

  • То, что вы пишете во фрейме «JavaScript» на jsfiddle, выполняется onload, поэтому этот код еще не присутствует, когда выполняется предоставленный вами HTML (как и функция addButton()).

    <script>
var i = 0;
var h = new Array();

function addButton() {
    i++;
    var container = document.getElementById("check0");

    h[i] = document.createElement("input");
    h[i].type = 'button';
    h[i].name = 'number' + i;
    h[i].value = "number" + i;
    h[i].id = 'number' + i;

    h[i].onclick = function() {
        showAlert(i)
    };

    container.appendChild(h[i]);
}

function showAlert(number) {
    alert("You clicked Button " + number);
}
</script>

<div id="check0">
    <input type="button" value="klick mich" id="number0" onclick="addButton()"/>
</div>​
person Alexander Pavlov    schedule 22.05.2012
comment
Если jsfiddle не работает, весь вопрос не будет иметь никакого смысла :) Позвольте мне попробовать... - person Alexander Pavlov; 22.05.2012
comment
Да, я тоже добавил комментарий к вопросу :-) - person Florian Margaine; 22.05.2012
comment
Александр, в ваше исправление по-прежнему является проблемой закрытия, обратите внимание, что все кнопки оповещают последний индекс. Здесь представлена ​​модифицированная версия с замыканием вокруг функции оповещения. - person Gabriel Jürgens; 22.05.2012
comment
@GabrielJürgens: да, спасибо за исправление. Я просто запустил код без сообщений об ошибках JS и не пошел дальше этого. - person Alexander Pavlov; 22.05.2012
comment
@GabrielJürgens, не могли бы вы объяснить свое исправление? Я вижу, что вы изменили, но на самом деле не понимаю, что там происходит... - person cvoigt; 23.05.2012
comment
@AlexanderPavlov Большое спасибо за быстрый ответ. Я должен был увидеть var [i] = ... вещь, но я просто ослеп... :) Кроме того, я не знал о поведении jsfiddle при загрузке. Спасибо за эту подсказку! - person cvoigt; 23.05.2012
comment
@vogti, то, что я сделал, обычно называется закрытием, и, как вы можете видеть здесь , вы не одиноки, задаваясь вопросом, как они работают. Для меня очень сложно объяснить colsures в паре слов, и мой английский не так хорош, как мне нужно, поэтому я рекомендую вам прочитать ссылку, которую я дал вам выше, но в основном проблема в том, что вам нужно заморозить значение i передается showAlert во время объявления h[i].onclick, потому что, если вы этого не сделаете, все onclick динамически сгенерированных кнопок будут передавать последнее значение var i гоблала. - person Gabriel Jürgens; 23.05.2012
comment
@GabrielJürgens Спасибо за объяснение. Я изучу ссылку, которую вы дали! - person cvoigt; 23.05.2012

arrow_upward
0
arrow_downward

Попробуйте использовать h.push(...) вместо того, чтобы пытаться отправить не созданный элемент в массиве

person Naftali aka Neal    schedule 22.05.2012

arrow_upward
0
arrow_downward 

          var x = document.getElementById('pagination');//pagination is an empty div in html
    var y ='';
    for(var i = 0; i <= (pageMax); i++){
        y = y+"<a id ='pageNumber"+i+"' onclick='changePage("+(i+1)+");'>"+(i+1)+"</a>\n ";
        } x.innerHTML=y }

я использовал это, чтобы сделать разбиение на страницы для таблицы. Функция будет создавать ряд чисел до тех пор, пока кнопка max. 'changePage("+(i+1)+"); ... вызовет функцию и отправит индекс i (номер страницы) номера страницы. также я динамически создаю уникальный идентификатор для каждого номера.

person GreenGiant    schedule 22.05.2012