javascript初心者です。
現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。
現在下記のように作っていますがエラーが起きてしまいます。
どのように直せばよいかご教授願います。
<script type="text/javascript">
<!--
var color1 = "#ff0000";
var color2 = "#0000ff";
function onC(obj){
if (obj.style.backgroundColor = color1){
obj.style.backgroundColor = color2;
}
else if (obj.style.backgroundColor = color2){
obj.style.backgroundColor = color1;
}
}
//-->
</script>
<body>
<table border="1" cellpadding=20>
<tr>
<td onClick = "onC(this)"><br>
</td>
</tr>
</table>
</body>
No.4ベストアンサー
- 回答日時:
styleのbackgroundColorは
<td style="background-color:~">
みたいな記述がなければ
"style"も"backgroundColor"も存在しないのでいきなり比較はできない。
(ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。)
標準的なブラウザならgetComputedStyle、IEならcurrentStyleで結果的にどう設定されているかを読み出す事はできるけど、ちょっと面倒なのでここではパス。
とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。
ついでに、戻すときは元の色を上書きするのではなく設定した色を削除すればいい。
というわけで以下サンプル。
<html>
<head>
<title></title>
<style type="text/css">
td{background-color:#0000ff}
</style>
<script type="text/javascript">
function bgSwap(TD) {
if(TD.style && TD.style.backgroundColor)
TD.style.backgroundColor = '';
else
TD.style.backgroundColor = '#ff0000';
}
</script>
</head>
<body>
<table>
<tr>
<td onclick="bgSwap(this)">セル1</td>
<td onclick="bgSwap(this)">セル2</td>
</tr>
</table>
</body>
</html>
>>styleのbackgroundColorは
>><td style="background-color:~">
>>みたいな記述がなければ
>>"style"も"backgroundColor"も存在しないのでいきなり比較はできない。
>>(ヘッダ部や外部スタイルシートで指定した色はそのオブジェクトのstyleプロパティではない。)
backgroundColorは特に記述がなければ初期値は#FFFFFFとなると思っていました。
>>とにかくエラーが起きないようにするには、"style"がある事を確認してから比較する。
>>ついでに、戻すときは元の色を上書きするのではなく設定した色を削除すればいい。
とてもわかりやすく説明していただき、参考になりました。
サンプルを参考に自分なりにカスタマイズしていきたいと思います。
今回はありがとうございました。
No.3
- 回答日時:
例えば、このようにします。
↓<html>
<head>
<title>セルの背景色を変更する</title>
<script type="text/javascript">
<!--
var color1 = "#ff0000";
var color2 = "#0000ff";
var color3 = "#cccccc";
ic=1;
function setCellBG1() {
ic=-1*ic;
if ( ic == -1 ) {
this.style.backgroundColor = color1;
} else {
this.style.backgroundColor = color2;
}
}
window.onload = function() {
var tdTag = document.getElementsByTagName("td");
for (var i=0; i<tdTag.length; i++){
tdTag[i].style.backgroundColor = color3;
tdTag[i].onmousedown = setCellBG1;
}
}
// -->
</script>
</head>
<body>
<p>セルの上でマウスをクリックして下さい</p>
<table border="1">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
</body>
</html>
icを用いて比較の対象をはっきりさせているという
解釈でよろしかったでしょうか。
window.onload=function()以降が理解しきれないのですが
今後のために理解できるよう
javascriptの勉強をしていきたいと思います。
今回はよいサンプルをありがとうございました。
No.2
- 回答日時:
初期値として 何も設定されていない場合 比較部分を修正しても変化がありません
if ( obj.style.backgroundColor == color1 ) {
obj.style.backgroundColor = color2;
} else {
obj.style.backgroundColor = color1;
}
といった具合に判断したほうが良いでしょう
上記の比較演算子と初期値にきをつけてやってみましたが
セルをクリックすると
stack overflow at line:0
と表示されて動きませんでした。
よくわかりませんが
やはり初期値は必要なのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
ゆるやかでぃべーと タイムマシンを破壊すべきか。
これはディベートの論題だと仮定したうえでの回答お願いします。あなたは、その末にタイムマシンを壊してしまうのか、使い道を探すのかどうかを考えてもらいたいです。
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
クリックで色変更後に既に変更された要素を戻すには
JavaScript
-
javascriptテキストBOX色を元に戻したい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンメニューを表の中に...
-
<JavaScript>tableタグを入力不...
-
テキストエリアに入力した改行...
-
javascriptで表に画像を貼る
-
画面表示とともに、テーブルの...
-
cancelBubble
-
プルダウン 項目が多いので先頭...
-
dijit.form.ComboBoxについて
-
return trueとreturn falseの用...
-
javascript による POST 送信時...
-
テキストボックスに入力された...
-
VBSでブラウザ上のテキストボッ...
-
ラジオボタンの選択で解答・点...
-
追加ボタンを押した際に ok ボ...
-
netscapeでもinnerTextやinnner...
-
tableの任意行にfocusをあてる
-
value内に変数を入れたい
-
submitするとなぜか2度実行する
-
JavaScriptで特定のtdタグにcla...
-
VBScriptでHTMLのセレクトボッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
<iframe>内にHTMLをランダム表...
-
javascriptで画像をテーブルに...
-
WEB制作に関する質問です。コン...
-
javascript でテーブル操作
-
カレンダーに印を付けたい
-
日にち指定によるテーブル/行の...
-
テーブルのtdの中に、重複避け...
-
innerHTMLでのテーブル作成
-
プルダウンメニューを表の中に...
-
簡単なJavaスロットマシーンに...
-
javascriptで表に画像を貼る
-
javascriptで画像の移動
おすすめ情報