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

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

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

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

Q&A

解決済

5回答

3458閲覧

javascript マウスをクリックしたまま動かすと、マス目状の画像を、黒⇔白に変えれるようにしたいです。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2020/07/10 07:54

編集2020/07/14 06:48

javascriptを勉強しています。

参考書の例題で
マウスクリックしたり、クリックしたまま移動すると、マス目が黒い画像(black.png)に変わり、
マウスを離してる間は処理を行わないプログラムがありますが、

それを少しいじって、マウスをクリックしていない時になぞると、黒だったら白(block.png)にできましたが、
そのままですと、マウスをクリックしていない時になぞると、常に黒から白に変えてしまって、使い勝手が悪いので

マウスをクリックした場合や、そのまま動かした場合にのみ、マス目状の画像を、黒だったら白(block.png)、白だったら黒(black.png)に変えれるようにしたいです。

黒く塗りつぶしている状態か否かを判別する必要もあると思うのですが、判別する記述方法がわからず、
またフラグを増やせ良いのかよくわかりません。

図にしますと、

マウスクリックしたまま動かすと黒くなりますが、

□□□□□□□□
□□□□□□□□
□□□□□□□□
□□□□□□□■
□□□□■□□■
□□□□■□□■
□□□□■□□■
□□□□■□□■

ふたたびなぞると今度は黒い部分が白くする方法が検討つきません。

□□□□□□□□
□□□□□□□□
□□□□□□□□
□□□□□□□□
□□□□■□□□
□□□□■□□□
□□□□■□□■
□□□□■□□■

丸投げで、全部教えてくれなくても、ヒントだけでも教えてもらえないでしょうか?

宜しくお願いしますm(__)m

(7/14 コメントを少し追加しました)

javascript

1<!DOCTYPE html> 2<html> 3<head> 4<script> 5 var Flag = false; // フラグ 6 var NN=64; // 枠の縦横のマス目数  7 8 window.document.onmousemove=move; // マウスを動かすと関数moveが呼び出される 9 window.document.onmouseup=up; // マウスクリックを離すと、関数upが呼び出される 10 11 function down() 12 { 13 Flag = true; // フラグにtrueを代入 14 move(); // 関数moveを呼び出し(移動時だけでなく、クリックして離した場合でも、マス目を画像にする為) 15 } 16 17 function up() 18 { 19 Flag = false; // フラグにfalseを代入 20 } 21 22 function move() 23 { 24 var x,y,n,obj; 25 x=Math.floor((event.clientX-10)/10); 26 y=Math.floor((event.clientY-10)/10); 27 if (0<=x && x<NN && 0<=y && y<NN){ 28 n=y*NN+x; 29 obj=document.getElementById("square"+n); 30 if (Flag){ 31 obj.style.cursor="pointer"; // マウスのマークをハンドマークにする 32 obj.src="black.png"; // ■の画像を代入する。 33 } else { 34 obj.style.cursor="default"; // マウスのマークを通常のカーソルにする 35         obj.src="block.png"; // □の画像を代入する。 36 } 37 } 38 return false; 39 } 40 41</script> 42</head> 43<body> 44<div id="canvas"> 45</div> 46<script> 47 48 var x,y,n=0,tag=""; 49 for (y=10;y<=(NN*10);y+=10){ 50 for (x=10;x<=(NN*10);x+=10){ 51 tag+="<img id='square"+n+"' src='block.png' style='position:absolute; left:"+x+"px;top:"+y+"px' onMouseDown='down()' />" 52 n++; 53 } 54 } 55 document.getElementById("canvas").innerHTML=tag; 56 57</script> 58</body> 59</html>

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

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

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

miyabi_takatsuk

2020/07/10 07:57

どんなにイラッときても、ルール違反(今回はマルチポスト)はいけないですよ・・・。 https://teratail.com/questions/276461 この質問内容を、元質問に書いたらよいのでは・・・?
退会済みユーザー

退会済みユーザー

2020/07/10 08:03

>どんなにイラッときても、ルール違反(今回はマルチポスト)はいけないですよ・・・。 文章を変えていますよ。ダメなんですか?
miyabi_takatsuk

2020/07/10 08:05

質問内容(文章が違うとかはただの言い訳で、質問の要件)が全く一緒なので、ダメですよ。
退会済みユーザー

退会済みユーザー

2020/07/10 08:07

>質問内容(文章が違うとかはただの言い訳で、質問の要件)が全く一緒なので、ダメですよ。 一方は締め切ってます。それに低評価が付きすぎると、回答貰える可能性が低くなるので新たに質問しなおした方がスムーズですよね。 ダメとか運営の方ですか?あまり勝手な事言わない方がいいですよ。
退会済みユーザー

退会済みユーザー

2020/07/10 08:09

低評価を付けて、相手の表現の自由を強要してくるわけですよね?
退会済みユーザー

退会済みユーザー

2020/07/10 08:10

回答する気ない方は、粘着しないでもらえますか? 迷惑行為ですよ。
退会済みユーザー

退会済みユーザー

2020/07/10 08:12

>過去の質問か、こちらの質問を、削除申請しましょう。 どこに、どう書いてあるのですか? 削除申請の強要はやめてくださいね。
Lhankor_Mhy

2020/07/10 08:15

まあ、気持ちはわからないでもないですが、それでもやはり重複質問なので低評価しました。 元質問の方に回答できそうなら、試みてみます。
退会済みユーザー

退会済みユーザー

2020/07/10 08:16

>まあ、気持ちはわからないでもないですが、それでもやはり重複質問なので低評価しました。 元質問の方に回答できそうなら、試みてみます。 既に締め切り済みです。削除したらみなさんや、自分の意見交流が無になります。
Lhankor_Mhy

2020/07/10 08:17

わかりました。 では、やめておきます。
Zuishin

2020/07/10 08:23

読めますか? 複数のユーザーから「過去に投稿した質問と同じ内容の質問」という意見がありました teratailでは閲覧数を増やす目的などにより、過去に投稿した質問と同じ内容の質問を新たに投稿することは推奨していません。 質問について新たにわかったことや試したことがあれば、すでにある質問を編集してください。
Zuishin

2020/07/10 08:29

自分で削除依頼しないのであれば、通報されることになります。それは本意ではないでしょう? ベストアンサーは取り消すことができるので、前の質問で対応してください。こちらの質問も低評価が溜まっているので乗り換える意味はありません。
Lhankor_Mhy

2020/07/10 08:31

まあ、「いじめ」と言いたくなる気持ちもわからないでもないです。 teratailに限らずQ&Aサイトの構造的な問題ですが、質問者1名と回答者N名のコミュニケーションになるので、質問者はその質問の中でどうしても少数派になりがちです。ブログ主とコメント欄なんかも同じですね。 1vsNのコミュニケーションは、炎上と同じ形なので、しんどいですからね。ご同情申し上げます。 でも、重複質問ですので低評価は戻しません。
Zuishin

2020/07/10 08:31

それと、あなたにはなぜそうなるのか理解できないかもしれませんが、回答者の質問は解決のために必要なものです。 道案内の件で言うなら、あなたは自分がどこにいるかを教えずに電話で道を聞いているようなものです。
退会済みユーザー

退会済みユーザー

2020/07/10 08:39

読めますか? >複数のユーザーから「過去に投稿した質問と同じ内容の質問」という意見がありました teratailでは閲覧数を増やす目的などにより、過去に投稿した質問と同じ内容の質問を新たに投稿することは推奨していません。 質問について新たにわかったことや試したことがあれば、すでにある質問を編集してください。 もう一つは締め切り済みですから、どうにもできませんよね? それに推奨しているだけですよね。 閲覧数を増やしたいのではなく、回答をして欲しいだけですよ。
Zuishin

2020/07/10 08:40

締め切りは解除できます。
退会済みユーザー

退会済みユーザー

2020/07/10 08:42

>締め切りは解除できます。 そうですか知りませんでした。 けど推奨しないだけですよね。どっちかを消すと、コメントなどが消えてしまう。 これはできません。
Zuishin

2020/07/10 08:43

このように書いてあります。 > 質問について新たにわかったことや試したことがあれば、すでにある質問を編集してください。
退会済みユーザー

退会済みユーザー

2020/07/10 08:43

>自分で削除依頼しないのであれば、通報されることになります。それは本意ではないでしょう? ベストアンサーは取り消すことができるので、前の質問で対応してください。こちらの質問も低評価が溜まっているので乗り換える意味はありません。 どうぞ通報してください。運営の判断に任せたら良いのでは?
退会済みユーザー

退会済みユーザー

2020/07/10 08:45

>まあ、「いじめ」と言いたくなる気持ちもわからないでもないです。 teratailに限らずQ&Aサイトの構造的な問題ですが、質問者1名と回答者N名のコミュニケーションになるので、質問者はその質問の中でどうしても少数派になりがちです。ブログ主とコメント欄なんかも同じですね。 1vsNのコミュニケーションは、炎上と同じ形なので、しんどいですからね。ご同情申し上げます。 でも、重複質問ですので低評価は戻しません。 ご配慮ありがとうございます。自分もこのように炎上みたいな事を望んで質問したわけではありませんし、質問しなおしたわけではありません。ただ質問に対する明確な回答が欲しくて行動しているだけです。 テラテイルの問題の一つとして、削除する気はありません。
Zuishin

2020/07/10 08:45

> 重複投稿です。削除お願いします。 以上のように通報しました。同じことを繰り返すようであれば、それなりの処分があると思います。
退会済みユーザー

退会済みユーザー

2020/07/10 08:46

運営の判断に任せます。
Zuishin

2020/07/10 08:52

あなたは電話で道を聞いて自分がどこにいるか話さなかった。だからそれを聞かれた。それだけです。
退会済みユーザー

退会済みユーザー

2020/07/10 08:57

>あなたは電話で道を聞いて自分がどこにいるか話さなかった。だからそれを聞かれた。それだけです。 電話で道を聞いてないです。〇〇県〇〇市まで来て現地で、現状までのソースを提示して、残りをいろんな人に聞いているだけです。 どういう根拠で電話で道を聞いているとなるのですか?
hentaiman

2020/07/10 08:58

> こちらの質問も低評価が溜まっているので乗り換える意味はありません。 ありますよ。前回の質問は丸投げだと感じたけど既に他の人からの指摘されているようだったので質問が適切に修正されるかもしれないと思ったので低評価はしませんでしたし今も未評価ですが、今回の質問は即低評価しました。 前回の質問は修正されれば低評価したユーザーには通知が行き、適切な修正だと判断されれば低評価は解除される可能性があります。低評価が減ればアクティブな質問に浮き上がってきます。 それに対して今回の質問は低評価理由を見れば分かると思いますが、何をしても低評価が解除される可能性がありません。
Zuishin

2020/07/10 09:00

> どういう根拠で電話で道を聞いているとなるのですか? 私のような悪いプログラマーではなく、多くの人たちを助けてきた善良なプログラマーたちがこぞって「あなたの場所がわからない」と言った。 この人たちは、真摯に問題解決に協力し、多くの問題を解決してきた人たちです。その人たちがあなたを助けられなかった。 これが根拠です。 なぜこれを意地悪ととったんですか?
退会済みユーザー

退会済みユーザー

2020/07/10 09:01

>こちらの質問も低評価が溜まっているので乗り換える意味はありません。 ありますよ。前回の質問は丸投げだと感じたけど既に他の人からの指摘されているようだったので質問が適切に修正されるかもしれないと思ったので低評価はしませんでしたし今も未評価ですが、今回の質問は即低評価しました。 それは他者の文ですね。
Zuishin

2020/07/10 09:01

> 乗り換える意味 言葉が足りませんでした。「この質問に乗り換える意味」です。
Zuishin

2020/07/10 09:03

> ここまでわかりやすく質問しているのに質問に答えられないレベルの方は関わらないでください。 すると回答者はいなくなります。 あなたはわかりやすいと思ったのかもしれませんが、ベテランのプログラマーにとってはそれは十分ではありませんでした。
Lhankor_Mhy

2020/07/10 09:04

いやまあ、どんなコミュニティでも「それやったら戦争だろ」ってのがありますよね。 はてなで「無断リンク禁止」って言うとか。 阪神ファンに対して「33-4」って言うとか。 いわゆる、「マナー」ってやつですね。 それでですね、なぜ重複質問がマナー違反なのかというとですね。 たとえば元質問を見て、回答の準備をしていた人がいたとしたら、労力が無駄になっているはずなんですが、それについてどう思われますか? という話なんです。 「そんなの上級者にとっては大した手間じゃないだろ」とおっしゃるんであれば、それは傲慢というものです。 たとえば、ゴミ拾いのボランティアをしてるところに、ゴミをぶちまけて「拾っておいて」と言ったら、戦争ですよね。 少なくとも「拾いやすいようにまとめといてくださいよ」とか「自分でごみ箱に捨ててくださいよ」ぐらいのことは言われますよね。 コミュニケーションにおいて、相手のことを配慮するのは基本だと思うのです。これはあなただけではなくて私や他の回答者にも言えることなのですが、一方でエンジニアには独特の文化があり、ある意味で異文化衝突が起きやすいのです。 https://ja.wikipedia.org/?curid=692064 つまりまあ、「別の国に来たつもりでコミュニケーションしてみてください」ということが申し上げたいことです。
退会済みユーザー

退会済みユーザー

2020/07/10 09:04

テラテイルのマルチポストは推奨しない仕組みはわかりましたが、丸投げな質問とは思えませんけどね。 みな、〇〇のようにしたいです。とかって質問してるのに、それに対しては低評価せずに、矛盾してます。
hentaiman

2020/07/10 09:05

> Zuishinさん 失礼しました。注意の流れで「乗り換え」と言ってたので取り違えました。 > それは他者の文ですね。 そうですね。ですが書いた通りです。今回の質問で粘るよりも前回の質問を修正した方が回答貰える可能性が高いです。
Zuishin

2020/07/10 09:07 編集

> みな、〇〇のようにしたいです。とかって質問してるのに、それに対しては低評価せずに、矛盾してます。 単に同じと思ったあなたの判断とベテランの判断が違っただけです。そこに悪意はありません。
退会済みユーザー

退会済みユーザー

2020/07/10 09:09

Lhankor_Mhyさん >たとえば元質問を見て、回答の準備をしていた人がいたとしたら、労力が無駄になっているはずなんですが、それについてどう思われますか? という話なんです。 回答の準備をしていた人がいる可能性は低いと思いましたね。それに締め切るのもこちらの自由ではないですか。未確定な事項を出しても、実害が出て無ければただの言いがかりです。 丸投げだーという低評価というゴミをぶちまけているのは、回答する気のない野次馬な人たちです。 場所を変えても、ゴミをぶちまけて迷惑してるのはこちらです。 けんかや戦争をしかけてきたのは、回答する気のない人たちです。 テラテイルのサイト趣旨に沿って、わからない事を質問しているのは、こちらです。 途中までのソースも提示してあり、1からプログラムを作ってと丸投げしていません。 どこがどう丸投げなのでしょうか? きちんと説明どなたかしてください。
退会済みユーザー

退会済みユーザー

2020/07/10 09:10

>すると回答者はいなくなります。 あなたはわかりやすいと思ったのかもしれませんが、ベテランのプログラマーにとってはそれは十分ではありませんでした。 テラテイルの回答者のレベルがこんなにも低いとは思いませんでした。
Lhankor_Mhy

2020/07/10 09:12

>それに対しては低評価せずに、矛盾してます 私は、誰に対しても「丸投げ」で低評価したことはないです。たぶん。記憶の限りでは。 というと、「あなたのことではないです」とおっしゃるかもしれませんが、私は私のことを言われているように感じています。 これは、1vsNコミュニケーションの中で敵を増やしてしまう間違ったアプローチで、いわゆる「主語がでかい」というやつです。 これは提案なのですが、「あなたたちは」ではなくて「あなたは」というコミュニケーションをしてみてはいかがでしょうか。
Zuishin

2020/07/10 09:13

> テラテイルの回答者のレベルがこんなにも低いとは思いませんでした。 ではもうわかったでしょう。時間の無駄なので出て行ってください。
退会済みユーザー

退会済みユーザー

2020/07/10 09:14

>ではもうわかったでしょう。時間の無駄なので出て行ってください。 嫌です。あなたたちが絡むから、回答したい人が寄り付かないのです。 いじめの原理と一緒です。
Lhankor_Mhy

2020/07/10 09:14

>ただの言いがかりです OK わかりました。もういいです。
退会済みユーザー

退会済みユーザー

2020/07/10 09:15

>私は、誰に対しても「丸投げ」で低評価したことはないです。たぶん。記憶の限りでは。 あなたは、テラテイルに必要な回答者です。 それに、巻き込んで指摘してすいませんでしたm(__)m
Zuishin

2020/07/10 09:16

レベルの低い人に回答されても困るのでは?
退会済みユーザー

退会済みユーザー

2020/07/10 09:19

>レベルの低い人に回答されても困るのでは? 道を聞いてるのに、明確に教えられない人ばかりが寄ってきて、あーだこーだ言ってるのですから、 「ここまでわかりやすく質問しているのに質問に答えられないレベルの方は関わらないでください。」 と言うと、 >すると回答者はいなくなります。 と言われたら、テラテイルってそうなんだと思いますよね。 以前は質問に答えてくれた方もいたのに、ユーザー離れをさせたいのかと、心配してしまいますよ。
Zuishin

2020/07/10 09:21

つまり、あなたはレベルの高い回答者が回答してくれると信じているわけですね?
hentaiman

2020/07/10 09:23

前の質問修正すれば低評価取り消してもらえて回答もつくかもしれないよって言うアドバイスを無視してまでここでコメントの応酬をしたいのか
退会済みユーザー

退会済みユーザー

2020/07/10 09:26

>前の質問修正すれば低評価取り消してもらえて回答もつくかもしれないよって言うアドバイスを無視してまでここでコメントの応酬をしたいのか 低評価なんてどうでもいいです。回答が欲しいのです。
m.ts10806

2020/07/10 09:30

お客様したいのでしたらお金払ってスクールへ。 指摘を素直に受けられない人は成長できませんし、初心者未満からも上がれません。 それでいいのでしたら、このままのスタンスを続けたら良いです。 分からないから質問してるなら、分かる人の的確なアドバイスを引き出さなければ解決しないのでは?そのためには言いたいことだけ欲しいものだけ欲していても、相手は人間ですから離れるだけでしょう。 自分本意な人は、プログラミングには向かないですし、この手のコミュニティには逆にいない方が良いです。 むしろ「回答者が回答したくなくなるような質問」が増えてる方が問題ですよね。 回答もらえないと解決もしないわけだから。 teratailほど回答を得るためのガイドラインが充実した質問サイトで回答得られないって、よほど質問が丸投げかニッチか質問者の姿勢が悪いか、ですよ。 指摘は問題解決のためのアドバイスです。 これだけ多くの回答者が関心を寄せてるのに、それをうまく使わないって勿体なくないですか?成長に使えると思いませんか? 自ら解決までのゴールを遠くしてなんのメリットがあるんでしょうか。 一考されたし。
Zuishin

2020/07/14 06:36 編集

> じゃあ粘着しないでください。 風紀委員のようなことを言わないでください。迷惑です。
m.ts10806

2020/07/10 09:32

結局解決しなくて困るのは質問者でしょう。自ら解決の可能性を削っていってるだけです。 みなさま、冷静になりましょう。
退会済みユーザー

退会済みユーザー

2020/07/10 09:33

m.ts10806さん テラテイルの趣旨をわかってない人達ばかりですね。 過大広告なのでしょうか? **【15分調べてもわからないことは、teratailで質問しよう!】 【teratailはプログラミングに関する問題解決をサポートします。 私達は、エンジニアが抱える問題の解決を全力でサポートします。 質問・回答によって 生まれたコンテンツを、同じ問題を持った人に最適な形で届けます。 プログラミングに関して、わからないことがあれば是非teratailで質問してください。 あなたがわかることがあれば、是非解決方法をシェアして解決の手助けをしてください。 あなたの全ての行動が、いつか多くの日本のエンジニアの為になります。】
miyabi_takatsuk

2020/07/10 09:33

> 質問の趣旨と違う事ばかりコメントして何も役にたっていません。 最初に質問の趣旨に沿った質問修正依頼を突っぱねたのは、むしろ質問者さんの方では・・・? > 低評価なんてどうでもいいです。回答が欲しいのです。 とにかく、マルチポストのままだと、いつまでも余計に回答はもらえませんので、どちらかを削除依頼することをお勧めします。 そして、残した方の質問内容を、 みなさんの質問修正依頼に沿った内容に変えていかれるとよいかと。
退会済みユーザー

退会済みユーザー

2020/07/10 09:35

>あなたは回答がほしいだけ、私は粘着したいだけ、イーブンですね。 粘着やめてくださいね。そんなにマルチポストや丸投げだと言うのですか? どういった理由で粘着してるのか。ただ言い負かされたくないからですか? 少しは相手の状況や心境などを考えても良いのでは?
退会済みユーザー

退会済みユーザー

2020/07/10 09:36

>とにかく、マルチポストのままだと、いつまでも余計に回答はもらえませんので、どちらかを削除依頼することをお勧めします。 そして、残した方の質問内容を、 みなさんの質問修正依頼に沿った内容に変えていかれるとよいかと。 確かにマルチポスト的ですが、質問内容も変えてますし、締め切ってもあります、それに閲覧数稼ぎの為でもないし、マルチポストは推奨されないだけで、禁止ではありませんよ?
Zuishin

2020/07/10 09:38

> テラテイルの趣旨をわかってない人達ばかりですね。 では運営の判断を待ちましょう。この質問が削除されたらわかっていないのはあなたの方というのが確定します。
退会済みユーザー

退会済みユーザー

2020/07/10 09:39

>結局解決しなくて困るのは質問者でしょう。自ら解決の可能性を削っていってるだけです。 みなさま、冷静になりましょう。 いえ、自分は、今後のテラテイル環境の為に一石を投じている気持ちです。 丸投げ低評価などは納得いきません。
Zuishin

2020/07/10 09:39

> 粘着やめてくださいね 風紀委員のようなことを言わないでください。迷惑です。
miyabi_takatsuk

2020/07/10 09:40

個人的な意見ですが、、、 > 【15分調べてもわからないことは、teratailで質問しよう!】 に関してだけは、少し語弊があるといつも思います。 15分調べて分からなくて、 その後様々試してみてだめで、丸投げにならないよう、調べたことなど、質問内容考えて、が回答もらえるラインな気がします。 あと、最低限、要件定義がしっかりされてることが大事だと思います。 すみません、完全に個人的な意見です。
退会済みユーザー

退会済みユーザー

2020/07/10 09:42

>15分調べて分からなくて、 その後様々試してみてだめで、丸投げにならないよう、調べたことなど、質問内容考えて、が回答もらえるラインな気がします。 あと、最低限、要件定義がしっかりされてることが大事だと思います。 すみません、完全に個人的な意見です。 いえ、主観は人それぞれ違いますから。こちらは初心者ですから、テラテイル経験歴が長い人が言う事には真実性もありますね。
m.ts10806

2020/07/10 09:43

そこだけ切り取られても、なんの反論にもなってません。 「回答が欲しいなら、回答を引き出すのが質問者の責任」です。 丸投げではないと主張したいのでしたら、丸投げな印象を与える表現は慎まないといけませんね。 こればかりは自己評価ではなんの解決にもなりません。 サイトが答えをくれるわけではなく、コミュニティの参加者が質問を評価し、妥当な内容なら気が向いたらアドバイスをする。それだけです。 質問者に解決済みにする機能があるから勘違いしてるかもしれませんが、むしろ選ぶのは回答者です。「質問するときのヒント」が充実していることがその理由です。 それに、具体的な回答を得たとして、その回答を理解できる力がないと解決しませんよね? 自身で説明できないツギハギコードで投げる人にありがちです。 自身が理解できないなら、まだそこに手を出す段階ではないということです。 もっと初級編のコードを組みましょう
Zuishin

2020/07/10 09:44

> あなたは暇なんですね。わかりましたよ。お疲れ様でした。 では、あなたが間違っていたことが確定した場合、このような粘着をしたことを謝罪してください。
miyabi_takatsuk

2020/07/10 09:44

> 推奨されないだけで、禁止ではありませんよ? そうですね。 禁止ではないですね。 まぁ、推奨されないってことは、回答を得られる機会もほとんどないってことですけどね・・・。 (推奨されない質問 = 様々な理由から回答を得ずらい質問ということ)
退会済みユーザー

退会済みユーザー

2020/07/10 09:47

>「回答が欲しいなら、回答を引き出すのが質問者の責任」 もういいです。営業を取ってこいと言われて、相手の主張を鵜のみにして自分の中の主張を曲げるのはできません。 確かに、回答を貰えるようにする、心象などの良いうまいやり方もあるのでしょうが、不器用な自分では無理でしょう。自分が全部悪いという事にしといてください。 皆さまに迷惑をかけて申し訳ございませんでした。 疲れたし、時間も無いので、しばらくコメントしないと思います。
Zuishin

2020/07/10 09:48

ようやくわかったようですね。謝罪を受け入れます。ただし、受け入れたのは私一人です。他の人は知りません。
m.ts10806

2020/07/10 12:10 編集

>営業を取ってこいと言われて、相手の主張を鵜のみにして自分の中の主張を曲げるのはできません。 無理やり自分のなかでだけ分かるように例える人は、書いた通りにしか動かないプログラミングに最も向かない人かと思います。思った通りには動きません。 ただ、ある程度社会にでたことがあるなら(例えアルバイトや学校でも)、コミュニティで敵を作ることの不味さくらいはご存じでしょう。 そこを「不器用だから無理」で片付けられるものかどうか、あくまで自分がどのように振る舞えばコミュニティ内で居場所を作れるか考えてきた私には分かりませんが、自分の主張ばかり通そうとするのが悪手であることには間違いありません。 プログラミングに置き換えましょう。「俺はこう動くと思って書いたのになんで動かないんだ!」と主張しても、書いた通りにしか動かないプログラムは書かれた通りの結果しか返しません。思った通りの結果を出したいのであれば、「主張を曲げる」のではなく、「寄り添う」ことです。 コメントを寄せている人たちは少なからず興味を持ち、やり方はそれぞれですが解決へのヒントをどうだせば良いか探っているだけなので、多かれ少なかれ寄り添おうとしています。そこだけは認識されますよう。 せめて「プログラムは思った通りではなく書いた通りに動く」だけでも覚えて、教訓にしてください。 (だから、説明できないコードは書いてはいけないのです)
退会済みユーザー

退会済みユーザー

2020/07/14 06:30

先日は被害妄想から疑心暗鬼になり大変申し訳ございませんでしたm(__)m terateilについて初心者で仕様やルールがわかりませんでしたが、今後は皆さんにご迷惑をかけないような質問や受け答え等、気を付けたいと思いますので、ご指導ご鞭撻の程、宜しくお願いいたしますm(__)m
guest

回答5

7

調べてもわからなかったのですね。。。
みんなコードを提示しないなんてひどい!コードを書きました!ご参考までに!!

HTML

1 2<!DOCTYPE html> 3<?php 4 5for ( $i = 0; $i < 10; $i++ ) { 6 for ( $j = 0; $j < 10; $j++ ) { 7 if ( isset($_GET[$i.'x'.$j]) ) { 8 $color = $_GET[$i.'x'.$j] == 'white' ? 'black' : 'white'; 9 } else { 10 $color = $_COOKIE[$i.'x'.$j] == 'white' ? 'white' : 'black'; 11 } 12 13 setcookie( $i.'x'.$j, $color, time()+60*60*24*7); 14 echo '<a href="?'.$i.'x'.$j.'='.$color.'">'; 15 echo $color == 'black' ? '■' : '□'; 16 echo '</a>'; 17 } 18 echo '<br />'; 19} 20

投稿2020/07/11 01:58

編集2020/07/11 02:00
kyoya0819

総合スコア10429

okurasuta, kai0310, C0ntRA1L, hojniu👍を押しています

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

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

退会済みユーザー

退会済みユーザー

2020/07/14 06:40

回答ありがとうございますm(__)m
guest

7

ベストアンサー

丸投げで、全部教えてくれなくても、ヒントだけでも

元のコードを人に説明できるようになってから改修に取り組んでください。
これはヒントどころか確実な解決手段です

投稿2020/07/10 09:21

編集2020/07/10 09:35
m.ts10806

総合スコア80705

miyabi_pudding, magf, Kapustin, kei344, SakuBlade, BluOxy👍を押しています

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

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

退会済みユーザー

退会済みユーザー

2020/07/14 06:35

コメントありがとうございます。 元のコードは完璧には理解しておりません。 確かに一足飛びで学習してもそれは正攻法では無いのかもしれませんねm(__)m コードをいじっていたら改造方法が気になってしまって質問させていただきました。 プログラミングは難しいですが今後も頑張って上達したいです。m(__)m
m.ts10806

2020/07/14 06:44

間に合せの言葉より結果で。 コードは書いた通りにしか動かない。書かずに言葉でごまかしてもコードは動いてはくれない。 こちらが欲しいのはお礼や謝罪ではなくフィードバック。
退会済みユーザー

退会済みユーザー

2020/07/14 06:50

コメントありがとうございますm(__)m フィードバックって何でしょうか? とりあえず、質問文を少し修正しました。(コメントを追加しました。)
m.ts10806

2020/07/14 07:30

え。分からないのに検索しないんですか?こんな意味がハッキリしてる単語、15分もかかりませんよ。 こんな次元で手を抜くとは、信用できませんね。口だけです。ではでは。
退会済みユーザー

退会済みユーザー

2020/07/14 07:32

検索しましたけど、フィードバックは何かを返すのはわかりましたが、teratailの回答者の方に何を返したらいいのかがわかりませんでした。
m.ts10806

2020/07/15 10:42

>何かを返すのはわかりましたが、teratailの回答者の方に何を返したら それを一般的には「分かってない」と言います。曖昧なことをさも確定のように発言するのをやめては。 もう、癖になってるので困難とは思いますが、プログラミングにおいては致命的なので、早いうちにどうするか決めた方が良いでしょう。 他のことを気にしてる余裕があるなら本件に全力で取り組んでは? その結果が「フィードバック」です。 何一つ返されてません。むしろ、マイナスなことばかりしています。 指摘を受け入れないから泥沼化。
guest

5

じゃあ実装のヒントを。

質問文のコードの意味をきちんと理解できているなら、Flagすなわちマウスが押されているかどうかで白か黒の画像をセットするところはわかっていると思います。

目的はFlagが1のとき、マウスカーソル下にある画像の白黒を切り替えることです。画像すなわちsrc要素はobjで取得できているので、obj.srcを見れば今何の画像がセットされているか判別できます。
obj.srcがblack.pngだったらblock.pngに、そうでなければ逆のpngをセットするようにすれば画像を反転させることができます。

修正箇所はほんのちょっとです。考えてみてください。

投稿2020/07/10 10:46

hope_mucci

総合スコア4447

miyabi_pudding, tatuki81, magf, kei344👍を押しています

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

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

hoshi-takanori

2020/07/10 11:04

補足すると、obj.src はフルパスを返すので、=== ではなく endsWith を使って比較するといいかも。 また、同じマスの中でマウスが動いた場合はその場所が白と黒と交互に変わりますね。
hope_mucci

2020/07/10 11:58 編集

検証ではフルパスで行いました(外部サイトのdummyimageを使ったので)。本来ならsrcよりtitleやalt、data属性を使ったほうがすっきるするかと思います。 > また、同じマスの中でマウスが動いた場合はその場所が白と黒と交互に変わりますね。 それは質問者さんに今後の課題として解決してもらいましょう。
退会済みユーザー

退会済みユーザー

2020/07/14 06:36

ヒントありがとうございますm(__)m 時間ができましたらヒントを参考にしてみたいと思いますm(__)m
退会済みユーザー

退会済みユーザー

2020/07/15 21:25

せっかくヒントを頂いたのですが、2時間くらいコードと向き合ってましたが、スキルが足らずにわかりませんでした・・・
hope_mucci

2020/07/16 01:41

どういった点が分からないのでしょうか。 ・Flagの扱い ・現在セットされている画像の判別方法 ・画像の交換方法
退会済みユーザー

退会済みユーザー

2020/07/16 12:35

度々の回答ありがとうございますm(__)m 所有しているこのソースコードのある書籍を見たところ、他のページにヒントとなるような問題を見つける事ができました。 (白をクリックしたら黒、黒をクリックしたら青、青をクリックしたら白にかえる問題です。) それを写経して、構造を理解して、今回の質問の答えが出るかもしれません。 基本的な理解力不足でしたm(__)m レベルや理解度が上がって無いのに、先のエリアに進みすぎてもダメなのを実感しました。 ちなみに分からなかった点は、Flagの扱いと、関数などの連携など、いろいろです。 しばらく独学で基礎なども含めて勉強したいと思います。 度々、ご親切に対応していただき誠にありがとうございましたm(__)m
guest

3

質問のコードについて、JavaScriptの書き方が古く、また、確認用の画像も用意できなかったので、改造は無理と判断し、完全に最初から書き直しました。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>https://teratail.com/questions/276612</title> 7 <script type="module"> 8import { h, app } from "https://unpkg.com/hyperapp" 9 10const SIZE = 10; 11 12const MASU_SIZE = "20px"; 13 14const masuReverse = (masuTable, {x, y}) => 15 masuTable.map((masuRow, my) => { 16 if (my === y) { 17 const row = [...masuRow]; 18 const color = row[x]; 19 if (color === "white") { 20 row[x] = "black"; 21 } else { 22 row[x] = "white"; 23 } 24 return row; 25 } else { 26 return masuRow; 27 } 28 }); 29 30const masuAction = (state, {flag, x, y}) => 31 flag ? {masuTable: masuReverse(state.masuTable, {x, y})} : state; 32 33const Masu = ({color, x, y}) => 34 h("td", { 35 style: { 36 height: MASU_SIZE, 37 width: MASU_SIZE, 38 "background-color": color 39 }, 40 onmouseenter: [masuAction, (e) => ({flag: e.buttons === 1, x, y})], 41 onmousedown: [masuAction, (e) => ({flag: e.buttons === 1, x, y})] 42 }, '') 43 44const init = { 45 masuTable: [...Array(SIZE)].map(() => Array(SIZE).fill("white")) 46}; 47 48const view = (state) => 49 h("main", {}, 50 h("table", {style: {border: "1px solid", "border-collapse": "collapse"}}, 51 state.masuTable.map((masuRow, y) => 52 h("tr", {}, 53 masuRow.map((masu, x) => 54 h(Masu, {color: masu, x, y}) 55 ) 56 ) 57 ) 58 ) 59 ); 60 61const node = document.getElementById("app"); 62 63app({init, view, node}) 64 </script> 65 </head> 66 <body> 67 <main id="app"></main> 68 </body> 69</html>

投稿2020/07/10 22:25

raccy

総合スコア21733

Lhankor_Mhy, miyabi_pudding👍を押しています

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

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

m.ts10806

2020/07/11 02:08

この回答見てマークダウンのcodeの中でリンクきくことを知った。いつの間に。
Lhankor_Mhy

2020/07/11 02:17

おお、ほんとですね。便利かも?
退会済みユーザー

退会済みユーザー

2020/07/14 06:38

回答ありがとうございますm(__)m 時間ができましたら参考にしてみたいと思いますm(__)m また、重複質問の件、申し訳ございませんでした。 今後は気を付けますm(__)m
guest

3

マウスをクリック

  1. クリックという操作は、ボタンを押して直ぐに放す操作になります。
  2. マウスクリックしたまま動かす という表現は間違いです。

ボタンを押下したまま動かす操作が一般的です(ドラッグ操作)。

コンピュータの入力デバイス毎にある操作名 も覚えておく必要があります。
適切な語ではなかった為、「ドラッグ操作中の要件」が伝わってきませんでした。

ヒントだけ

ご質問のコードからは、押す操作(押下)、放す操作(開放)に分けて考える内容になっていますので、以下の条件でマス目が反転するものとして、コードを考えてみてください。

  1. マウスボタンが押下されたタイミングでマス目を切り替える
  2. マウスカーソルが動くときは、ボタンの押下状態も考慮してマス目を切り替える

javascript

1// 三項演算(条件演算)で値を入れ替える 2// obj は <img> 3obj.src = obj.src==="block.png" ? "black.png" : "block.png";

その他、event (MouseEvent) に渡される button プロパティの値も利用する必要がありそうです。

投稿2020/07/10 11:16

編集2020/07/10 11:25
AkitoshiManabe

総合スコア5432

miyabi_pudding, kei344👍を押しています

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

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

退会済みユーザー

退会済みユーザー

2020/07/14 06:37

ヒントありがとうございますm(__)m 時間ができましたらヒントを参考にしてみたいと思いますm(__)m
退会済みユーザー

退会済みユーザー

2020/07/15 21:25

せっかくヒントを頂いたのですが、2時間くらいコードと向き合ってましたが、スキルが足らずにわかりませんでした・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

JavaScript

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