カード表示の後にテキスト表示

カードをシャッフルして、その中から1枚めくるとそのカードの説明文が出るようにしたいのですが
めくったカードを表示したまま、その下に説明が表示されるようにしたいのですが
この書き方では当たり前だとは思いますが、カードが消えて文字が表示されてしまいます。
しかし、何を書いたら出来るのか全く分からず困っています。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link href="card.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>

  //カードが閉じる
  function cardClose(){
    $("#card li:eq("+index+")").stop().animate({ left: "75"}, 500);
    $("#card li:eq("+index+") img").stop().animate({ width: "0",height: "200px"}, 500, cardOpen);
  }
  //カードが開く
 function cardOpen(){
  $("#card li:eq("+index+") img").attr("src","image/card"+(index+1)+".jpg");
  $("#card li:eq("+index+") img").stop().animate({ width: "150px",height: "200px"}, 500);
  $("#card li:eq("+index+")").stop().animate({ left: "0"}, 500, message);
}

//テキスト表示
function message(){
  var msg = new Array(5)
 	msg[0] = 'テキストA'
        msg[1] = 'テキストB'
	msg[2] = 'テキストC'
	msg[3] = 'テキストD'
	msg[4] = 'テキストE'
	document.write(msg[index]);
}

  $(function(){
    for(i=0; i<4; i++) {
      kakudo.push(Math.round(Math.random () * 360 + 0.5));
    }
    timer = setInterval(function(){
      kaiten();
    },40);

    $("#card li").click(function(){
      index = $("#card li").index(this);  //選択したカードの順番をindexに保存
        $("#card li:not(:eq("+index+"))").animate({ opacity: "0"}, 1000);  //選択したカード以外の透明度を0に
      clearInterval(timer);  //kaiten()の動きを止める
      $("#card li:eq("+index+")").rotate({ animateTo: 0});  //選択したカードの角度を0°まで回す
      $("#card li:eq("+index+")").animate({ top: "-180",left: "0"}, 1000, cardClose);  //選択したカードを一番初めの位置に戻した後cardClose()を実行
    });
  });

</script>
</body>
</html>

ここに何か足したら良いんだろうとは思うのですが…

//テキスト表示
function message(){
  var msg = new Array(5)
 	msg[0] = 'テキストA'
        msg[1] = 'テキストB'
	msg[2] = 'テキストC'
	msg[3] = 'テキストD'
	msg[4] = 'テキストE'
	document.write(msg[index]);
}

それと、カードの順番をindexに配列させているのですが
カード枚数が増えると、カードが重なっていくので番号の後ろの方しかめくることが出来ないので、いindexをランダムにしたくてMath.floor( Math.random() *5 ) ;を入れたりしているのですが（今は書いてないですが）上手くいきません。
カードの絵と説明文は一致させたいのです。
カードA＝説明Aのような…。
どうしたら良いのでしょうか。

よろしくお願いします。

＊自分のやりたいことが、JavaよりもJavascriptの方が良いとなりました(-_-;)
すみません…。でもJavaも引き続き勉強中です。

行動規範の内容に同意します

回答2件

ベストアンサー

document.write だと上書きになってしまうので
insertAdjacentHTML で追記するのはどうでしょうか

function message(){
    var msg = new Array(5)
        msg[0] = 'テキストA'
        msg[1] = 'テキストB'
        msg[2] = 'テキストC'
        msg[3] = 'テキストD'
        msg[4] = 'テキストE'
        document.body.insertAdjacentHTML('afterend', msg[index]);
}

投稿2019/01/20 20:20

teritama

総合スコア126

naruriru

2019/01/21 11:36

ありがとうございます！出来ました～～！！これとランダムの設定がとにかく上手くいかなくて、数日苦しんでました(-_-;) ありがとうございました！

行動規範の内容に同意します

検討違いでしたら申し訳ないのですが、
document.write()で上書きされてるって事ですよね？
下記のコメントアウトを変更して比べてみてください。

html
1  <span>ここに表示</span>
2  <ul id="card">
3    <li><img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/108642/rabtQBpu_thumbnail.jpg"></li>
4    <li><img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/108642/rabtQBpu_thumbnail.jpg"></li>
5    <li><img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/108642/rabtQBpu_thumbnail.jpg"></li>
6    <li><img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/108642/rabtQBpu_thumbnail.jpg"></li>
7    <li><img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/108642/rabtQBpu_thumbnail.jpg"></li>
8  </ul>
9  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
10  <script type="text/javascript">
11$('span').on('click', function() {
12  $('span').text('aaa');
13  // document.write('aaa');
14});
15</script>

投稿2019/01/20 16:56

akihiro3

総合スコア955

naruriru

2019/01/20 17:14

ありがとうございます。私の書き方が悪いのか、うまく動きません･･･。 document.writeにある、配列を使いたいのですが msg[0] = 'テキストA' msg[1] = 'テキストB' msg[2] = 'テキストC' msg[3] = 'テキストD' msg[4] = 'テキストE' これが出ません…。 $('span').text('msg[index]'); ではダメなのでしょうか。素人なものですみません。