Javascript/HTML：onclickで関数を繰り返す

bugfix> javascript > 投稿 2020-12-25 10:24

私はJavascript/HTMLの初心者です。ですから、明らかな何かが欠けているとすみません。

私の仕事：私のウェブサイトに写真を表示したいのですが、これはウェブサイトが読み込まれたり更新されたりしても常に同じです。その写真の隣に、「シャッフル」というボタンを実装したいと思います。このボタンは、最初に表示された画像を非表示にし、代わりに配列から選択されたランダムな画像を表示します。画像が変更された後、「シャッフル」ボタンが再びクリック可能になり、クリックされるたびに、配列からランダムに選択された新しい画像が表示されます。最初の最初の画像は、Webサイトが更新されたときにのみ再度表示されます。

私の問題：「シャッフル」ボタンをクリックすると画像が変わりますが、ボタンやウェブサイトに表示されるはずのコードがすべて消えます。したがって、もう一度クリックすることはできません。新しいランダム画像の選択を繰り返すために、ボタンのオンクリックで選択される関数に配列を配置しました（私の問題はここにあると思います）。配列の周りでこの関数を削除すると、ボタンをクリックしても消えませんが、ボタンは2回以上クリックできません。この問題の写真は、この投稿の下部に含まれています。あなたが私の問題を理解し、私を助けてくれることを願っています。ありがとう！

コード：

<body>
  <!-- button with functions:hide initial picture, select random picture, show random picture-->
  <button onClick="hideNumber(); shuffle(); showMeme();">Shuffle</button>
  <!--initial picture thats not random and always shown when page is loaded-->
  <div>
    <img id="number" src="images/zahl1.jpg" alt="Number">
  </div>
  <script type="text/javascript">
    function hideNumber() {
    var x = document.getElementById("number");
    if (x.style.display == "none") {
    } else {
      x.style.display = "none";
    }
  }
//function so the button should be reclickable / array filled with pictures
function shuffle(){
  var images1 = [],
  index1 = 0;
  images1[0] = "<div><img src='images/meme1.jpg' id='Meme1' style='visibility:hidden' alt='meme1'></div>";
  images1[1] = "<div><img src='images/meme2.jpg' id='Meme1' style='visibility:hidden' alt='meme2'></div>";
  images1[2] = "<div><img src='images/meme3.jpg' id='Meme1' style='visibility:hidden' alt='meme3'></div>";
  //selecting random number
  index1 = Math.floor(Math.random() * images1.length);
  //displaying random image out of array
  document.write(images1[index1]);
}
//execute function? (not sure if done right)
  shuffle();
//function to show the random picture when button is clicked
  function showMeme() {
        document.getElementById('Meme1').style.visibility='visible';
      }
  </script>
</body>

これは、最初にロードされたときのWebサイトを示す画像です。

2番目の図は、ボタンがクリックされたときに何が起こるかを示しています。最初の画像が消え、2番目のランダムな画像が表示されます（本来あるべき姿）が、別のランダムな画像を生成するボタンが消えるだけです

<body>
  <!-- button with functions:hide initial picture, select random picture, show random picture-->
  <button onClick="shuffle();">Shuffle</button>
  <!--initial picture thats not random and always shown when page is loaded-->
  <div>
    <img id="number" src="images/zahl1.jpg" alt="Number">
  </div>
  <script type="text/javascript">
//function so the button should be reclickable / array filled with pictures
function shuffle(){
  var images1 = [],
  index1 = 0;
  images1[0] = "images/meme1.jpg";
  images1[1] = "images/meme2.jpg";
  images1[2] = "images/meme3.jpg";
  //selecting random number
  index1 = Math.floor(Math.random() * images1.length);
  //displaying random image out of array
  document.getElementById("number").src = images1[index1];
}
  </script>
</body>

document.write ページ全体が置き換えられます。あなたを与える <div> 初期画像にIDを付け、これを使用してこの要素のコンテンツを置き換えます。
```
<div id="wrapper">
    <img id="number" src="images/zahl1.jpg" alt="Number">
</div>
```
交換 document.write(images1[index1]); と：
```
document.getElementById('wrapper').innerHTML = images1[index1];
```
を削除できることに注意してください style='visibility:hidden' 配列内の要素は単純な文字列であり、ここには画像が読み込まれず、現在表示されている画像が完全に置き換えられるため、画像からスタイルを設定し、可視性の切り替えを取り除きます。

画像を置き換えるだけで、これをさらに改善できます src それ以上のことをする理由がない限り、HTMLのチャンク全体を置き換える代わりに属性。

bugfix

Javascript/HTML：onclickで関数を繰り返す

javascript

html

jquery

関連記事