ボタンを押したら他のボタンが消える問題について

ボタンを2つ用意して1つ目のボタンを押したら動画が表示され、もう1つのボタンを押したら、また動画が表示されるプログラムを作りたいのですが、1つ目のボタンを押したら動画が表示されるまではいいのですが、他のボタンが消えてしまいます。なぜでしょうか？
ご回答の方、お願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>index</title>
6</head>
7
8<body>
9  <p><input type="button" value="刺激1" onclick="m1(stimu)"></p>
10  <p><input type="button" value="刺激2" onclick="m2(stimu)"></p>
11
12  <script src="js/jquery-3.4.1.min.js"></script>
13  <script src="js/index.js"></script>
14</body>
15
16</html>
17

JavaScript
1//ランダムな値を取得
2function rand() {
3  var movieList = [0, 1, 2, 3, 4, 5, 6];
4  var movie_1, movie_2;
5
6  // 組み合わせの用意
7  var movieComb = [];
8  for (var i = 0; i < movieList.length; i++) {
9    for (var j = 0; j < movieList.length; j++) {
10      if (movieList[i] !== movieList[j]) {
11        movieComb.push([movieList[i], movieList[j]]);
12      }
13    }
14  }
15  // console.log(movieComb);
16
17  // シャッフルする
18  for (var i = movieComb.length - 1; i > 0; i--) {
19      var r = Math.floor(Math.random() * (i + 1));
20      var tmp = movieComb[i];
21      movieComb[i] = movieComb[r];
22      movieComb[r] = tmp;
23  }
24
25  // 取り出す
26  for (var i = 0; i < movieComb.length; i++) {
27      movie_1 = movieComb[i][0];
28      movie_2 = movieComb[i][1];
29      return [movie_1, movie_2];
30  }
31}
32var stimu = rand();
33
34// ムービーを表示するための関数
35function m1(stimu) {
36  document.write("<div>"+stimu[0]+"</div>");
37  console.log(stimu[0]);
38  if (stimu[0] === 0) {
39    movie0();
40  }
41  else if (stimu[0] === 1) {
42    movie1();
43  }
44  else if (stimu[0] === 2) {
45    movie2();
46  }
47  else if (stimu[0] === 3) {
48    movie3();
49  }
50  else if (stimu[0] === 4) {
51    movie4();
52  }
53  else if (stimu[0] === 5) {
54    movie5();
55  }
56  else if (stimu[0] === 6) {
57    movie6();
58  }
59}
60function m2(stimu) {
61  document.write("<div>"+stimu[1]+"</div>");
62  console.log(stimu[1]);
63  if (stimu[1] === 0) {
64    movie0();
65  }
66  else if (stimu[1] === 1) {
67    movie1();
68  }
69  else if (stimu[1] === 2) {
70    movie2();
71  }
72  else if (stimu[1] === 3) {
73    movie3();
74  }
75  else if (stimu[1] === 4) {
76    movie4();
77  }
78  else if (stimu[1] === 5) {
79    movie5();
80  }
81  else if (stimu[1] === 6) {
82    movie6();
83  }
84}
85
86//動画再生
87function movie0() {
88  document.write("<video autoplay controls width=\"640\" height=\"360\">"+"<source src=\"kick/Kick_0.0.mp4\" type=\"video/mp4\">"+"</video>");
89}
90function movie1() {
91  document.write("<video autoplay controls width=\"640\" height=\"360\">"+"<source src=\"kick/Kick_0.5.mp4\" type=\"video/mp4\">"+"</video>");
92}
93function movie2() {
94  document.write("<video autoplay controls width=\"640\" height=\"360\">"+"<source src=\"kick/Kick_1.0.mp4\" type=\"video/mp4\">"+"</video>");
95}
96function movie3() {
97  document.write("<video autoplay controls width=\"640\" height=\"360\">"+"<source src=\"kick/Kick_1.5.mp4\" type=\"video/mp4\">"+"</video>");
98}
99function movie4() {
100  document.write("<video autoplay controls width=\"640\" height=\"360\">"+"<source src=\"kick/Kick_2.0.mp4\" type=\"video/mp4\">"+"</video>");
101}
102function movie5() {
103  document.write("<video autoplay controls width=\"640\" height=\"360\">"+"<source src=\"kick/Kick_2.5.mp4\" type=\"video/mp4\">"+"</video>");
104}
105function movie6() {
106  document.write("<video autoplay controls width=\"640\" height=\"360\">"+"<source src=\"kick/Kick_3.0.mp4\" type=\"video/mp4\">"+"</video>");
107}
108

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

回答1件

ベストアンサー

他のボタンが消えてしまいます。なぜでしょうか？

document.writeを使っているからです。
document.writeは新しい文書を作っているようなものですので1回でも使うと消えると他のものがすべて消えると思います。

insertAdjacentHTMLを使うことをオススメします。
次のようにしてindex.jsのdocument.writeをinsertAdjacentHTMLに書き換えてみてください。

javascript
1document.write = function(content) {
2  document.body.insertAdjacentHTML('beforeend', content);
3}

投稿2019/09/29 06:34

querykuma

総合スコア777

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

ボタンを押したら他のボタンが消える問題について

関連した質問