кнопка переключения между 2 раскладками не работает с javascript

Question

Моя идея состоит в том, чтобы предоставить переключатель, который переключает между bootstrap каруселью и карточками, в основном одна из них будет видна при нажатии кнопки (одна будет невидимой все время). Сначала я пытаюсь сделать свою карусель (существующую) невидимой, но мой код javascript не работает. Я новичок в javascript, надеюсь, я не делаю глупой ошибки. Любая помощь приветствуется, спасибо.

function change(toggles) {
  var which = document.getElementById("format1");
  if (toggles.value == "yes") {
    format1.style.display = "block";
    toggles.value = "no";
  } else {
    toggles.value = "yes";
  }
};

<div class=" container container1">
  <br>
  <div class="card card-body" id="card-mine">
    <span>[...]</span>
  </div>

  <div id="format1">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
      <ol class="carousel-indicators" style="margin-bottom: 3%;">
        [...]
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->

        <div class="carousel-item active" style="background-color: green">
          [...]
        </div>

        <!-- Slide Five - Set the background image for this slide in the line below -->
        <div class="carousel-item" style="background-color: #8D6E63">
          [...]
        </div>

        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        </a>
      </div>

      <br>
    </div>

  </div>
  <button id="toggles" class="button toggles" value="yes" onclick="change(this)">Click</button>
</div>

Answer 1

Я пробовал ваш код, и проблема в logi c, вы устанавливаете его как видимый в первом блоке if, он должен был быть невидимым.

  if (toggles.value == "yes") {
    which.style.display = "none";
    toggles.value = "no";
  } else {
    toggles.value = "yes";
    which.style.display = "block";
  }