2つのレイアウトを切り替えるボタンがJavaScriptで機能しない

2020-08-02 javascript html css

私のアイデアは、ブートストラップカルーセルとカードを切り替えるスイッチを提供することです。基本的に、ボタンを押すとそのうちの1つが表示されます(常に1つは表示されません)。まず、カルーセル(既存)を非表示にしようとしていますが、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>

Answers

私はあなたのコードを試しました、そして問題はロジックにあります、あなたはそれを最初のifブロックで目に見えるように設定しています、それは目に見えないはずでした。

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

Related