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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

268閲覧

複数回イベントが起きたときに動かなくなる

moscow3

総合スコア201

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/11/09 17:09

編集2017/11/09 17:29

clickイベントを複数回起こすと、動かなくなります。

やりたいこと;
AとB
CとD
EとF
をペアにする

はじめに「??」の文字をクリックすると、A・C・Eのどれかが画面に出る

その状態でもう一度文字(A or C or E)をクリックすると、それに対応した文字が画面に出る
(AならB・CならD・EならF というように)

今起きている問題;
初めの文字(A)が出たあと、もう一度クリックすると文字が消える

開発環境;
monaca

※consoleには、if else と一回ずつだけ表示されます。(それ以降はボタンを何度押しても反応しません)

html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11<body> 12 <div id="question">??</div>  13 <script> 14 var t=0 15 var S="A,B,C,D,E,F" 16 var comma = ","; 17 var list=S.split(comma) 18 19 function change(){ 20 if (t==0){ 21 var length=list.length 22 var num = Math.floor( Math.random() * (length/2))+1; 23 this.textContent = list[num*2-2]; 24 t=1 25 console.log("if") 26 }else{ 27 this.textContent = list[num*2-1]; 28 t=0 29 console.log("else") 30 } 31 } 32 33 var Q=document.getElementById('question') 34 Q.addEventListener('click', change) 35 </script> 36</body> 37</html> 38

回答お待ちしております

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

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

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

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

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

guest

回答1

0

ベストアンサー

ざっと見ただけですが、少なくとも下記のようになります。

JavaScript

1 var length=list.length 2 var num = Math.floor( Math.random() * (length/2))+1; 3 if (t==0){ 4 //var length=list.length 5 //var num = Math.floor( Math.random() * (length/2))+1; 6 this.textContent = list[num*2-2]; 7 t=1 8 console.log("if") 9 }else{ 10 this.textContent = list[num*2-1]; 11 t=0 12 console.log("else") 13 }

追記:

JavaScript

1var t = 0; 2var list = "A,B,C,D,E,F".split( "," ); 3var length = list.length 4var num; 5 6function change() { 7 if ( t === 0 ) { 8 num = Math.floor( Math.random() * ( length / 2 ) ) + 1; 9 this.textContent = list[ num * 2 - 2 ]; 10 t = 1; 11 console.log( "if" ); 12 } else { 13 this.textContent = list[ num * 2 - 1 ]; 14 t = 0; 15 console.log( "else" ); 16 } 17} 18 19var Q = document.getElementById( 'question' ); 20Q.addEventListener( 'click', change ); 21```[https://jsfiddle.net/pLqmwncx/](https://jsfiddle.net/pLqmwncx/)

投稿2017/11/09 17:15

編集2017/11/09 18:48
kei344

総合スコア69366

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

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

moscow3

2017/11/09 17:18

ただし、そうするとA・B C・D でペアを作ることができません。 (まいかいランダム値を決めるのでAの次にBをだしたいのにDが出る というようなことが起こってしまいます。)
kei344

2017/11/09 17:31

回答は「もう一度クリックすると文字が消える 」の部分についての指摘です。「num」が定義されていないところで使っても思った動作をしないですよ、ってだけです。
moscow3

2017/11/09 21:00

追記ありがとうございました。 見事に解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問