小鳥の成長part2

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら  ※コードを貼り付ける場合は [code][/code] で囲って下さい。詳しくはこちら
ルービ

小鳥の成長part2

#1

投稿記事 by ルービ » 8年前

htmlとcssとjavascriptの勉強初めて早三日、とうとうデザインだけ作れました!

コード:

<html>
<head>
<title>cssで図作成</title>
</head>
<body>
<div style="width : 700px; height : 700px; border : 2px solid red">
	<TABLE border="1">
	<TR>
	<TD width="300" height="300">
		<TABLE border="1">
		<TR>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		</TR>
		<TR>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		</TR>
		<TR>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		</TR>
		<TR>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		</TR>
		<TR>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		</TR>
		</TABLE>
	</TD>
	<TD width="300" height="300">
		<TABLE border="1">
			<TR>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
			</TR>
			<TR>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
			</TR>
			<TR>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
			</TR>
			<TR>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
			</TR>
			<TR>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
				<TD width="50" height="50"></TD>
			</TR>
		</TABLE>
	</TD>
	</TR>
	</TABLE>
	

	<div style="width : 250px; height : 120px; border : 2px solid red">
		<div style="width : 30px; height : 15px; border : 2px solid black">
		</div>

		<TABLE border="1" id="table_top">
		<TR>
			<TD width="40" height="40"></TD>
			<TD width="40" height="40"></TD>
			<TD width="40" height="40"></TD>
			<TD width="40" height="40"></TD>
			<TD width="40" height="40"></TD>
			<TD width="40" height="40"></TD>
		</TR>
		</TABLE>
			<input type="button" value="OK!!">
	</div>

	<TABLE border="1" id="table_top">
	<TR>
		<TD width="120" height="120">後~秒</TD>
		<TD width="120" height="120">~pt</TD>
	</TR>
	</TABLE>


	<TABLE border="1" id="table_top">
	<TR>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
		<TD width="50" height="50"></TD>
	</TR>
	</TABLE>


	<div style="width : 15px; height : 30px; border : 2px solid black">
	</div>
</div>

</body>
</html>
ここからhttp://www.kfactory.info/game2.phpのゲームに似せたものを作 ... 勉強すればいいですか
実はjavascriptの仕組みがまだ分かってないとこです。
あと、このスレ解決しないで置いておきます。サイト見てもわからないとこがあったりするのでわからないことあるたびに質問させてもらいます。スレ複数すみません。

ルービ

Re: 小鳥の成長part2

#2

投稿記事 by ルービ » 8年前

ルービです。

図をクリック?できるようにする方法がわからないです。
ランダム作成?がわからないです。if(i=0,i>100,i++){}とか使えばできますか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#3

投稿記事 by softya(ソフト屋) » 8年前

javascriptで処理するならcssを別ファイルにして各タグにID名やclass名でcssを割り当てしてやらないと不便だと思います。
あと、このhtmlに対して処理する前に、もっと簡単なjavascriptの処理から挑戦しないと辛いんじゃないだろうかと思ったりします。
つまり、色の書き換え方とかを勉強する必要性ですね。それを試すにはhtmlが複雑だと思うわけです。
javascriptの入門とjavascriptだけで作るよりも楽になるjQueryをご紹介しておきます。

直接ゲームではないですが、基本的な所からやるとしたらこういう所でしょう。
「JavaScript入門」
http://www.pori2.net/js/
「イヌでもわかるJavaScript講座」
http://www.red.oit-net.jp/tatsuya/java/index.htm
「JavaScript講座[入門から各種テクニックを紹介]」
http://www.site-cooler.com/kwl/javascript/

●もっと深く学ぶ。
「とほほのJavaScriptリファレンス」
http://www.tohoho-web.com/js/index.htm
「JavaScript入門」
http://www.ajaxtower.jp/js/

●jQuery(javascriptライブラリ)を使って楽に作ってみる。 ← ★注目
「ASCII.jp:40分で覚える!jQuery速習講座」
http://ascii.jp/elem/000/000/498/498710/
「ノンプログラマーのためのjQuery入門」

「jQuery入門 - ポンクソフト」
http://ponk.jp/jquery/basic/
「ASCII.jp:Web制作の現場で使えるjQuery UIデザイン入門」
http://ascii.jp/elem/000/000/438/438206/
「jQuery 日本語リファレンス」
http://semooh.jp/jquery/
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#4

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:ルービです。

図をクリック?できるようにする方法がわからないです。
ランダム作成?がわからないです。if(i=0,i>100,i++){}とか使えばできますか?
jQueryを使うとクリックは多分楽にできるようになります。
ランダム作成は非常にプログラム的なのでjavascriptをちゃんと勉強しましょう。

「乱数を扱う-JavaScript入門」
http://www.pori2.net/js/number/4.html
ランダムの使い方の一例です。

こっからは時間が掛かると思いますが、あせらず進めましょう。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#5

投稿記事 by ルービ » 8年前

>>softyaさん

わかりやすい説明と勉強サイトありがとうございます。

また来ます。

ルービ

Re: 小鳥の成長part2

#6

投稿記事 by ルービ » 8年前

ルービです。
softyaさんにいくつかサイトを紹介してもらいましたがJavascript入門サイトだけで大分かかりました。(理解はそれほど時間かからなかったです)

けど自分は復習が苦手なので全部やる気にどうしてもなれません。
Javascriptはここのサイトで覚えれる、など1つのサイトに絞って教えてください。
言語ごと?にお願いします。

アバター
h2so5
副管理人
記事: 2212
登録日時: 9年前
住所: 東京
連絡を取る:

Re: 小鳥の成長part2

#7

投稿記事 by h2so5 » 8年前

全部のサイトを読む必要はないです。
入門サイトはひと通り読んでおくといいですが、その他のサイトは必要に応じてみれば良いと思います。

ルービ

Re: 小鳥の成長part2

#8

投稿記事 by ルービ » 8年前

>>h2so5さん
ありです。
そうします。


あと、jQueryとcssとJavascriptのオススメの使い分け方?を教えてください。

ルービ

Re: 小鳥の成長part2

#9

投稿記事 by ルービ » 8年前

それと作りたいゲームが載ってるサイトのメイン拡張子?がphpなんですけど、Javascriptだけでもphp?と同じように作れますか?

アバター
h2so5
副管理人
記事: 2212
登録日時: 9年前
住所: 東京
連絡を取る:

Re: 小鳥の成長part2

#10

投稿記事 by h2so5 » 8年前

ルービ さんが書きました: あと、jQueryとcssとJavascriptのオススメの使い分け方?を教えてください。
使い分けというか、それぞれの役割は

jQuery
Javascriptを扱いやすくするためのライブラリです。JavascriptからHTMLを操作するのが簡単になります。
Javascriptをラップしているだけなので、jQueryを使わなくても同じことはできます。

css
HTMLの見た目を設定するために使います。

javascript
ブラウザで様々な動作をさせることができる言語です。
これがないとゲームを作れません。
ルービ さんが書きました:それと作りたいゲームが載ってるサイトのメイン拡張子?がphpなんですけど、Javascriptだけでもphp?と同じように作れますか?
おそらくランキング機能にPHPを使用しているので、ランキング機能を除けばJavascriptだけでできます。
ランキング機能を作るにはPHPなど別の言語が必要になります。

ルービ

Re: 小鳥の成長part2

#11

投稿記事 by ルービ » 8年前

>>h2so5さん

どんなものなのかわかりました。
ありです。
またわからないことあったらお願いします。

また来ます。

ルービ

Re: 小鳥の成長part2

#12

投稿記事 by ルービ » 8年前

softya(ソフト屋) さんが書きました:javascriptで処理するならcssを別ファイルにして各タグにID名やclass名でcssを割り当てしてやらないと不便だと思います。
この部分がよくわからないです。
調べるべきですが例でも簡単にでもいいので教えてください。

ルービ

Re: 小鳥の成長part2

#13

投稿記事 by ルービ » 8年前

↑の質問取り消します。
もう少しサイト見てから質問しにきます。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#14

投稿記事 by softya(ソフト屋) » 8年前

プログラミングの基本ですが、最初から大物にとりかからず小さなことから実験を始めて下さい。
1個しか要素がないテーブルをクリックしたら色を変えるとか小さいな事から実験をし始めて部分部分の機能をテストしてから、それらを統合して大きな機能を実現します。

あとjQueryのメリットはブラウザ間のjavascirptの違いを吸収してくれるので色んなブラウザで動く可能性が高くなることですね。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#15

投稿記事 by ルービ » 8年前

>>softyaさん

小さい事から実験していってみます。

jQueryですが、関数とか覚えるのが苦手なのでjQueryは使わないで作ろうと思います。

cssですが、なんかよくわからないのでJavascriptだけでも作れますか?

少ない知識で今からやろうとしてるのは<input type="hidden" id="hiddenA1" name="hiddenA1" value="#ffffff">
という感じでテーブルクリックで色を送る、ってのをやってみようと思ってます。

アバター
h2so5
副管理人
記事: 2212
登録日時: 9年前
住所: 東京
連絡を取る:

Re: 小鳥の成長part2

#16

投稿記事 by h2so5 » 8年前

ルービ さんが書きました: jQueryですが、関数とか覚えるのが苦手なのでjQueryは使わないで作ろうと思います。
jQueryを使わなくても関数は使う必要がありますし、jQueryを使わない場合は逆に難易度が上がります。
関数は暗記しなくていいので分からなくなったら調べてください。

ルービ

Re: 小鳥の成長part2

#17

投稿記事 by ルービ » 8年前

>>h2so5
jQueryの省略関数?みたいのを理解するのが難しいです。

Javascriptの関数については調べて使ってます。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#18

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:cssですが、なんかよくわからないのでJavascriptだけでも作れますか?
少ない知識で今からやろうとしてるのは<input type="hidden" id="hiddenA1" name="hiddenA1" value="#ffffff">
という感じでテーブルクリックで色を送る、ってのをやってみようと思ってます。
cssを使わないと却って面倒になる部分もあると思うんでけどね。
今やろうとしている事だけなら出来るかも知れませんが、複雑なことをやり始めると必要なことに気づくかも知れませんね。
今必要ないと思うのならナシでとりあえずやってみてください。
ルービ さんが書きました: jQueryの省略関数?みたいのを理解するのが難しいです。

Javascriptの関数については調べて使ってます。
Javascriptの関数の方が面倒だと私は思うんですが人それぞれでしょうか。
どちらを使うかはご自分で判断してもらって良いですよ。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#19

投稿記事 by ルービ » 8年前

やってみます。

ルービ

Re: 小鳥の成長part2

#20

投稿記事 by ルービ » 8年前

表を作るのにhtmlのテーブル?では大変なので<div></div>を使って作ってみようとしたんですが。
cssのヘッドに書いてbodyで呼び出しをやってみたんですけどうまくいきません。

コード:


<html>
<head>
<style type="text/css">
  <!--
  #aaa {div style="width : 800px; height : 800px; border : 3px solid black"}
  -->
  </style>
</head>
<body>
<p id=aaa>
	<div style="width : 700px; height : 400px; border : 3px solid black">
		<table>
	</div>
</p>
</body>
</html>
間違ってるところがあったら教えてください。
一応最終的にcssは外部ファイルに書き込んで呼び出すつもりです。
その方が1つのソース?が見やすいと思ったからです。
コードの指摘お願いします。

アバター
h2so5
副管理人
記事: 2212
登録日時: 9年前
住所: 東京
連絡を取る:

Re: 小鳥の成長part2

#21

投稿記事 by h2so5 » 8年前

13行目のtableタグは何ですか?

ルービ

Re: 小鳥の成長part2

#22

投稿記事 by ルービ » 8年前

>>h2so5
最初テーブルでやろうとして消すの忘れてました。
このコードだとid=aaaが画面に表示されません。
cssのやり方が違うと思うんですがどう違うのか教えてください。

コード:

<html>
<head>
<style type="text/css">
  <!--
  #aaa { style="width : 800px; height : 800px; border : 3px solid black"}
  -->
  </style>
</head>
<body>
<p id=aaa>
	<div style="width : 700px; height : 400px; border : 3px solid black">	
	</div>
</p>
</body>
</html>
なおしました。

アバター
h2so5
副管理人
記事: 2212
登録日時: 9年前
住所: 東京
連絡を取る:

Re: 小鳥の成長part2

#23

投稿記事 by h2so5 » 8年前

正しくはこうです。

コード:

#aaa { style="width : 800px; height : 800px; border : 3px solid black"}

コード:

#aaa { width : 800px; height : 800px; border : 3px solid black }

コード:

<p id=aaa>

コード:

<p id="aaa">

ルービ

Re: 小鳥の成長part2

#24

投稿記事 by ルービ » 8年前

>>h2so5さん

ありです。

コード:


<html>
<head>
<style type="text/css">
  <!--
  #aaa { width : 800px; height : 800px; border : 3px solid black}
  -->
  </style>
</head>
<body>
<div id="aaa">
	<div style="width : 700px; height : 400px; border : 3px solid black">	
	</div>
</div>
</body>
</html>
なんとかできました。
pとdivも正しくないといけないんですね。
またわからないことがあったら来ます。

ルービ

Re: 小鳥の成長part2

#25

投稿記事 by ルービ » 8年前

コード:

<html>
<head>

<style type="text/css">
<!--

#aaa{width : 800px; height : 800px; border : 3px solid black}
#bbb{width : 380px; height : 380px; border : 3px solid black}
#ccc{width : 60px; height : 60px; border : 3px solid black}
-->
</style>

</head>
<body>
<div id="aaa">
	<table>
	<tr>
	<th id="bbb">
		<table>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		</table>
	</th>
	<th id="bbb">
		<table>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		<tr>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		<th id="ccc"></th>
		</tr>
		</table>
	</th>
	</tr>
	</table>
</div>
</body>
</html>

こんな感じで作ったんですがテーブルの隣接部分?の隙間なくするにはどうすればいいですか?

ルービ

Re: 小鳥の成長part2

#26

投稿記事 by ルービ » 8年前

上の質問のやつできました。

ルービ

Re: 小鳥の成長part2

#27

投稿記事 by ルービ » 8年前

コード:

#bbb{width : 380px; height : 380px; border : 3px solid black; cellspacing : 0}
これのcellspacing : 0が動いてない?ようです。
何かおかしいですか?

ルービ

Re: 小鳥の成長part2

#28

投稿記事 by ルービ » 8年前

入れるところ間違えてました。
上のできました。

一度見直してから質問するようにします。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#29

投稿記事 by softya(ソフト屋) » 8年前

気になったので。
idは何度も使うことが許されていないのでclassを使って下さい。idはhtml中に使用できるのは1回のみです。それなりに動くこともありますが変なバグに成る事があります。
.cccと書きます。 使う時はclass="ccc"

それと使いこなすと便利なChrome Developer Toolsをご紹介しておきます。
http://d.hatena.ne.jp/ama-ch/20111103/1320318302
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#30

投稿記事 by ルービ » 8年前

>>sogtyaさん

ありです。classを使うようにします。
Chrome Developer Tools見てみます。
また気になった事があったら言ってくださると嬉しいです。

ルービ

Re: 小鳥の成長part2

#31

投稿記事 by ルービ » 8年前

図なるものは完成しました。

次に色を送ったりするのをやろうと思ってます。このコードはテスト用です。

コード:

<html>
<head><title>test</title>
<script type="text/javascript">
<!--

function sosin(){

}
var bbbiro="#ccffff"

// -->
</script>

<style type="text/css">
<!--
.aaa{width : 800px; height : 800px; border : 5px solid black}
.bbb{width : 380px; height : 380px; border : 3px solid black; background-color:bbbiro}
.ccc{width : 60px; height : 60px; border : 3px solid black}
.ddd{width : 400px; height : 150px; border : 3px solid black}
-->
</style>

</head>
<body>
<div class="aaa">
	<div class="bbb"></div>
	<div class="ddd"></div>
</div>
</body>
</html>
いくつか余計なものが入ってますが変数bbbiroに色を格納してそれを背景に入るようにしようとしたんですがうまくいきません。

ルービ

Re: 小鳥の成長part2

#32

投稿記事 by ルービ » 8年前

入門サイトでは、文字色指定がありました。

コード:


function chgColor()
{
  if(document.getElementById)
  {
    document.getElementById("col").style.color = "red";
  }
}
背景色もdocument.getElementById()を使えばできますか?
後やりかた載ってるサイトあったら教えてください。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#33

投稿記事 by softya(ソフト屋) » 8年前

document.getElementByIdでstyle.backgroundcolorを変更すれば背景色です。

目的から逆引きするのなら、これが便利でしょう。
「JavaScript逆引きクイックリファレンス」
http://www.openspc2.org/reibun/QuickRef ... index.html
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#34

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。

ルービ

Re: 小鳥の成長part2

#35

投稿記事 by ルービ » 8年前

コード:

<html>
<head><title>test</title>
<script type="text/javascript">
<!--
function chgColor()
{
  if(document.getElementById)
  {
    document.getElementById("bbb").style.backgroundcolor = "#87CEEB";
  }
}

// -->
</script>

<style type="text/css">
<!--
.aaa{width : 800px; height : 800px; border : 5px solid black}
.bbb{width : 380px; height : 380px; border : 3px solid black}
.ccc{width : 60px; height : 60px; border : 3px solid black}
.ddd{width : 400px; height : 150px; border : 3px solid black}
-->
</style>

</head>
<body>
<div class="aaa">
	<div class="bbb"></div>
	<div class="ddd"></div>
</div>
<form>
<input type="button" value="青色" onclick="chgColor()">
</form>
</body>
</html>
これなんですがボタンを押しても青くならないです。
クラスじゃダメなんでしょうか?

ルービ

Re: 小鳥の成長part2

#36

投稿記事 by ルービ » 8年前

それと

コード:

<div class="aaa" id="aaa1">
こういうのも使えますか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#37

投稿記事 by softya(ソフト屋) » 8年前

日頃jQueryに頼っていたので気づきませんでしたが、classでgetElementById的なことは面倒なようです。
getElementsByClassName()だとstyleが変更できませんでした。

と言うことで、次のようにすれば動きます。

コード:

<html>
<head><title>test</title>
<script type="text/javascript">
<!--
function chgColor()
{
  if(document.getElementById)
  {
    document.getElementById("bbb").style.backgroundColor = "#87CEEB"; 私のミスです。 backgroundcolor → backgroundColor 
  }
}
 
// -->
</script>
 
<style type="text/css">
<!--
.aaa{width : 800px; height : 800px; border : 5px solid black}
#bbb{width : 380px; height : 380px; border : 3px solid black} IDにする。
.ccc{width : 60px; height : 60px; border : 3px solid black}
.ddd{width : 400px; height : 150px; border : 3px solid black}
-->
</style>
 
</head>
<body>
<div class="aaa">
    <div id="bbb"></div> IDにする。
    <div class="ddd"></div>
</div>
<form>
<input type="button" value="青色" onclick="chgColor()">
</form>
</body>
</html>
ルービ さんが書きました:それと

コード:

<div class="aaa" id="aaa1">
こういうのも使えますか?
使えます。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#38

投稿記事 by softya(ソフト屋) » 8年前

今回の様な問題があれば、Chrome Developer ToolsのConsoleに表示されますので必ずチェックして下さい。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#39

投稿記事 by ルービ » 8年前

>>softyaさん

できました。ありです。
Chrome Developer Toolsを見るようにします。

ISLe
記事: 2648
登録日時: 9年前
連絡を取る:

Re: 小鳥の成長part2

#40

投稿記事 by ISLe » 8年前

softya(ソフト屋) さんが書きました:それと使いこなすと便利なChrome Developer Toolsをご紹介しておきます。
http://d.hatena.ne.jp/ama-ch/20111103/1320318302
もしIEを使っているなら、IEにも開発者ツールというのが付いてます。
詳しい機能の違いは分かりませんが便利ですよ。

ルービ

Re: 小鳥の成長part2

#41

投稿記事 by ルービ » 8年前

コード:

<img src="event_01.gif" width="52" height="15" alt=""
  onMouseUp="this.src='event_02.gif'">
セル内をクリックして何かの関数を動かすのができません。
上のコードは画像の時は↑で出来るのですが画像ではなくセル内をクリックして色を変えるというのをしたいです。

ルービ

Re: 小鳥の成長part2

#42

投稿記事 by ルービ » 8年前

>>ISleさん

覚えておきます。
ありです。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#43

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:

コード:

<img src="event_01.gif" width="52" height="15" alt=""
  onMouseUp="this.src='event_02.gif'">
セル内をクリックして何かの関数を動かすのができません。
上のコードは画像の時は↑で出来るのですが画像ではなくセル内をクリックして色を変えるというのをしたいです。
やりたいのは、こういう事?

コード:

<html>
<head><title>test</title>
<script type="text/javascript">
<!--
function chgColor(obj)
{
	obj.style.backgroundColor = "#87CEEB";
}
// -->
</script>
 
<style type="text/css">
<!--
.aaa{width : 800px; height : 800px; border : 5px solid black}
#bbb{width : 380px; height : 380px; border : 3px solid black}
.ccc{width : 60px; height : 60px; border : 3px solid black}
#ddd{width : 400px; height : 150px; border : 3px solid black}
-->
</style>
 
</head>
<body>
<div class="aaa">
    <div id="bbb" onClick="chgColor(this)"></div>
    <div id="ddd" onClick="chgColor(this)"></div>
</div>
<form>
<input type="button" value="青色" onclick="chgColor()">
</form>
</body>
</html>
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#44

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。
まさにこれがやりたかったです。
見ても仕組みがわからないものがあるので調べてみます。

ルービ

Re: 小鳥の成長part2

#45

投稿記事 by ルービ » 8年前

なんて調べればいいかわからないです。
仕組みが載ってるサイトあったら教えてください。

ルービ

Re: 小鳥の成長part2

#46

投稿記事 by ルービ » 8年前

コード:

<div id="bbb" onClick="chgColor(this)"></div>
これはthis、つまりこのdivを示してて
obj.style.backgroundColor="#87CEEB";
これをdivに入れる?っという感じですか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#47

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:

コード:

<div id="bbb" onClick="chgColor(this)"></div>
これはthis、つまりこのdivを示してて
obj.style.backgroundColor="#87CEEB";
これをdivに入れる?っという感じですか?
その通りです。
onClickのthisはクリックされたdiv要素を指しています。
thisはchgColor関数の引数に受け渡されてobjと言う名前になります。
なので
obj.style.backgroundColor="#87CEEB";
でdivのstyle(css)のbackgroundColorが#87CEEBの色となります。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#48

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。

これを使って他のdivを指定できますか?
例えば

コード:

<div id="bbb"></div>
    <div id="ddd" onClick="chgColor(this)"></div>
[code]
下のdivをクリックして上のdivを変えるということです。
()内を変えればいいですか?
()に入れる種類ってたくさんありますか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#49

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:>>softyaさん

ありです。

これを使って他のdivを指定できますか?
例えば

コード:

<div id="bbb"></div>
    <div id="ddd" onClick="chgColor(this)"></div>
[code]
下のdivをクリックして上のdivを変えるということです。
()内を変えればいいですか?
()に入れる種類ってたくさんありますか?[/quote]

thisの代わりにdocument.getElementById("bbb")を使います。
<div id="ddd" onClick="chgColor(document.getElementById('bbb'))"></div>
注意点は、ダブルクォートの代わりにシングルクオートを使うことでしょうか。
ダブルクォートで囲まれたモノの途中にダブルクォートがあるのはマズイので。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#50

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。
idについてなんですがhtml中idは一度しか使っちゃいけない?というのがよくわからないです。
Javascript内では何回でも使っていいですか?
ボディ内で複数のスタイルに使うのがいけないんでしょうか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#51

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:>>softyaさん

ありです。
idについてなんですがhtml中idは一度しか使っちゃいけない?というのがよくわからないです。
Javascript内では何回でも使っていいですか?
ボディ内で複数のスタイルに使うのがいけないんでしょうか?
html構文とidの関連付けが1つか出来ないと言うことです。

(1)idは識別名なので、そもそも複数使うと同じ名前ではjavascriptから区別できないと言う問題があります。
document.getElementById('bbb')とした時にbbbを使ったdivなどが2つ以上有った時の動作は保証されません。

(2)htmlとして同じ名前のcssのidが複数あった場合の動作はブラウザで保証されていないと言うことです。
これに付いてもcssの内容がうまく反映される場合もあるしダメな場合もあります。
私の経験だと3大ブラウザのIE,Chrome,FireFoxで動作が違うと思います。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#52

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。
多分わかりました。
大体cssはclassを使って書いてcssをJavascriptを使って変更などではidを1つ1つに振り割って使っていこうと思います。

コード:

<th class="eee" id="e1" backgroundColor="#FF0000"></th>
なぜか背景が赤になりません。

ルービ

Re: 小鳥の成長part2

#53

投稿記事 by ルービ » 8年前

backgroundColor
ReferenceError: backgroundColor is not defined
backgroundColor="#FF0000"
"#FF0000"



Chrome Developer Toolsを使ってみました、けどよくわからないです。

アバター
h2so5
副管理人
記事: 2212
登録日時: 9年前
住所: 東京
連絡を取る:

Re: 小鳥の成長part2

#54

投稿記事 by h2so5 » 8年前

thタグにbackgroundColorという属性はありません。
backgroundColorはjavascriptのプロパティ名です。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#55

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:>>softyaさん

ありです。
多分わかりました。
大体cssはclassを使って書いてcssをJavascriptを使って変更などではidを1つ1つに振り割って使っていこうと思います。

コード:

<th class="eee" id="e1" backgroundColor="#FF0000"></th>
なぜか背景が赤になりません。
ルービ さんが書きました:backgroundColor
ReferenceError: backgroundColor is not defined
backgroundColor="#FF0000"
"#FF0000"
ReferenceErrorは存在しないと言うことです。
thのhtml構文にbackgroundColorは存在しません。正しくはbgcolorです。
でも、そちらではなくstyle(css)のbackground-colorを使って下さい。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#56

投稿記事 by ルービ » 8年前

>>h2so5さん
>>softyaさん

ありです。
cssとJavascriptで同じ意味で違うものがあるんですね。
属性とプロパティとかはなんかどこがどこだかわからなくなるけどやりながら覚えてきます。

ルービ

Re: 小鳥の成長part2

#57

投稿記事 by ルービ » 8年前

>>softyaさん

コード:

<th class="eee" id="e1" bgcolor="#FFFF00"></th>
↑はできました。

↓はできなかったです。

コード:

<th class="eee" id="e1" background-color="#FFFF00"></th>

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#58

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:>>softyaさん

コード:

<th class="eee" id="e1" bgcolor="#FFFF00"></th>
↑はできました。

↓はできなかったです。

コード:

<th class="eee" id="e1" background-color="#FFFF00"></th>
style=""で書くかcssに分けるかどちらかで、background-color="#FFFF00"は存在しません。
http://www.htmq.com/style/background-color.shtml
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#59

投稿記事 by ルービ » 8年前

cssでしたすみません。できました。

Javascriptとcssとthとあるんですね。
なんかわかってきました。

ですけどどうしてcssの方がいいんでしょう?
大きさなどはcssを使ってます。
けれど色の指定をcssでするとしたらeee1,eee2,eee3となってしまいます。
やっぱりできる限りのところはcssの方がコードが見やすいということですか?

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#60

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:cssでしたすみません。できました。

Javascriptとcssとthとあるんですね。
なんかわかってきました。

ですけどどうしてcssの方がいいんでしょう?
大きさなどはcssを使ってます。
けれど色の指定をcssでするとしたらeee1,eee2,eee3となってしまいます。
やっぱりできる限りのところはcssの方がコードが見やすいということですか?
HTML構文で書かないのは将来的に廃止される可能性が高いからです。
それとcssで統一すればbgcolorとか覚えなくてよいので色々と混乱が避けられるからです。
あと
<th class="eee" id="e1" style="background-color:#FFFF00;"></th>
と書けば直接htmlに書けますよ。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#61

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。

また来ます。

ルービ

Re: 小鳥の成長part2

#62

投稿記事 by ルービ » 8年前

コード:


<html>
<head>
<script type="text/javascript" src="test_js"></script>
<script type="text/javascript">
<!--


var iro


function chgColor1(obj)
{
    obj.style.backgroundColor = "#FFFFFF";
    iro="#FFFFFF"
}
function chgColor2(obj)
{
    obj.style.backgroundColor = "#FFFF00";
    iro="#FFFF00"
}
function chgColor3(obj)
{
    obj.style.backgroundColor = "#FF0000";
    iro="#FF0000"
}
function chgColor4(obj)
{
    obj.style.backgroundColor = "#FF00FF";
    iro="#FF00FF"
}
function chgColor5(obj)
{
    obj.style.backgroundColor = "#B22222";
    iro="#B22222"
}
function chgColor6(obj)
{
    obj.style.backgroundColor = "#228B22";
    iro="#228B22"
}
function chgColor7(obj)
{
    obj.style.backgroundColor = "#FFFF00";
    iro="#FFFF00"
}
function chgColor8(obj)
{
    obj.style.backgroundColor = "#87CEEB";
    iro="#87CEEB"
}
function chgColor9(obj)
{
    obj.style.backgroundColor = "#8B008B";
    iro="#8B008B"
}
function chgColor10(obj)
{
    obj.style.backgroundColor = "#808080";
    iro="#808080"
}







// -->
</script>


<style type="text/css">
<!--

.aaa{width : 800px; height : 800px; border : 5px solid black}
.bbb{width : 380px; height : 380px; border : 3px solid black}
.ccc{width : 50px; height : 50px; border : 1px solid black}
.ddd{width : 350px; height : 100px; border : 3px solid black}
.eee{width : 50px; height : 20px; border : 2px solid black}
.fff{width : 120px; height : 120px; border : 2px solid black}
.ggg{width : 250px; height : 30px; border : 2px solid black}
.hhh{width : 40px; height : 40px; border : 2px solid black}
.iii{width : 80px; height : 40px; border : 2px solid black}
-->
</style>

</head>
<body>
<div class="aaa">
	<table cellspacing="0">
	<tr>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c1" onClick="cc1(document.getElementById('c1'))"></th>
		<th class="ccc" id="c2" onClick="cc2(document.getElementById('c2'))"></th>
		<th class="ccc" id="c3" onClick="cc3(document.getElementById('c3'))"></th>
		<th class="ccc" id="c4" onClick="cc4(document.getElementById('c4'))"></th>
		<th class="ccc" id="c5" onClick="cc5(document.getElementById('c5'))"></th>
		<th class="ccc" id="c6" onClick="cc6(document.getElementById('c6'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c7" onClick="cc7(document.getElementById('c7'))"></th>
		<th class="ccc" id="c8" onClick="cc8(document.getElementById('c8'))"></th>
		<th class="ccc" id="c9" onClick="cc9(document.getElementById('c9'))"></th>
		<th class="ccc" id="c10" onClick="cc10(document.getElementById('c10'))"></th>
		<th class="ccc" id="c11" onClick="cc11(document.getElementById('c11'))"></th>
		<th class="ccc" id="c12" onClick="cc12(document.getElementById('c12'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c13" onClick="cc13(document.getElementById('c13'))"></th>
		<th class="ccc" id="c14" onClick="cc14(document.getElementById('c14'))"></th>
		<th class="ccc" id="c15" onClick="cc15(document.getElementById('c15'))"></th>
		<th class="ccc" id="c16" onClick="cc16(document.getElementById('c16'))"></th>
		<th class="ccc" id="c17" onClick="cc17(document.getElementById('c17'))"></th>
		<th class="ccc" id="c18" onClick="cc18(document.getElementById('c18'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c19" onClick="cc19(document.getElementById('c19'))"></th>
		<th class="ccc" id="c20" onClick="cc20(document.getElementById('c20'))"></th>
		<th class="ccc" id="c21" onClick="cc21(document.getElementById('c21'))"></th>
		<th class="ccc" id="c22" onClick="cc22(document.getElementById('c22'))"></th>
		<th class="ccc" id="c23" onClick="cc23(document.getElementById('c23'))"></th>
		<th class="ccc" id="c24" onClick="cc24(document.getElementById('c24'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c25" onClick="cc25(document.getElementById('c25'))"></th>
		<th class="ccc" id="c26" onClick="cc26(document.getElementById('c26'))"></th>
		<th class="ccc" id="c27" onClick="cc27(document.getElementById('c27'))"></th>
		<th class="ccc" id="c28" onClick="cc28(document.getElementById('c28'))"></th>
		<th class="ccc" id="c29" onClick="cc29(document.getElementById('c29'))"></th>
		<th class="ccc" id="c30" onClick="cc30(document.getElementById('c30'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c31" onClick="cc31(document.getElementById('c31'))"></th>
		<th class="ccc" id="c32" onClick="cc32(document.getElementById('c32'))"></th>
		<th class="ccc" id="c33" onClick="cc33(document.getElementById('c33'))"></th>
		<th class="ccc" id="c34" onClick="cc34(document.getElementById('c34'))"></th>
		<th class="ccc" id="c35" onClick="cc35(document.getElementById('c35'))"></th>
		<th class="ccc" id="c36" onClick="cc36(document.getElementById('c36'))"></th>
		</tr>
		</table>
	</th>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c37" onClick="cc37(document.getElementById('c37'))"></th>
		<th class="ccc" id="c38" onClick="cc38(document.getElementById('c38'))"></th>
		<th class="ccc" id="c39" onClick="cc39(document.getElementById('c39'))"></th>
		<th class="ccc" id="c40" onClick="cc40(document.getElementById('c40'))"></th>
		<th class="ccc" id="c41" onClick="cc41(document.getElementById('c41'))"></th>
		<th class="ccc" id="c42" onClick="cc42(document.getElementById('c42'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c43" onClick="cc43(document.getElementById('c43'))"></th>
		<th class="ccc" id="c44" onClick="cc44(document.getElementById('c44'))"></th>
		<th class="ccc" id="c45" onClick="cc45(document.getElementById('c45'))"></th>
		<th class="ccc" id="c46" onClick="cc46(document.getElementById('c46'))"></th>
		<th class="ccc" id="c47" onClick="cc47(document.getElementById('c47'))"></th>
		<th class="ccc" id="c48" onClick="cc48(document.getElementById('c48'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c49" onClick="cc49(document.getElementById('c49'))"></th>
		<th class="ccc" id="c50" onClick="cc50(document.getElementById('c50'))"></th>
		<th class="ccc" id="c51" onClick="cc51(document.getElementById('c51'))"></th>
		<th class="ccc" id="c52" onClick="cc52(document.getElementById('c52'))"></th>
		<th class="ccc" id="c53" onClick="cc53(document.getElementById('c53'))"></th>
		<th class="ccc" id="c54" onClick="cc54(document.getElementById('c54'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c55" onClick="cc55(document.getElementById('c55'))"></th>
		<th class="ccc" id="c56" onClick="cc56(document.getElementById('c56'))"></th>
		<th class="ccc" id="c57" onClick="cc57(document.getElementById('c57'))"></th>
		<th class="ccc" id="c58" onClick="cc58(document.getElementById('c58'))"></th>
		<th class="ccc" id="c59" onClick="cc59(document.getElementById('c59'))"></th>
		<th class="ccc" id="c60" onClick="cc60(document.getElementById('c60'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c61" onClick="cc61(document.getElementById('c61'))"></th>
		<th class="ccc" id="c62" onClick="cc62(document.getElementById('c62'))"></th>
		<th class="ccc" id="c63" onClick="cc63(document.getElementById('c63'))"></th>
		<th class="ccc" id="c64" onClick="cc64(document.getElementById('c64'))"></th>
		<th class="ccc" id="c65" onClick="cc65(document.getElementById('c65'))"></th>
		<th class="ccc" id="c66" onClick="cc66(document.getElementById('c66'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c67" onClick="cc67(document.getElementById('c67'))"></th>
		<th class="ccc" id="c68" onClick="cc68(document.getElementById('c68'))"></th>
		<th class="ccc" id="c69" onClick="cc69(document.getElementById('c69'))"></th>
		<th class="ccc" id="c70" onClick="cc70(document.getElementById('c70'))"></th>
		<th class="ccc" id="c71" onClick="cc71(document.getElementById('c71'))"></th>
		<th class="ccc" id="c72" onClick="cc72(document.getElementById('c72'))"></th>
		</tr>
		</table>
	</th>
	</tr>
	</table>


	<div class="ddd">
		<div class="eee" id="e0">
		</div>

		<table cellspacing=0>
		<tr>
		<th class="eee" id="e1" style="background-color:#FFFFFF" onClick="chgColor1(document.getElementById('e0'))"></th>
		<th class="eee" id="e2" style="background-color:#FFFF00" onClick="chgColor2(document.getElementById('e0'))"></th>
		<th class="eee" id="e3" style="background-color:#FF0000" onClick="chgColor3(document.getElementById('e0'))"></th>
		<th class="eee" id="e4" style="background-color:#FF00FF" onClick="chgColor4(document.getElementById('e0'))"></th>
		<th class="eee" id="e5" style="background-color:#B22222" onClick="chgColor5(document.getElementById('e0'))"></th>
		</tr>
		<tr>
		<th class="eee" id="e6" style="background-color:#228B22" onClick="chgColor6(document.getElementById('e0'))"></th>
		<th class="eee" id="e7" style="background-color:#0000FF" onClick="chgColor7(document.getElementById('e0'))"></th>
		<th class="eee" id="e8" style="background-color:#87CEEB" onClick="chgColor8(document.getElementById('e0'))"></th>
		<th class="eee" id="e9" style="background-color:#8B008B" onClick="chgColor9(document.getElementById('e0'))"></th>
		<th class="eee" id="e10" style="background-color:#808080" onClick="chgColor10(document.getElementById('e0'))"></th>
		</tr>
		</table>
	</div>


	<div class="fff">
	</div>


	<div class="ggg">
	</div>


	<table cellspacing=0>
	<tr>
	<th class="hhh"></th>
	<th class="hhh"></th>
	<th class="hhh"></th>
	</tr>
	</table>


	<div class="iii">
	</div>
</div>
</body>
</html>
これと

jsファイルが

コード:

<script type="text/javascript">
<!--


function cc1(obj)
{
    obj.style.backgroundColor = iro;
}

// -->
</script>
これで、なぜかjsファイルの方の関数が呼び出せてないようです。
なぜでしょうか。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#63

投稿記事 by softya(ソフト屋) » 8年前

<script type="text/javascript" src="test_js"></script>

<script type="text/javascript" src="test.js"></script>
の打ち間違いでは?
consoleにエラー出てませんでしたか?
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#64

投稿記事 by ルービ » 8年前

うち間違えてました。test2_.jsでした。
直したたんですけどエラー出てます。

Uncaught SyntaxError: Unexpected token < test2_.js:1
こうなってます。

アバター
へにっくす
記事: 630
登録日時: 8年前
住所: 東京都

Re: 小鳥の成長part2

#65

投稿記事 by へにっくす » 8年前

jsファイルに、
scriptタグは必要ありません。
<!-- --> もいりません。
written by へにっくす

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#66

投稿記事 by softya(ソフト屋) » 8年前

見逃してました。
jsファイルは

コード:

function cc1(obj)
{
    obj.style.backgroundColor = iro;
}
だけで良いはずです。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#67

投稿記事 by ルービ » 8年前

>>へにっくすさん
>>softyaさん

ありです。
scriptタグなどをなくしたら関数呼び出せました。

あと、consoleのエラーの意味が載ってるサイトとかいいとこあったら教えてください。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#68

投稿記事 by softya(ソフト屋) » 8年前

ルービ さんが書きました:>>へにっくすさん
>>softyaさん

ありです。
scriptタグなどをなくしたら関数呼び出せました。

あと、consoleのエラーの意味が載ってるサイトとかいいとこあったら教えてください。
残念ながら見たこと無いので、google翻訳などで頑張りましょう。
http://translate.google.co.jp/?hl=ja&tab=TT
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#69

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。

ルービ

Re: 小鳥の成長part2

#70

投稿記事 by ルービ » 8年前

コード:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
var kazu
for (i=0 ; i < 20 ; i++)
{
  kazu=Math.floor( Math.random() * 37 + "<br>");
  document.write(kazu)
}

// -->
</script>
</body>
</html>
うまくいきません。なぜでしょうか?
consoleでエラーはないです。

ルービ

Re: 小鳥の成長part2

#71

投稿記事 by ルービ » 8年前

上の質問は取り消します。
結果を目視するために書いたんですがアラートすることにします。

ルービ

Re: 小鳥の成長part2

#72

投稿記事 by ルービ » 8年前

コード:


<html>
<head>
<script type="text/javascript" src="test2_.js"></script>
<link rel="stylesheet" type="text/css" href="test2X.css">

<script type="text/javascript">
<!--
iroko = new  Array(
"#FFFFFF",
"#0000FF",
"#FFFF00",
"#FF00FF",
"#B22222"
);
var iroEX=Math.floor( Math.random() * 5 );
document.write("今日は"+iroko[iroEX]+"です!");

document.getElementById('c37').style.backgroundColer=iroko[iroEX];

// -->
</script>


</head>
<body>
<div class="aaa">
	<table cellspacing="0">
	<tr>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c37" onClick="cc37(document.getElementById('c37'))"></th>
		<th class="ccc" id="c38" onClick="cc38(document.getElementById('c38'))"></th>
		<th class="ccc" id="c39" onClick="cc39(document.getElementById('c39'))"></th>
		<th class="ccc" id="c40" onClick="cc40(document.getElementById('c40'))"></th>
		<th class="ccc" id="c41" onClick="cc41(document.getElementById('c41'))"></th>
		<th class="ccc" id="c42" onClick="cc42(document.getElementById('c42'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c43" onClick="cc43(document.getElementById('c43'))"></th>
		<th class="ccc" id="c44" onClick="cc44(document.getElementById('c44'))"></th>
		<th class="ccc" id="c45" onClick="cc45(document.getElementById('c45'))"></th>
		<th class="ccc" id="c46" onClick="cc46(document.getElementById('c46'))"></th>
		<th class="ccc" id="c47" onClick="cc47(document.getElementById('c47'))"></th>
		<th class="ccc" id="c48" onClick="cc48(document.getElementById('c48'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c49" onClick="cc49(document.getElementById('c49'))"></th>
		<th class="ccc" id="c50" onClick="cc50(document.getElementById('c50'))"></th>
		<th class="ccc" id="c51" onClick="cc51(document.getElementById('c51'))"></th>
		<th class="ccc" id="c52" onClick="cc52(document.getElementById('c52'))"></th>
		<th class="ccc" id="c53" onClick="cc53(document.getElementById('c53'))"></th>
		<th class="ccc" id="c54" onClick="cc54(document.getElementById('c54'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c55" onClick="cc55(document.getElementById('c55'))"></th>
		<th class="ccc" id="c56" onClick="cc56(document.getElementById('c56'))"></th>
		<th class="ccc" id="c57" onClick="cc57(document.getElementById('c57'))"></th>
		<th class="ccc" id="c58" onClick="cc58(document.getElementById('c58'))"></th>
		<th class="ccc" id="c59" onClick="cc59(document.getElementById('c59'))"></th>
		<th class="ccc" id="c60" onClick="cc60(document.getElementById('c60'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c61" onClick="cc61(document.getElementById('c61'))"></th>
		<th class="ccc" id="c62" onClick="cc62(document.getElementById('c62'))"></th>
		<th class="ccc" id="c63" onClick="cc63(document.getElementById('c63'))"></th>
		<th class="ccc" id="c64" onClick="cc64(document.getElementById('c64'))"></th>
		<th class="ccc" id="c65" onClick="cc65(document.getElementById('c65'))"></th>
		<th class="ccc" id="c66" onClick="cc66(document.getElementById('c66'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c67" onClick="cc67(document.getElementById('c67'))"></th>
		<th class="ccc" id="c68" onClick="cc68(document.getElementById('c68'))"></th>
		<th class="ccc" id="c69" onClick="cc69(document.getElementById('c69'))"></th>
		<th class="ccc" id="c70" onClick="cc70(document.getElementById('c70'))"></th>
		<th class="ccc" id="c71" onClick="cc71(document.getElementById('c71'))"></th>
		<th class="ccc" id="c72" onClick="cc72(document.getElementById('c72'))"></th>
		</tr>
		</table>
	</th>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c1" onClick="cc1(document.getElementById('c1'))"></th>
		<th class="ccc" id="c2" onClick="cc2(document.getElementById('c2'))"></th>
		<th class="ccc" id="c3" onClick="cc3(document.getElementById('c3'))"></th>
		<th class="ccc" id="c4" onClick="cc4(document.getElementById('c4'))"></th>
		<th class="ccc" id="c5" onClick="cc5(document.getElementById('c5'))"></th>
		<th class="ccc" id="c6" onClick="cc6(document.getElementById('c6'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c7" onClick="cc7(document.getElementById('c7'))"></th>
		<th class="ccc" id="c8" onClick="cc8(document.getElementById('c8'))"></th>
		<th class="ccc" id="c9" onClick="cc9(document.getElementById('c9'))"></th>
		<th class="ccc" id="c10" onClick="cc10(document.getElementById('c10'))"></th>
		<th class="ccc" id="c11" onClick="cc11(document.getElementById('c11'))"></th>
		<th class="ccc" id="c12" onClick="cc12(document.getElementById('c12'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c13" onClick="cc13(document.getElementById('c13'))"></th>
		<th class="ccc" id="c14" onClick="cc14(document.getElementById('c14'))"></th>
		<th class="ccc" id="c15" onClick="cc15(document.getElementById('c15'))"></th>
		<th class="ccc" id="c16" onClick="cc16(document.getElementById('c16'))"></th>
		<th class="ccc" id="c17" onClick="cc17(document.getElementById('c17'))"></th>
		<th class="ccc" id="c18" onClick="cc18(document.getElementById('c18'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c19" onClick="cc19(document.getElementById('c19'))"></th>
		<th class="ccc" id="c20" onClick="cc20(document.getElementById('c20'))"></th>
		<th class="ccc" id="c21" onClick="cc21(document.getElementById('c21'))"></th>
		<th class="ccc" id="c22" onClick="cc22(document.getElementById('c22'))"></th>
		<th class="ccc" id="c23" onClick="cc23(document.getElementById('c23'))"></th>
		<th class="ccc" id="c24" onClick="cc24(document.getElementById('c24'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c25" onClick="cc25(document.getElementById('c25'))"></th>
		<th class="ccc" id="c26" onClick="cc26(document.getElementById('c26'))"></th>
		<th class="ccc" id="c27" onClick="cc27(document.getElementById('c27'))"></th>
		<th class="ccc" id="c28" onClick="cc28(document.getElementById('c28'))"></th>
		<th class="ccc" id="c29" onClick="cc29(document.getElementById('c29'))"></th>
		<th class="ccc" id="c30" onClick="cc30(document.getElementById('c30'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c31" onClick="cc31(document.getElementById('c31'))"></th>
		<th class="ccc" id="c32" onClick="cc32(document.getElementById('c32'))"></th>
		<th class="ccc" id="c33" onClick="cc33(document.getElementById('c33'))"></th>
		<th class="ccc" id="c34" onClick="cc34(document.getElementById('c34'))"></th>
		<th class="ccc" id="c35" onClick="cc35(document.getElementById('c35'))"></th>
		<th class="ccc" id="c36" onClick="cc36(document.getElementById('c36'))"></th>
		</tr>
		</table>
	</th>
	</tr>
	</table>


	<div class="ddd">
		<div class="eee" id="e0">
		</div>

		<table cellspacing=0>
		<tr>
		<th class="eee" id="e1" style="background-color:#FFFFFF" onClick="chgColor1(document.getElementById('e0'))"></th>
		<th class="eee" id="e2" style="background-color:#FFFF00" onClick="chgColor2(document.getElementById('e0'))"></th>
		<th class="eee" id="e3" style="background-color:#FF0000" onClick="chgColor3(document.getElementById('e0'))"></th>
		<th class="eee" id="e4" style="background-color:#FF00FF" onClick="chgColor4(document.getElementById('e0'))"></th>
		<th class="eee" id="e5" style="background-color:#B22222" onClick="chgColor5(document.getElementById('e0'))"></th>
		</tr>
		<tr>
		<th class="eee" id="e6" style="background-color:#228B22" onClick="chgColor6(document.getElementById('e0'))"></th>
		<th class="eee" id="e7" style="background-color:#0000FF" onClick="chgColor7(document.getElementById('e0'))"></th>
		<th class="eee" id="e8" style="background-color:#87CEEB" onClick="chgColor8(document.getElementById('e0'))"></th>
		<th class="eee" id="e9" style="background-color:#8B008B" onClick="chgColor9(document.getElementById('e0'))"></th>
		<th class="eee" id="e10" style="background-color:#808080" onClick="chgColor10(document.getElementById('e0'))"></th>
		</tr>
		</table>
	</div>


	<div class="fff">
	</div>


	<div class="ggg">
	</div>


	<table cellspacing=0>
	<tr>
	<th class="hhh"></th>
	<th class="hhh"></th>
	<th class="hhh"></th>
	</tr>
	</table>


	<div class="iii">
	</div>
</div>
</body>
</html>
上の方の[document.getElementById('c37').style.backgroundColer=iroko[iroEX];]
が動いてないです。
consoleerrorはUncaught TypeError: Cannot read property 'style' of null と出てます。
consoleerror翻訳、「キャッチされない送出は、:nullのプロパティは'スタイル'読み取ることができません」
何がおかしいのか教えてください。

アバター
h2so5
副管理人
記事: 2212
登録日時: 9年前
住所: 東京
連絡を取る:

Re: 小鳥の成長part2

#73

投稿記事 by h2so5 » 8年前

document.getElementById('c37')
が実行された時点では

<th class="ccc" id="c37" onClick="cc37(document.getElementById('c37'))"></th>
はまだロードされていないためエラーになります。

スクリプトを th タグより下に書くか、
<body onLoad="document.getElementById('c37').style.backgroundColer=iroko[iroEX];">
のようにbodyタグに記述してください。

ルービ

Re: 小鳥の成長part2

#74

投稿記事 by ルービ » 8年前

>>h2so5さん

ありです。
両方やってみましたがそれでもid="c37"の色が変わりません。

ルービ

Re: 小鳥の成長part2

#75

投稿記事 by ルービ » 8年前

errorは出てないです。

アバター
h2so5
副管理人
記事: 2212
登録日時: 9年前
住所: 東京
連絡を取る:

Re: 小鳥の成長part2

#76

投稿記事 by h2so5 » 8年前

指摘し忘れていましたが、backgroundColer ではなく backgroundColor です。

ルービ

Re: 小鳥の成長part2

#77

投稿記事 by ルービ » 8年前

>>h2so5さん

ありです。


原因がわかりません。
Javascriptで背景を操作の場合はbackgroundColorであっててなおかつ1つは色を指定したら動作していてアラートで中身を出してもしっかり色の文字は入っててエラーもない。

コード:

<html>
<head>
<script type="text/javascript" src="test2_.js"></script>
<link rel="stylesheet" type="text/css" href="test2X.css">

<script type="text/javascript">
<!--
iroko = new  Array(
"#FFFFFF",
"#0000FF",
"#FFFF00",
"#FF00FF",
"#B22222"
);
var iroEX=Math.floor( Math.random() * 5 );
document.write("今日は"+iroko[iroEX]+"です!");
// -->
</script>


</head>
<body>
<div class="aaa">
	<table cellspacing="0">
	<tr>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c37" onClick="cc37(document.getElementById('c37'))"></th>
		<th class="ccc" id="c38" onClick="cc38(document.getElementById('c38'))"></th>
		<th class="ccc" id="c39" onClick="cc39(document.getElementById('c39'))"></th>
		<th class="ccc" id="c40" onClick="cc40(document.getElementById('c40'))"></th>
		<th class="ccc" id="c41" onClick="cc41(document.getElementById('c41'))"></th>
		<th class="ccc" id="c42" onClick="cc42(document.getElementById('c42'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c43" onClick="cc43(document.getElementById('c43'))"></th>
		<th class="ccc" id="c44" onClick="cc44(document.getElementById('c44'))"></th>
		<th class="ccc" id="c45" onClick="cc45(document.getElementById('c45'))"></th>
		<th class="ccc" id="c46" onClick="cc46(document.getElementById('c46'))"></th>
		<th class="ccc" id="c47" onClick="cc47(document.getElementById('c47'))"></th>
		<th class="ccc" id="c48" onClick="cc48(document.getElementById('c48'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c49" onClick="cc49(document.getElementById('c49'))"></th>
		<th class="ccc" id="c50" onClick="cc50(document.getElementById('c50'))"></th>
		<th class="ccc" id="c51" onClick="cc51(document.getElementById('c51'))"></th>
		<th class="ccc" id="c52" onClick="cc52(document.getElementById('c52'))"></th>
		<th class="ccc" id="c53" onClick="cc53(document.getElementById('c53'))"></th>
		<th class="ccc" id="c54" onClick="cc54(document.getElementById('c54'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c55" onClick="cc55(document.getElementById('c55'))"></th>
		<th class="ccc" id="c56" onClick="cc56(document.getElementById('c56'))"></th>
		<th class="ccc" id="c57" onClick="cc57(document.getElementById('c57'))"></th>
		<th class="ccc" id="c58" onClick="cc58(document.getElementById('c58'))"></th>
		<th class="ccc" id="c59" onClick="cc59(document.getElementById('c59'))"></th>
		<th class="ccc" id="c60" onClick="cc60(document.getElementById('c60'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c61" onClick="cc61(document.getElementById('c61'))"></th>
		<th class="ccc" id="c62" onClick="cc62(document.getElementById('c62'))"></th>
		<th class="ccc" id="c63" onClick="cc63(document.getElementById('c63'))"></th>
		<th class="ccc" id="c64" onClick="cc64(document.getElementById('c64'))"></th>
		<th class="ccc" id="c65" onClick="cc65(document.getElementById('c65'))"></th>
		<th class="ccc" id="c66" onClick="cc66(document.getElementById('c66'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c67" onClick="cc67(document.getElementById('c67'))"></th>
		<th class="ccc" id="c68" onClick="cc68(document.getElementById('c68'))"></th>
		<th class="ccc" id="c69" onClick="cc69(document.getElementById('c69'))"></th>
		<th class="ccc" id="c70" onClick="cc70(document.getElementById('c70'))"></th>
		<th class="ccc" id="c71" onClick="cc71(document.getElementById('c71'))"></th>
		<th class="ccc" id="c72" onClick="cc72(document.getElementById('c72'))"></th>
		</tr>
		</table>
	</th>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c1" onClick="cc1(document.getElementById('c1'))"></th>
		<th class="ccc" id="c2" onClick="cc2(document.getElementById('c2'))"></th>
		<th class="ccc" id="c3" onClick="cc3(document.getElementById('c3'))"></th>
		<th class="ccc" id="c4" onClick="cc4(document.getElementById('c4'))"></th>
		<th class="ccc" id="c5" onClick="cc5(document.getElementById('c5'))"></th>
		<th class="ccc" id="c6" onClick="cc6(document.getElementById('c6'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c7" onClick="cc7(document.getElementById('c7'))"></th>
		<th class="ccc" id="c8" onClick="cc8(document.getElementById('c8'))"></th>
		<th class="ccc" id="c9" onClick="cc9(document.getElementById('c9'))"></th>
		<th class="ccc" id="c10" onClick="cc10(document.getElementById('c10'))"></th>
		<th class="ccc" id="c11" onClick="cc11(document.getElementById('c11'))"></th>
		<th class="ccc" id="c12" onClick="cc12(document.getElementById('c12'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c13" onClick="cc13(document.getElementById('c13'))"></th>
		<th class="ccc" id="c14" onClick="cc14(document.getElementById('c14'))"></th>
		<th class="ccc" id="c15" onClick="cc15(document.getElementById('c15'))"></th>
		<th class="ccc" id="c16" onClick="cc16(document.getElementById('c16'))"></th>
		<th class="ccc" id="c17" onClick="cc17(document.getElementById('c17'))"></th>
		<th class="ccc" id="c18" onClick="cc18(document.getElementById('c18'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c19" onClick="cc19(document.getElementById('c19'))"></th>
		<th class="ccc" id="c20" onClick="cc20(document.getElementById('c20'))"></th>
		<th class="ccc" id="c21" onClick="cc21(document.getElementById('c21'))"></th>
		<th class="ccc" id="c22" onClick="cc22(document.getElementById('c22'))"></th>
		<th class="ccc" id="c23" onClick="cc23(document.getElementById('c23'))"></th>
		<th class="ccc" id="c24" onClick="cc24(document.getElementById('c24'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c25" onClick="cc25(document.getElementById('c25'))"></th>
		<th class="ccc" id="c26" onClick="cc26(document.getElementById('c26'))"></th>
		<th class="ccc" id="c27" onClick="cc27(document.getElementById('c27'))"></th>
		<th class="ccc" id="c28" onClick="cc28(document.getElementById('c28'))"></th>
		<th class="ccc" id="c29" onClick="cc29(document.getElementById('c29'))"></th>
		<th class="ccc" id="c30" onClick="cc30(document.getElementById('c30'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c31" onClick="cc31(document.getElementById('c31'))"></th>
		<th class="ccc" id="c32" onClick="cc32(document.getElementById('c32'))"></th>
		<th class="ccc" id="c33" onClick="cc33(document.getElementById('c33'))"></th>
		<th class="ccc" id="c34" onClick="cc34(document.getElementById('c34'))"></th>
		<th class="ccc" id="c35" onClick="cc35(document.getElementById('c35'))"></th>
		<th class="ccc" id="c36" onClick="cc36(document.getElementById('c36'))"></th>
		</tr>
		</table>
	</th>
	</tr>
	</table>


	<div class="ddd">
		<div class="eee" id="e0">
		</div>

		<table cellspacing=0>
		<tr>
		<th class="eee" id="e1" style="background-color:#FFFFFF" onClick="chgColor1(document.getElementById('e0'))"></th>
		<th class="eee" id="e2" style="background-color:#FFFF00" onClick="chgColor2(document.getElementById('e0'))"></th>
		<th class="eee" id="e3" style="background-color:#FF0000" onClick="chgColor3(document.getElementById('e0'))"></th>
		<th class="eee" id="e4" style="background-color:#FF00FF" onClick="chgColor4(document.getElementById('e0'))"></th>
		<th class="eee" id="e5" style="background-color:#B22222" onClick="chgColor5(document.getElementById('e0'))"></th>
		</tr>
		<tr>
		<th class="eee" id="e6" style="background-color:#228B22" onClick="chgColor6(document.getElementById('e0'))"></th>
		<th class="eee" id="e7" style="background-color:#0000FF" onClick="chgColor7(document.getElementById('e0'))"></th>
		<th class="eee" id="e8" style="background-color:#87CEEB" onClick="chgColor8(document.getElementById('e0'))"></th>
		<th class="eee" id="e9" style="background-color:#8B008B" onClick="chgColor9(document.getElementById('e0'))"></th>
		<th class="eee" id="e10" style="background-color:#808080" onClick="chgColor10(document.getElementById('e0'))"></th>
		</tr>
		</table>
	</div>


	<div class="fff">
	</div>


	<div class="ggg">
	</div>


	<table cellspacing=0>
	<tr>
	<th class="hhh"></th>
	<th class="hhh"></th>
	<th class="hhh"></th>
	</tr>
	</table>


	<div class="iii">
	</div>
</div>
<script type="text/javascript">
<!--

document.getElementById('c38').style.backgroundColor="#FFFF00";
document.getElementById('c37').style.backgroundColor="iroko[iroEX]";
alert(iroko[iroEX]);


// -->
</script>
</body>
</html>
下の方に書いてあるのが動作しません。わかる方お願いします原因教えてください。
ランダムで色を決めて決めた色で一部背景を変える、という事がしたいです。

ルービ

Re: 小鳥の成長part2

#78

投稿記事 by ルービ » 8年前

コード:

document.getElementById('c37').style.backgroundColor="iroko[iroEX]";
これです。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#79

投稿記事 by softya(ソフト屋) » 8年前

配列から取り出されるのが文字列なので、
document.getElementById('c37').style.backgroundColor=iroko[iroEX];
じゃないと動かないでしょう。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#80

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。

たぶんまた来ます。

ルービ

Re: 小鳥の成長part2

#81

投稿記事 by ルービ » 8年前

コード:


<html>
<head>
<script type="text/javascript" src="test2_.js"></script>
<link rel="stylesheet" type="text/css" href="test2X.css">

<script type="text/javascript">
<!--

bashoko=new Array(
"c37",
"c38",
"c39",
"c40",
"c41",
"c42",
"c43",
"c44",
"c45",
"c46",
"c47",
"c48",
"c49",
"c50",
"c51",
"c52",
"c53",
"c54",
"c55",
"c56",
"c57",
"c58",
"c59",
"c60",
"c61",
"c62",
"c63",
"c64",
"c65",
"c66",
"c67",
"c68",
"c69",
"c70",
"c71",
"c72"
);

var bashoEX=Math.floor( Math.random() * 36 );


function mondai()
{
var iroEX=Math.floor( Math.random() * 9 );
var bashoEX=Math.floor( Math.random() * 36 );
document.getElementById(bashoko[bashoEX]).style.backgroundColor=iroko[iroEX];
setTimeout('mes()',500)

}


iroko = new  Array(
"#0000FF",
"#FFFF00",
"#FF00FF",
"#B22222",
"#228B22",
"#0000FF",
"#87CEEB",
"#8B008B",
"#808080"
);
var iroEX=Math.floor( Math.random() * 9 );
document.write("今日は"+iroko[iroEX]+"です!");
// -->
</script>


</head>
<body onLoad="setTimeout('mes()',500)">
<div class="aaa">
	<table cellspacing="0">
	<tr>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c37" onClick="cc37(document.getElementById('c37'))"></th>
		<th class="ccc" id="c38" onClick="cc38(document.getElementById('c38'))"></th>
		<th class="ccc" id="c39" onClick="cc39(document.getElementById('c39'))"></th>
		<th class="ccc" id="c40" onClick="cc40(document.getElementById('c40'))"></th>
		<th class="ccc" id="c41" onClick="cc41(document.getElementById('c41'))"></th>
		<th class="ccc" id="c42" onClick="cc42(document.getElementById('c42'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c43" onClick="cc43(document.getElementById('c43'))"></th>
		<th class="ccc" id="c44" onClick="cc44(document.getElementById('c44'))"></th>
		<th class="ccc" id="c45" onClick="cc45(document.getElementById('c45'))"></th>
		<th class="ccc" id="c46" onClick="cc46(document.getElementById('c46'))"></th>
		<th class="ccc" id="c47" onClick="cc47(document.getElementById('c47'))"></th>
		<th class="ccc" id="c48" onClick="cc48(document.getElementById('c48'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c49" onClick="cc49(document.getElementById('c49'))"></th>
		<th class="ccc" id="c50" onClick="cc50(document.getElementById('c50'))"></th>
		<th class="ccc" id="c51" onClick="cc51(document.getElementById('c51'))"></th>
		<th class="ccc" id="c52" onClick="cc52(document.getElementById('c52'))"></th>
		<th class="ccc" id="c53" onClick="cc53(document.getElementById('c53'))"></th>
		<th class="ccc" id="c54" onClick="cc54(document.getElementById('c54'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c55" onClick="cc55(document.getElementById('c55'))"></th>
		<th class="ccc" id="c56" onClick="cc56(document.getElementById('c56'))"></th>
		<th class="ccc" id="c57" onClick="cc57(document.getElementById('c57'))"></th>
		<th class="ccc" id="c58" onClick="cc58(document.getElementById('c58'))"></th>
		<th class="ccc" id="c59" onClick="cc59(document.getElementById('c59'))"></th>
		<th class="ccc" id="c60" onClick="cc60(document.getElementById('c60'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c61" onClick="cc61(document.getElementById('c61'))"></th>
		<th class="ccc" id="c62" onClick="cc62(document.getElementById('c62'))"></th>
		<th class="ccc" id="c63" onClick="cc63(document.getElementById('c63'))"></th>
		<th class="ccc" id="c64" onClick="cc64(document.getElementById('c64'))"></th>
		<th class="ccc" id="c65" onClick="cc65(document.getElementById('c65'))"></th>
		<th class="ccc" id="c66" onClick="cc66(document.getElementById('c66'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c67" onClick="cc67(document.getElementById('c67'))"></th>
		<th class="ccc" id="c68" onClick="cc68(document.getElementById('c68'))"></th>
		<th class="ccc" id="c69" onClick="cc69(document.getElementById('c69'))"></th>
		<th class="ccc" id="c70" onClick="cc70(document.getElementById('c70'))"></th>
		<th class="ccc" id="c71" onClick="cc71(document.getElementById('c71'))"></th>
		<th class="ccc" id="c72" onClick="cc72(document.getElementById('c72'))"></th>
		</tr>
		</table>
	</th>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c1" onClick="cc1(document.getElementById('c1'))"></th>
		<th class="ccc" id="c2" onClick="cc2(document.getElementById('c2'))"></th>
		<th class="ccc" id="c3" onClick="cc3(document.getElementById('c3'))"></th>
		<th class="ccc" id="c4" onClick="cc4(document.getElementById('c4'))"></th>
		<th class="ccc" id="c5" onClick="cc5(document.getElementById('c5'))"></th>
		<th class="ccc" id="c6" onClick="cc6(document.getElementById('c6'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c7" onClick="cc7(document.getElementById('c7'))"></th>
		<th class="ccc" id="c8" onClick="cc8(document.getElementById('c8'))"></th>
		<th class="ccc" id="c9" onClick="cc9(document.getElementById('c9'))"></th>
		<th class="ccc" id="c10" onClick="cc10(document.getElementById('c10'))"></th>
		<th class="ccc" id="c11" onClick="cc11(document.getElementById('c11'))"></th>
		<th class="ccc" id="c12" onClick="cc12(document.getElementById('c12'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c13" onClick="cc13(document.getElementById('c13'))"></th>
		<th class="ccc" id="c14" onClick="cc14(document.getElementById('c14'))"></th>
		<th class="ccc" id="c15" onClick="cc15(document.getElementById('c15'))"></th>
		<th class="ccc" id="c16" onClick="cc16(document.getElementById('c16'))"></th>
		<th class="ccc" id="c17" onClick="cc17(document.getElementById('c17'))"></th>
		<th class="ccc" id="c18" onClick="cc18(document.getElementById('c18'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c19" onClick="cc19(document.getElementById('c19'))"></th>
		<th class="ccc" id="c20" onClick="cc20(document.getElementById('c20'))"></th>
		<th class="ccc" id="c21" onClick="cc21(document.getElementById('c21'))"></th>
		<th class="ccc" id="c22" onClick="cc22(document.getElementById('c22'))"></th>
		<th class="ccc" id="c23" onClick="cc23(document.getElementById('c23'))"></th>
		<th class="ccc" id="c24" onClick="cc24(document.getElementById('c24'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c25" onClick="cc25(document.getElementById('c25'))"></th>
		<th class="ccc" id="c26" onClick="cc26(document.getElementById('c26'))"></th>
		<th class="ccc" id="c27" onClick="cc27(document.getElementById('c27'))"></th>
		<th class="ccc" id="c28" onClick="cc28(document.getElementById('c28'))"></th>
		<th class="ccc" id="c29" onClick="cc29(document.getElementById('c29'))"></th>
		<th class="ccc" id="c30" onClick="cc30(document.getElementById('c30'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c31" onClick="cc31(document.getElementById('c31'))"></th>
		<th class="ccc" id="c32" onClick="cc32(document.getElementById('c32'))"></th>
		<th class="ccc" id="c33" onClick="cc33(document.getElementById('c33'))"></th>
		<th class="ccc" id="c34" onClick="cc34(document.getElementById('c34'))"></th>
		<th class="ccc" id="c35" onClick="cc35(document.getElementById('c35'))"></th>
		<th class="ccc" id="c36" onClick="cc36(document.getElementById('c36'))"></th>
		</tr>
		</table>
	</th>
	</tr>
	</table>


	<div class="ddd">
		<div class="eee" id="e0">
		</div>

		<table cellspacing=0>
		<tr>
		<th class="eee" id="e1" style="background-color:#FFFFFF" onClick="chgColor1(document.getElementById('e0'))"></th>
		<th class="eee" id="e2" style="background-color:#FFFF00" onClick="chgColor2(document.getElementById('e0'))"></th>
		<th class="eee" id="e3" style="background-color:#FF0000" onClick="chgColor3(document.getElementById('e0'))"></th>
		<th class="eee" id="e4" style="background-color:#FF00FF" onClick="chgColor4(document.getElementById('e0'))"></th>
		<th class="eee" id="e5" style="background-color:#B22222" onClick="chgColor5(document.getElementById('e0'))"></th>
		</tr>
		<tr>
		<th class="eee" id="e6" style="background-color:#228B22" onClick="chgColor6(document.getElementById('e0'))"></th>
		<th class="eee" id="e7" style="background-color:#0000FF" onClick="chgColor7(document.getElementById('e0'))"></th>
		<th class="eee" id="e8" style="background-color:#87CEEB" onClick="chgColor8(document.getElementById('e0'))"></th>
		<th class="eee" id="e9" style="background-color:#8B008B" onClick="chgColor9(document.getElementById('e0'))"></th>
		<th class="eee" id="e10" style="background-color:#808080" onClick="chgColor10(document.getElementById('e0'))"></th>
		</tr>
		</table>
	<form>
	<input type="button" value="OK!" onclick="mondai()">
	</form>
	</div>


	<div class="fff">
	</div>


	<div class="ggg">
	</div>


	<table cellspacing=0>
	<tr>
	<th class="hhh"></th>
	<th class="hhh"></th>
	<th class="hhh"></th>
	</tr>
	</table>


	<div class="iii">
	</div>
</div>
<script type="text/javascript">
<!--

document.getElementById(bashoko[bashoEX]).style.backgroundColor=iroko[iroEX];


function mes()
{

document.getElementById(bashoko[bashoEX]).style.backgroundColor="#FFFFFF";

}

// -->
</script>
</body>
</html>
mondai()の動作が少し足りません。

コード:


function mondai()
{
var iroEX=Math.floor( Math.random() * 9 );
var bashoEX=Math.floor( Math.random() * 36 );
document.getElementById(bashoko[bashoEX]).style.backgroundColor=iroko[iroEX];
setTimeout('mes()',500)

}
上から、色を指定、場所を指定、決めた色を場所に送る、最後に決めた場所に白を送る。
という感じにしたいんですが一番↓の白を送るだけうまくいきません。
mes()が一番最初に指定した場所に白を送るようになっています。
わかる方解決法教えてください。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#82

投稿記事 by softya(ソフト屋) » 8年前

読みづらいのでタブでインデント(字下げ)をお願いしますね。{があったら次は1つ下げる。}で次は戻すが基本です。
今までは短かったですが害は少なかったですが長くなってきたのでお願いします。
あと、実験したいのでcssとjsもお願いします。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#83

投稿記事 by ルービ » 8年前

わかりました。

コード:



//色を送る。
var iro


function chgColor1(obj)
{
    obj.style.backgroundColor = "#FFFFFF";
    iro="#FFFFFF"
}
function chgColor2(obj)
{
    obj.style.backgroundColor = "#FFFF00";
    iro="#FFFF00"
}
function chgColor3(obj)
{
    obj.style.backgroundColor = "#FF0000";
    iro="#FF0000"
}
function chgColor4(obj)
{
    obj.style.backgroundColor = "#FF00FF";
    iro="#FF00FF"
}
function chgColor5(obj)
{
    obj.style.backgroundColor = "#B22222";
    iro="#B22222"
}
function chgColor6(obj)
{
    obj.style.backgroundColor = "#228B22";
    iro="#228B22"
}
function chgColor7(obj)
{
    obj.style.backgroundColor = "#0000FF";
    iro="#0000FF"
}
function chgColor8(obj)
{
    obj.style.backgroundColor = "#87CEEB";
    iro="#87CEEB"
}
function chgColor9(obj)
{
    obj.style.backgroundColor = "#8B008B";
    iro="#8B008B"
}
function chgColor10(obj)
{
    obj.style.backgroundColor = "#808080";
    iro="#808080"
}


//さらに色を送る。

function cc1(obj)
{
    obj.style.backgroundColor = iro;
}
function cc2(obj)
{
    obj.style.backgroundColor = iro;
}
function cc3(obj)
{
    obj.style.backgroundColor = iro;
}
function cc4(obj)
{
    obj.style.backgroundColor = iro;
}
function cc5(obj)
{
    obj.style.backgroundColor = iro;
}
function cc6(obj)
{
    obj.style.backgroundColor = iro;
}
function cc7(obj)
{
    obj.style.backgroundColor = iro;
}
function cc8(obj)
{
    obj.style.backgroundColor = iro;
}
function cc9(obj)
{
    obj.style.backgroundColor = iro;
}
function cc10(obj)
{
    obj.style.backgroundColor = iro;
}
function cc11(obj)
{
    obj.style.backgroundColor = iro;
}
function cc12(obj)
{
    obj.style.backgroundColor = iro;
}
function cc13(obj)
{
    obj.style.backgroundColor = iro;
}
function cc14(obj)
{
    obj.style.backgroundColor = iro;
}
function cc15(obj)
{
    obj.style.backgroundColor = iro;
}
function cc16(obj)
{
    obj.style.backgroundColor = iro;
}
function cc17(obj)
{
    obj.style.backgroundColor = iro;
}
function cc18(obj)
{
    obj.style.backgroundColor = iro;
}
function cc19(obj)
{
    obj.style.backgroundColor = iro;
}
function cc20(obj)
{
    obj.style.backgroundColor = iro;
}
function cc21(obj)
{
    obj.style.backgroundColor = iro;
}
function cc22(obj)
{
    obj.style.backgroundColor = iro;
}
function cc23(obj)
{
    obj.style.backgroundColor = iro;
}
function cc24(obj)
{
    obj.style.backgroundColor = iro;
}
function cc25(obj)
{
    obj.style.backgroundColor = iro;
}
function cc26(obj)
{
    obj.style.backgroundColor = iro;
}
function cc27(obj)
{
    obj.style.backgroundColor = iro;
}
function cc28(obj)
{
    obj.style.backgroundColor = iro;
}
function cc29(obj)
{
    obj.style.backgroundColor = iro;
}
function cc30(obj)
{
    obj.style.backgroundColor = iro;
}
function cc31(obj)
{
    obj.style.backgroundColor = iro;
}
function cc32(obj)
{
    obj.style.backgroundColor = iro;
}
function cc33(obj)
{
    obj.style.backgroundColor = iro;
}
function cc34(obj)
{
    obj.style.backgroundColor = iro;
}
function cc35(obj)
{
    obj.style.backgroundColor = iro;
}
function cc36(obj)
{
    obj.style.backgroundColor = iro;
}
1つ下げたりというのはスペースを空けて書くということでしょうか?
↑のはtest2_.jsです。
↓がtest2X.cssです。

コード:

.aaa{width : 800px; height : 800px; border : 5px solid black}
.bbb{width : 380px; height : 380px; border : 3px solid black}
.ccc{width : 50px; height : 50px; border : 1px solid black}
.ddd{width : 350px; height : 100px; border : 3px solid black}
.eee{width : 50px; height : 20px; border : 2px solid black}
.fff{width : 120px; height : 120px; border : 2px solid black}
.ggg{width : 250px; height : 30px; border : 2px solid black}
.hhh{width : 40px; height : 40px; border : 2px solid black}
.iii{width : 80px; height : 40px; border : 2px solid black}

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#84

投稿記事 by softya(ソフト屋) » 8年前

インデントは上にも書いたタブ(Tab)か空白どちらでも良いですよ。
これから実験してみます。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#85

投稿記事 by softya(ソフト屋) » 8年前

やりたいことが理解できなかったんですが、次の変数が別物だということは理解されていますか?
function内でvarが書いてあるので(1)と(2)、(a)と(b)は別の変数として扱われます。
mondai()内のbashoEXとmes()内のbashoEXは別のものです。
(2)の場所で(1)の変数を変更したい場合は(2)でvarを書かないで下さい。

コード:

var bashoEX=Math.floor( Math.random() * 36 ); (1)
 
 
function mondai()
{
var iroEX=Math.floor( Math.random() * 9 ); (a)
var bashoEX=Math.floor( Math.random() * 36 ); (2)
document.getElementById(bashoko[bashoEX]).style.backgroundColor=iroko[iroEX];
setTimeout('mes()',500)
 
}
 
 
iroko = new  Array(
"#0000FF",
"#FFFF00",
"#FF00FF",
"#B22222",
"#228B22",
"#0000FF",
"#87CEEB",
"#8B008B",
"#808080"
);
var iroEX=Math.floor( Math.random() * 9 ); (b)
document.write("今日は"+iroko[iroEX]+"です!");
// -->
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ」

Re: 小鳥の成長part2

#86

投稿記事 by ルービ」 » 8年前

>>softyaさん

ありです。
変数が違うのはわかりました。でもちょっとわからないです。
テストなどしながらやっていたので余計なものが多いようなので消してみました。

コード:


<html>
<head>
<script type="text/javascript" src="test2_.js"></script>
<link rel="stylesheet" type="text/css" href="test2X.css">

<script type="text/javascript">
<!--

bashoko=new Array(
"c37",
"c38",
"c39",
"c40",
"c41",
"c42",
"c43",
"c44",
"c45",
"c46",
"c47",
"c48",
"c49",
"c50",
"c51",
"c52",
"c53",
"c54",
"c55",
"c56",
"c57",
"c58",
"c59",
"c60",
"c61",
"c62",
"c63",
"c64",
"c65",
"c66",
"c67",
"c68",
"c69",
"c70",
"c71",
"c72"
);



function mondai()
{
  var iroEX=Math.floor( Math.random() * 9 );
  var bashoEX=Math.floor( Math.random() * 36 );
  document.getElementById(bashoko[bashoEX]).style.backgroundColor=iroko[iroEX];
  setTimeout('mes()',500)

}

function mes()
{

  document.getElementById(bashoko[bashoEX]).style.backgroundColor="#FFFFFF";

}



iroko = new  Array(
"#0000FF",
"#FFFF00",
"#FF00FF",
"#B22222",
"#228B22",
"#0000FF",
"#87CEEB",
"#8B008B",
"#808080"
);
// -->
</script>


</head>
<body onLoad="mondai()">
<div class="aaa">
	<table cellspacing="0">
	<tr>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c37" onClick="cc37(document.getElementById('c37'))"></th>
		<th class="ccc" id="c38" onClick="cc38(document.getElementById('c38'))"></th>
		<th class="ccc" id="c39" onClick="cc39(document.getElementById('c39'))"></th>
		<th class="ccc" id="c40" onClick="cc40(document.getElementById('c40'))"></th>
		<th class="ccc" id="c41" onClick="cc41(document.getElementById('c41'))"></th>
		<th class="ccc" id="c42" onClick="cc42(document.getElementById('c42'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c43" onClick="cc43(document.getElementById('c43'))"></th>
		<th class="ccc" id="c44" onClick="cc44(document.getElementById('c44'))"></th>
		<th class="ccc" id="c45" onClick="cc45(document.getElementById('c45'))"></th>
		<th class="ccc" id="c46" onClick="cc46(document.getElementById('c46'))"></th>
		<th class="ccc" id="c47" onClick="cc47(document.getElementById('c47'))"></th>
		<th class="ccc" id="c48" onClick="cc48(document.getElementById('c48'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c49" onClick="cc49(document.getElementById('c49'))"></th>
		<th class="ccc" id="c50" onClick="cc50(document.getElementById('c50'))"></th>
		<th class="ccc" id="c51" onClick="cc51(document.getElementById('c51'))"></th>
		<th class="ccc" id="c52" onClick="cc52(document.getElementById('c52'))"></th>
		<th class="ccc" id="c53" onClick="cc53(document.getElementById('c53'))"></th>
		<th class="ccc" id="c54" onClick="cc54(document.getElementById('c54'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c55" onClick="cc55(document.getElementById('c55'))"></th>
		<th class="ccc" id="c56" onClick="cc56(document.getElementById('c56'))"></th>
		<th class="ccc" id="c57" onClick="cc57(document.getElementById('c57'))"></th>
		<th class="ccc" id="c58" onClick="cc58(document.getElementById('c58'))"></th>
		<th class="ccc" id="c59" onClick="cc59(document.getElementById('c59'))"></th>
		<th class="ccc" id="c60" onClick="cc60(document.getElementById('c60'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c61" onClick="cc61(document.getElementById('c61'))"></th>
		<th class="ccc" id="c62" onClick="cc62(document.getElementById('c62'))"></th>
		<th class="ccc" id="c63" onClick="cc63(document.getElementById('c63'))"></th>
		<th class="ccc" id="c64" onClick="cc64(document.getElementById('c64'))"></th>
		<th class="ccc" id="c65" onClick="cc65(document.getElementById('c65'))"></th>
		<th class="ccc" id="c66" onClick="cc66(document.getElementById('c66'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c67" onClick="cc67(document.getElementById('c67'))"></th>
		<th class="ccc" id="c68" onClick="cc68(document.getElementById('c68'))"></th>
		<th class="ccc" id="c69" onClick="cc69(document.getElementById('c69'))"></th>
		<th class="ccc" id="c70" onClick="cc70(document.getElementById('c70'))"></th>
		<th class="ccc" id="c71" onClick="cc71(document.getElementById('c71'))"></th>
		<th class="ccc" id="c72" onClick="cc72(document.getElementById('c72'))"></th>
		</tr>
		</table>
	</th>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c1" onClick="cc1(document.getElementById('c1'))"></th>
		<th class="ccc" id="c2" onClick="cc2(document.getElementById('c2'))"></th>
		<th class="ccc" id="c3" onClick="cc3(document.getElementById('c3'))"></th>
		<th class="ccc" id="c4" onClick="cc4(document.getElementById('c4'))"></th>
		<th class="ccc" id="c5" onClick="cc5(document.getElementById('c5'))"></th>
		<th class="ccc" id="c6" onClick="cc6(document.getElementById('c6'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c7" onClick="cc7(document.getElementById('c7'))"></th>
		<th class="ccc" id="c8" onClick="cc8(document.getElementById('c8'))"></th>
		<th class="ccc" id="c9" onClick="cc9(document.getElementById('c9'))"></th>
		<th class="ccc" id="c10" onClick="cc10(document.getElementById('c10'))"></th>
		<th class="ccc" id="c11" onClick="cc11(document.getElementById('c11'))"></th>
		<th class="ccc" id="c12" onClick="cc12(document.getElementById('c12'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c13" onClick="cc13(document.getElementById('c13'))"></th>
		<th class="ccc" id="c14" onClick="cc14(document.getElementById('c14'))"></th>
		<th class="ccc" id="c15" onClick="cc15(document.getElementById('c15'))"></th>
		<th class="ccc" id="c16" onClick="cc16(document.getElementById('c16'))"></th>
		<th class="ccc" id="c17" onClick="cc17(document.getElementById('c17'))"></th>
		<th class="ccc" id="c18" onClick="cc18(document.getElementById('c18'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c19" onClick="cc19(document.getElementById('c19'))"></th>
		<th class="ccc" id="c20" onClick="cc20(document.getElementById('c20'))"></th>
		<th class="ccc" id="c21" onClick="cc21(document.getElementById('c21'))"></th>
		<th class="ccc" id="c22" onClick="cc22(document.getElementById('c22'))"></th>
		<th class="ccc" id="c23" onClick="cc23(document.getElementById('c23'))"></th>
		<th class="ccc" id="c24" onClick="cc24(document.getElementById('c24'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c25" onClick="cc25(document.getElementById('c25'))"></th>
		<th class="ccc" id="c26" onClick="cc26(document.getElementById('c26'))"></th>
		<th class="ccc" id="c27" onClick="cc27(document.getElementById('c27'))"></th>
		<th class="ccc" id="c28" onClick="cc28(document.getElementById('c28'))"></th>
		<th class="ccc" id="c29" onClick="cc29(document.getElementById('c29'))"></th>
		<th class="ccc" id="c30" onClick="cc30(document.getElementById('c30'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c31" onClick="cc31(document.getElementById('c31'))"></th>
		<th class="ccc" id="c32" onClick="cc32(document.getElementById('c32'))"></th>
		<th class="ccc" id="c33" onClick="cc33(document.getElementById('c33'))"></th>
		<th class="ccc" id="c34" onClick="cc34(document.getElementById('c34'))"></th>
		<th class="ccc" id="c35" onClick="cc35(document.getElementById('c35'))"></th>
		<th class="ccc" id="c36" onClick="cc36(document.getElementById('c36'))"></th>
		</tr>
		</table>
	</th>
	</tr>
	</table>


	<div class="ddd">
		<div class="eee" id="e0">
		</div>

		<table cellspacing=0>
		<tr>
		<th class="eee" id="e1" style="background-color:#FFFFFF" onClick="chgColor1(document.getElementById('e0'))"></th>
		<th class="eee" id="e2" style="background-color:#FFFF00" onClick="chgColor2(document.getElementById('e0'))"></th>
		<th class="eee" id="e3" style="background-color:#FF0000" onClick="chgColor3(document.getElementById('e0'))"></th>
		<th class="eee" id="e4" style="background-color:#FF00FF" onClick="chgColor4(document.getElementById('e0'))"></th>
		<th class="eee" id="e5" style="background-color:#B22222" onClick="chgColor5(document.getElementById('e0'))"></th>
		</tr>
		<tr>
		<th class="eee" id="e6" style="background-color:#228B22" onClick="chgColor6(document.getElementById('e0'))"></th>
		<th class="eee" id="e7" style="background-color:#0000FF" onClick="chgColor7(document.getElementById('e0'))"></th>
		<th class="eee" id="e8" style="background-color:#87CEEB" onClick="chgColor8(document.getElementById('e0'))"></th>
		<th class="eee" id="e9" style="background-color:#8B008B" onClick="chgColor9(document.getElementById('e0'))"></th>
		<th class="eee" id="e10" style="background-color:#808080" onClick="chgColor10(document.getElementById('e0'))"></th>
		</tr>
		</table>
	<form>
	<input type="button" value="OK!" onclick="mondai()">
	</form>
	</div>


	<div class="fff">
	</div>


	<div class="ggg">
	</div>


	<table cellspacing=0>
	<tr>
	<th class="hhh"></th>
	<th class="hhh"></th>
	<th class="hhh"></th>
	</tr>
	</table>


	<div class="iii">
	</div>
</div>
</body>
</html>
この場合はどうなんでしょう?
やりたいことは色が出て500ミリ秒後に白で塗りつぶされる、というものです。
お願いします。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#87

投稿記事 by softya(ソフト屋) » 8年前

なにも変わっていませんよ。
varがあるのでmodai()とmes()のbashoEXは別物ですから、値が違うはずです。
developer toolsのスクリプトデバッガで値を確認してみて下さい。 

[補足]
関数外のvar ・・・・ 全体で参照と変更出来るもの。
関数内のvar ・・・・ varのある関数内でのみ有効なもの。関数外では値は消え去る。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#88

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。

コード:

var iroEX
var bashoEX

function mondai()
{
  iroEX=Math.floor( Math.random() * 9 );
  bashoEX=Math.floor( Math.random() * 36 );
  document.getElementById(bashoko[bashoEX]).style.backgroundColor=iroko[iroEX];
  setTimeout('mes()',500)

}

function mes()
{

  document.getElementById(bashoko[bashoEX]).style.backgroundColor="#FFFFFF";

}
できました。
たぶんまた来ます。

ルービ

Re: 小鳥の成長part2

#89

投稿記事 by ルービ » 8年前

知識的に限界かと思うところに来ました。

コード:


<html>
<head>
<script type="text/javascript" src="test2_.js"></script>
<link rel="stylesheet" type="text/css" href="test2X.css">

<script type="text/javascript">
<!--

bashoko=new Array(
"c37",
"c38",
"c39",
"c40",
"c41",
"c42",
"c43",
"c44",
"c45",
"c46",
"c47",
"c48",
"c49",
"c50",
"c51",
"c52",
"c53",
"c54",
"c55",
"c56",
"c57",
"c58",
"c59",
"c60",
"c61",
"c62",
"c63",
"c64",
"c65",
"c66",
"c67",
"c68",
"c69",
"c70",
"c71",
"c72"
);

var iroEX
var bashoEX
var kotae1
var kotae2

function mondai()
{
  iroEX=Math.floor( Math.random() * 9 );
  bashoEX=Math.floor( Math.random() * 36 );
  document.getElementById(bashoko[bashoEX]).style.backgroundColor=iroko[iroEX];
  kotae1=iroko[iroEX];
  kotae2=bashoko[bashoEX];
  alert(kotae1);
  alert(kotae2);
  setTimeout('mes()',500);

}

function mes()
{

  document.getElementById(bashoko[bashoEX]).style.backgroundColor="#FFFFFF";

}

function awase()
{

  if(kotae1=kotaec1){
  alert("色正解")
  }else{
  alert("色ハズレ")
  }

  if(kotae2=kotaec2){
  alert("場所正解")
  }else{
  alert("場所ハズレ")
  }
}

iroko = new  Array(
"#0000FF",
"#FFFF00",
"#FF00FF",
"#B22222",
"#228B22",
"#0000FF",
"#87CEEB",
"#8B008B",
"#808080"
);
// -->
</script>


</head>
<body onLoad="mondai()">
<div class="aaa">
	<table cellspacing="0">
	<tr>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c37" onClick="cc37(document.getElementById('c37'))"></th>
		<th class="ccc" id="c38" onClick="cc38(document.getElementById('c38'))"></th>
		<th class="ccc" id="c39" onClick="cc39(document.getElementById('c39'))"></th>
		<th class="ccc" id="c40" onClick="cc40(document.getElementById('c40'))"></th>
		<th class="ccc" id="c41" onClick="cc41(document.getElementById('c41'))"></th>
		<th class="ccc" id="c42" onClick="cc42(document.getElementById('c42'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c43" onClick="cc43(document.getElementById('c43'))"></th>
		<th class="ccc" id="c44" onClick="cc44(document.getElementById('c44'))"></th>
		<th class="ccc" id="c45" onClick="cc45(document.getElementById('c45'))"></th>
		<th class="ccc" id="c46" onClick="cc46(document.getElementById('c46'))"></th>
		<th class="ccc" id="c47" onClick="cc47(document.getElementById('c47'))"></th>
		<th class="ccc" id="c48" onClick="cc48(document.getElementById('c48'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c49" onClick="cc49(document.getElementById('c49'))"></th>
		<th class="ccc" id="c50" onClick="cc50(document.getElementById('c50'))"></th>
		<th class="ccc" id="c51" onClick="cc51(document.getElementById('c51'))"></th>
		<th class="ccc" id="c52" onClick="cc52(document.getElementById('c52'))"></th>
		<th class="ccc" id="c53" onClick="cc53(document.getElementById('c53'))"></th>
		<th class="ccc" id="c54" onClick="cc54(document.getElementById('c54'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c55" onClick="cc55(document.getElementById('c55'))"></th>
		<th class="ccc" id="c56" onClick="cc56(document.getElementById('c56'))"></th>
		<th class="ccc" id="c57" onClick="cc57(document.getElementById('c57'))"></th>
		<th class="ccc" id="c58" onClick="cc58(document.getElementById('c58'))"></th>
		<th class="ccc" id="c59" onClick="cc59(document.getElementById('c59'))"></th>
		<th class="ccc" id="c60" onClick="cc60(document.getElementById('c60'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c61" onClick="cc61(document.getElementById('c61'))"></th>
		<th class="ccc" id="c62" onClick="cc62(document.getElementById('c62'))"></th>
		<th class="ccc" id="c63" onClick="cc63(document.getElementById('c63'))"></th>
		<th class="ccc" id="c64" onClick="cc64(document.getElementById('c64'))"></th>
		<th class="ccc" id="c65" onClick="cc65(document.getElementById('c65'))"></th>
		<th class="ccc" id="c66" onClick="cc66(document.getElementById('c66'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c67" onClick="cc67(document.getElementById('c67'))"></th>
		<th class="ccc" id="c68" onClick="cc68(document.getElementById('c68'))"></th>
		<th class="ccc" id="c69" onClick="cc69(document.getElementById('c69'))"></th>
		<th class="ccc" id="c70" onClick="cc70(document.getElementById('c70'))"></th>
		<th class="ccc" id="c71" onClick="cc71(document.getElementById('c71'))"></th>
		<th class="ccc" id="c72" onClick="cc72(document.getElementById('c72'))"></th>
		</tr>
		</table>
	</th>
	<th class="bbb">
		<table cellspacing="0">
		<tr>
		<th class="ccc" id="c1" onClick="cc1(document.getElementById('c1'))"></th>
		<th class="ccc" id="c2" onClick="cc2(document.getElementById('c2'))"></th>
		<th class="ccc" id="c3" onClick="cc3(document.getElementById('c3'))"></th>
		<th class="ccc" id="c4" onClick="cc4(document.getElementById('c4'))"></th>
		<th class="ccc" id="c5" onClick="cc5(document.getElementById('c5'))"></th>
		<th class="ccc" id="c6" onClick="cc6(document.getElementById('c6'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c7" onClick="cc7(document.getElementById('c7'))"></th>
		<th class="ccc" id="c8" onClick="cc8(document.getElementById('c8'))"></th>
		<th class="ccc" id="c9" onClick="cc9(document.getElementById('c9'))"></th>
		<th class="ccc" id="c10" onClick="cc10(document.getElementById('c10'))"></th>
		<th class="ccc" id="c11" onClick="cc11(document.getElementById('c11'))"></th>
		<th class="ccc" id="c12" onClick="cc12(document.getElementById('c12'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c13" onClick="cc13(document.getElementById('c13'))"></th>
		<th class="ccc" id="c14" onClick="cc14(document.getElementById('c14'))"></th>
		<th class="ccc" id="c15" onClick="cc15(document.getElementById('c15'))"></th>
		<th class="ccc" id="c16" onClick="cc16(document.getElementById('c16'))"></th>
		<th class="ccc" id="c17" onClick="cc17(document.getElementById('c17'))"></th>
		<th class="ccc" id="c18" onClick="cc18(document.getElementById('c18'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c19" onClick="cc19(document.getElementById('c19'))"></th>
		<th class="ccc" id="c20" onClick="cc20(document.getElementById('c20'))"></th>
		<th class="ccc" id="c21" onClick="cc21(document.getElementById('c21'))"></th>
		<th class="ccc" id="c22" onClick="cc22(document.getElementById('c22'))"></th>
		<th class="ccc" id="c23" onClick="cc23(document.getElementById('c23'))"></th>
		<th class="ccc" id="c24" onClick="cc24(document.getElementById('c24'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c25" onClick="cc25(document.getElementById('c25'))"></th>
		<th class="ccc" id="c26" onClick="cc26(document.getElementById('c26'))"></th>
		<th class="ccc" id="c27" onClick="cc27(document.getElementById('c27'))"></th>
		<th class="ccc" id="c28" onClick="cc28(document.getElementById('c28'))"></th>
		<th class="ccc" id="c29" onClick="cc29(document.getElementById('c29'))"></th>
		<th class="ccc" id="c30" onClick="cc30(document.getElementById('c30'))"></th>
		</tr>
		<tr>
		<th class="ccc" id="c31" onClick="cc31(document.getElementById('c31'))"></th>
		<th class="ccc" id="c32" onClick="cc32(document.getElementById('c32'))"></th>
		<th class="ccc" id="c33" onClick="cc33(document.getElementById('c33'))"></th>
		<th class="ccc" id="c34" onClick="cc34(document.getElementById('c34'))"></th>
		<th class="ccc" id="c35" onClick="cc35(document.getElementById('c35'))"></th>
		<th class="ccc" id="c36" onClick="cc36(document.getElementById('c36'))"></th>
		</tr>
		</table>
	</th>
	</tr>
	</table>


	<div class="ddd">
		<div class="eee" id="e0">
		</div>

		<table cellspacing=0>
		<tr>
		<th class="eee" id="e1" style="background-color:#FFFFFF" onClick="chgColor1(document.getElementById('e0'))"></th>
		<th class="eee" id="e2" style="background-color:#FFFF00" onClick="chgColor2(document.getElementById('e0'))"></th>
		<th class="eee" id="e3" style="background-color:#FF0000" onClick="chgColor3(document.getElementById('e0'))"></th>
		<th class="eee" id="e4" style="background-color:#FF00FF" onClick="chgColor4(document.getElementById('e0'))"></th>
		<th class="eee" id="e5" style="background-color:#B22222" onClick="chgColor5(document.getElementById('e0'))"></th>
		</tr>
		<tr>
		<th class="eee" id="e6" style="background-color:#228B22" onClick="chgColor6(document.getElementById('e0'))"></th>
		<th class="eee" id="e7" style="background-color:#0000FF" onClick="chgColor7(document.getElementById('e0'))"></th>
		<th class="eee" id="e8" style="background-color:#87CEEB" onClick="chgColor8(document.getElementById('e0'))"></th>
		<th class="eee" id="e9" style="background-color:#8B008B" onClick="chgColor9(document.getElementById('e0'))"></th>
		<th class="eee" id="e10" style="background-color:#808080" onClick="chgColor10(document.getElementById('e0'))"></th>
		</tr>
		</table>
	<form>
	<input type="button" value="答!" onclick="awase()">
	<input type="button" value="OK!" onclick="mondai()">
	</form>
	</div>


	<div class="fff">
	</div>


	<div class="ggg">
	</div>


	<table cellspacing=0>
	<tr>
	<th class="hhh"></th>
	<th class="hhh"></th>
	<th class="hhh"></th>
	</tr>
	</table>


	<div class="iii">
	</div>
</div>
</body>
</html>
test2_.js

コード:


//色を送る。
var iro


function chgColor1(obj)
{
    obj.style.backgroundColor = "#FFFFFF";
    iro="#FFFFFF"
}
function chgColor2(obj)
{
    obj.style.backgroundColor = "#FFFF00";
    iro="#FFFF00"
}
function chgColor3(obj)
{
    obj.style.backgroundColor = "#FF0000";
    iro="#FF0000"
}
function chgColor4(obj)
{
    obj.style.backgroundColor = "#FF00FF";
    iro="#FF00FF"
}
function chgColor5(obj)
{
    obj.style.backgroundColor = "#B22222";
    iro="#B22222"
}
function chgColor6(obj)
{
    obj.style.backgroundColor = "#228B22";
    iro="#228B22"
}
function chgColor7(obj)
{
    obj.style.backgroundColor = "#0000FF";
    iro="#0000FF"
}
function chgColor8(obj)
{
    obj.style.backgroundColor = "#87CEEB";
    iro="#87CEEB"
}
function chgColor9(obj)
{
    obj.style.backgroundColor = "#8B008B";
    iro="#8B008B"
}
function chgColor10(obj)
{
    obj.style.backgroundColor = "#808080";
    iro="#808080"
}


//さらに色を送る。

var kotaec1
var kotaec2

function cc1(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c37;
}
function cc2(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c38;
}
function cc3(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c39;
}
function cc4(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c40;
}
function cc5(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c41;
}
function cc6(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c42;
}
function cc7(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c43;
}
function cc8(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c44;
}
function cc9(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c45;
}
function cc10(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c46;
}
function cc11(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c47;
}
function cc12(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c48;
}
function cc13(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c49;
}
function cc14(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c50;
}
function cc15(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c51;
}
function cc16(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c52;
}
function cc17(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c53;
}
function cc18(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c54;
}
function cc19(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c55;
}
function cc20(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c56;
}
function cc21(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c57;
}
function cc22(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c58;
}
function cc23(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c59;
}
function cc24(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c60;
}
function cc25(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c61;
}
function cc26(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c62;
}
function cc27(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c63;
}
function cc28(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c64;
}
function cc29(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c65;
}
function cc30(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c66;
}
function cc31(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c67;
}
function cc32(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c68;
}
function cc33(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c69;
}
function cc34(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c70;
}
function cc35(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c71;
}
function cc36(obj)
{
    obj.style.backgroundColor = iro;
    kotaec1=iro;
    kotaec2=c72;
}
cssは変えてないです。

正解したらレベルが上がって、レベルの数だけ表示される色の数が増える。という風にしたいのと
それを答え合わせる。ということです。左の画面で表示されて右の画面で答えを色で作ってそれを照らし合わせて正解したらレベルアップ、間違えたら同じレベルをやるのと3回間違えたら記録されるようにしたいです。

よくわからなすぎてどうしようもないです。
他サイトなどでどういうところを見ればいいか教えてください。
できればここはifやforを使えばできるなど教えてください。

アバター
softya(ソフト屋)
副管理人
記事: 11677
登録日時: 9年前
住所: 東海地方
連絡を取る:

Re: 小鳥の成長part2

#90

投稿記事 by softya(ソフト屋) » 8年前

まず、全部をいっぺんにやらない事。

1.正解したらレベルが上がって、レベルの数だけ表示される色の数が増える。という風にしたいのと
2.それを答え合わせる。ということです。
3.左の画面で表示されて右の画面で答えを色で作ってそれを照らし合わせて正解したらレベルアップ、間違えたら同じレベルをやるのと3回間違えたら記録されるようにしたいです。

は別々に考えて別々に試作します。

それと
2.に関しては数が固定ならできているんでしょうか?
1.と3.に関してはルールが不明確です。もっと正確に細かく書いてみて下さい。
表示される色数の上限と下限を決めて下さい。自動的にレベルの上限と下限も決まると思います。
マスが埋まるんじゃなくて、1つでも正解すればレベルアップでしょうか?
3回間違えたら何処に記録するんでしょうか?

あとjavascriptの同じかの比較は=ではなく==か===ですよ。=は代入です。
by softya(ソフト屋) 方針:私は仕組み・考え方を理解して欲しいので直接的なコードを回答することはまれですので、すぐコードがほしい方はその旨をご明記下さい。私以外の方と交代したいと思います(代わりの方がいる保証は出来かねます)。

ルービ

Re: 小鳥の成長part2

#91

投稿記事 by ルービ » 8年前

>>softyaさん

ありです。
時間の都合で一時的に制作を打ち切ります。
また来ます。

閉鎖

“C言語何でも質問掲示板” へ戻る