質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

850閲覧

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

gyoruo

総合スコア61

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/09/29 06:09

ボタンを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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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.50%

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

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

質問する

関連した質問