скользящий элемент не будет скользить вниз

Question

Привет! Я делаю форму, у которой есть флажок, который, если он будет отмечен, скатится вниз по некоторым параметрам.и если флажок снят, он будет скользить вверх

Вызов функции работает за один цикл.

** ПРИМЕЧАНИЕ: я не знаю jQuery и не хочу тратить время на его изучение.

<form>
<table>
rows and cells here
THIS IS THE CHECKBOX TO SHOW HIDDEN TABLE --> <input type="checkbox" name="booking" class="field" value="booking" onclick="show_booking('booking',200,5)"/> Check here for booking
</table>
<table id="booking">
HIDDEN rows and cells here
</table>
</form>

 ******************JAVASCRIPT*********************

function show_booking(obj, heightOpen, heightClose){
    if(document.getElementById(obj).style.height <= 6 ){
        animateDown(document.getElementById(obj),heightOpen);
    }
    else {
        animateUp(document.getElementById(obj), heightClose);

    }
}

function animateDown(obj, height){

       var obj_height = obj.clientHeight;

       if(obj_height >= height){ return;}               
       else {
           obj.style.height = (obj_height + 5) + "px";
           setTimeout(function(){
               animateDown(obj, height);
           }, 25)
       }
}


function animateUp (obj, height){

       var obj_height = obj.style.height.substring(0,2);
        if(obj_height >= height){    obj.style.height = (obj_height - 5) + "px";
           setTimeout(function(){
               animateUp(obj, height);
           }, 200)}   
       else { return; }         
       }    

Answer 1

Вы действительно пытаетесь действовать в зависимости от того, установлен ли флажок, так почему бы не использовать свойство флажка:

<input onclick="show_booking.apply(this, ['booking', 200, 5])" type="checkbox" name="booking" class="field" value="booking" 

apply устанавливает значение this внутри функции в качестве первого аргумента. Так что внутри show_booking this будет флажок, который был только что нажат. Теперь вы можете более просто написать функцию как:

function show_booking(obj, heightOpen, heightClose){
    if(this.checked) {
        animateDown(document.getElementById(obj),heightOpen);
    } 
    else {
        animateUp(document.getElementById(obj), heightClose);
    }
}