слонирование блоков через javascript не работает

Amb · №1

Простенький java-script который по нажатию на кнопку "+" клонирует блок, а по нажатию на кнопку "-" удаляет.
Проблема в том что этот скрипт работает на любом браузере кроме Firefox.

Вот сам скрипт:

Выделить код

Код:

<script type="text/javascript">
function addRow(){
        if(curnum!=12){
                curnum++;
                document.all["d"+curnum].style.display="block";
        }
}
function hideRow(){
        if(curnum!=1){
                document.all["d"+curnum].style.display="none";
                curnum--;
        }
}
var curnum = 1;
</script>

<div>
<form action="http://test.amb.kiev.ua/test.php" method="post">

<div id='d2' style='display:none;'>AAAAAAAAA</div>
<div id='d3' style='display:none;'>AAAAAAAAA</div>
<div id='d4' style='display:none;'>AAAAAAAAA</div>
<div id='d5' style='display:none;'>AAAAAAAAA</div>
<div id='d6' style='display:none;'>AAAAAAAAA</div>
<div id='d7' style='display:none;'>AAAAAAAAA</div>
<div id='d8' style='display:none;'>AAAAAAAAA</div>
<div id='d9' style='display:none;'>AAAAAAAAA</div>
<div id='d10' style='display:none;'>AAAAAAAAA</div>
<div id='d11' style='display:none;'>AAAAAAAAA</div>
<div id='d12' style='display:none;'>AAAAAAAAA</div>

<input type='button' value='+' onclick='addRow();' >
<input type='button' value='-' onclick='hideRow();' >
</form>
</div>

А вот ссылка на страничку с этим скриптиком:
http://test.amb.kiev.ua/test.php

Если удалить первую строку в HTML (DOCTYPE) то Firefox тоже работает. Но это же не выход ?
Проверялось на Firefox 3.5.5 (win и unix)

Очень прошу, помогите разобраться... Что я не так делаю ?

Amb · №2

Спасибо.
С document.all - понятно.
Почитал доку и в конце концов остановился на jquery.
Вот итоговое, совершенно кроссбраузерное решение:

Выделить код

Код:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
        $(".add").click(function(){
                if(curnum!=12){
                        curnum++;
                        $("#d" + curnum).show("slow");
                        return false;
                };
        });
        $(".del").click(function(){
                if(curnum!=1){
                        $("#d" + curnum).hide("slow");
                        curnum--;
                        return false;
                };
        });
});
var curnum=1;
</script>

</head>

<body>
<div id="d1" style='display:block;'>AAAAAAAAA</div>
<div id="d2" style='display:none;'>AAAAAAAAA</div>
<div id="d3" style='display:none;'>AAAAAAAAA</div>
<div id="d4" style='display:none;'>AAAAAAAAA</div>
<div id="d5" style='display:none;'>AAAAAAAAA</div>
<div id="d6" style='display:none;'>AAAAAAAAA</div>
<div id="d7" style='display:none;'>AAAAAAAAA</div>
<div id="d8" style='display:none;'>AAAAAAAAA</div>
<div id="d9" style='display:none;'>AAAAAAAAA</div>
<div id="d10" style='display:none;'>AAAAAAAAA</div>
<div id="d11" style='display:none;'>AAAAAAAAA</div>
<div id="d12" style='display:none;'>AAAAAAAAA</div>

<input type='button' value='+' class="add">
&nbsp;&nbsp;
<input type='button' value='-' class="del">

Полезная информация

№112-11-2009 05:42:41