Заставьте кнопку «продолжить» появляться, когда элементы выбраны, и исчезать, когда элементы не выбраны

Question

Мой вопрос о том, чтобы кнопка «продолжить» появлялась, когда элементы были выделены, и исчезала, когда элементы не выбирались с помощью JavaScript.

var typpro = document.getElementsByClassName("typpro"),
    continubutton = document.getElementsByClassName("continue");
var w;
for (w = 0; w < typpro.length; w++) {
    typpro[w].onclick = function () {
        'use strict';
        this.classList.toggle("active");
        if (this.classList.contains("active")) {
            continubutton[0].style.height = "100px";
        } else {
            continubutton[0].style.height = "0px";
        }
    };
}

<div class=" col-md-3 col-sm-4 col-xs-6">
    <div class="typpro">
        <button>Volume Button</button>
    </div>
</div>
<div class=" col-xs-12">
    <div class="typpro">
        <button style="width:98%">Other</button>
    </div>
</div>
<div class=" col-xs-12">
    <div class="inputpro">
        <input type="text" placeholder="your Problem">
    </div>
</div>
<div class=" col-xs-12">
    <div class="continue">
        <button>Continue</button>
    </div>
</div>
</div>
</div>

Answer 1

решение

    for (let btn of typpro) {
  btn.addEventListener('click', function() {
    let token = 0;
    this.classList.toggle('active');
    for (let i = 0; i < typpro.length; i += 1) {
      if (typpro[i].classList.contains('active')) {
        token += 1;
      }
    }
    if (token > 0) {
      continubutton[0].style.height = '100px';
    } else {
      continubutton[0].style.height = '0';
    }

  });
}

Answer 2

Итак, у вас есть пара вещей, которые работают против вас с вашим кодом в его нынешнем виде.

Во-первых, вам необходимо определить переменную continubutton, например:

HTML

<button id="continubutton" style="display: none;">Continue</button>

JS:

var continubutton = document.getElementById('continubutton');

Затем вам также необходимо определить переменную typpro, например:

JS:

var typpro = document.getElementsByClassName('typpro');

Для того, что вы пытаетесь сделать, я выбрал display: inline и display: none вместо изменения высоты, потому что тамбыло бы достаточное количество дополнительного CSS, что вам нужно сделать, чтобы сделать это.Но вот окончательный результат:

HTML:

<div class=" col-md-3 col-sm-4 col-xs-6">
        <div class="typpro">
            <button>Screnen</button>
        </div> 
    </div> 
    <div class=" col-md-3 col-sm-4 col-xs-6"> 
        <div class="typpro"> 
            <button>Battery</button>
        </div> 
    </div> 
    <button id="continubutton" style="display: none;">Continue</button>
    </div>

И JS:

var w;
    var typpro = document.getElementsByClassName('typpro');
    var continubutton = document.getElementById('continubutton');
    for (w = 0; w < typpro.length; w++){
        typpro[w].onclick = function () {
            'use strict';
            this.classList.toggle("active");
            if(this.classList.contains("active")){
                continubutton[0].style.display = "inline"; 
            } else {
                continubutton[0].style.display = "none"; 
            } 
        }; 
    }

РЕДАКТИРОВАТЬ: С использованием heightкажется, что маршрут, по которому мы должны идти, вот обновленный код:

  var w;
		var typpro = document.getElementsByClassName('typpro');
		var continubutton = document.getElementsByClassName('continue');
		for (w = 0; w < typpro.length; w++){
			typpro[w].onclick = function () {
				'use strict';
				this.classList.toggle("active");
				if(this.classList.contains("active")){
					continubutton[0].style.height = "100px"; 
				} else {
					continubutton[0].style.height = "0px"; 
				} 
			}; 
		}

<div class=" col-md-3 col-sm-4 col-xs-6">
			<div class="typpro">
				<button>Screnen</button>
			</div> 
		</div> 
		<div class=" col-md-3 col-sm-4 col-xs-6"> 
			<div class="typpro"> 
				<button>Battery</button>
			</div> 
		</div> 
		<div class="continue" style="height: 0;overflow:hidden;">
			<button id="continubutton">Continue</button>
		</div>
		</div>

Важно, чтобы вы установили начальную высоту для вашего <div class="continue"></div> контейнера, и чтобы вы установили ее на overflow: hidden;, чтобы все, что выпадает за пределы границы.коробка скрыта от глаз.Это позволит вам анимировать высоту, чтобы кнопка отображалась «скрытой» до тех пор, пока не будет выбран параметр.