javascriptの予約語について
- javascriptの予約語について詳しく調べたが、clickが予約語に含まれていないことが分かった。
- ネット上にはclickという関数名がよく使われているが、そのままでは機能しないことがある。
- clickという名前を予約語と勘違いしている人がおり、予約語ではないので問題ない。
- ベストアンサー
javascriptの予約語について
環境 win8 64bit ブラウザ30.0.1599.69 m Firefox24 IE10 javascriptの勉強を始めたばかりなのですが、「click」という名前は予約語なのでしょうか？ ボタンを押したら背景色が変わるコードを書いてみたのですが関数名をclickにすると機能しません。 別の名前（testclick1等）に変更すると機能するようになるのでclickが予約語なのかと思うのですが、 いろいろと調べてみたのですがいまひとつわかりません。 予約語一覧には載っていません http://msdn.microsoft.com/ja-jp/library/ie/0779sbks(v=vs.94).aspx ###################################################### <html> <title></title> <body> <div id="sample">sample</div> <script type="text/javascript"> function click() { e = document.getElementById("sample"); e.style.backgroundColor = 'red'; } function testclick2() { e = document.getElementById("sample"); e.style.backgroundColor = 'blue'; } function testclick3() { e = document.getElementById("sample"); e.style.backgroundColor = 'yellow'; } </script> <hr> <button onclick="click()">Change to Red</button> <button onclick="testclick2()">Change to Blue</button> <button onclick="testclick3()">Change to Yellow</button> </body> </html> ###################################################### ネット上に出回っているjavascriptのコードでは普通にclickという名前が使われています。 下記のyoutube動画内でも使われています。 同様のものを私の環境でも書いてみましたがやはり機能しませんでした。 （clickを別の名前にすると動きます） http://www.youtube.com/watch?v=5e40QHi-vUg これはいったいどういうことなのでしょうか？ 理由をご存の方教えてください。
- cocktailxyz
- お礼率94% (16/17)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
質問者さんが検証で使っているブラウザは新しいものね たとえばInternet Explorer 10だと使えなくなったのよ 互換表示にしたり IE9モードやIE8モードにしたりすると きちんと機能するはずよ おためしあれ
その他の回答 (1)
- b0a0a
- ベストアンサー率49% (156/313)
これはよくハマることですね ズバリ言うとclickはbutton要素.clickを指してしまうからです つまりonclick="click()"は自分がクリックされたら自分をクリックするという意味です ですのでそのような名前を付けてはいけません
お礼
納得しました。ありがとうございました。
関連するQ&A
- Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript
- JavaScriptのgetElementById以降の記述？
ボタンをクリックすると表示内容とボタン色を変える、というJavaScriptを書き換えているところなのですが、 わからないことがあるので宜しくお願いします。 ※ボタンにはid名（id="tab0"、id="tab1"、id="tab2"、…といったふうに）が付けてあります。 ------------------------------------------------------------ 参考にしている書き換え前のJavaScriptの一部 ------------------------------------------------------------ function changeTab(n) { if ( n != tabNum && document.getElementById("tab"+n+"_content") ) { document.getElementById("tab"+tabNum).style.backgroundColor="#666"; document.getElementById("tab"+tabNum+"_content").style.display = "none"; document.getElementById("tab"+n).style.backgroundColor="#fff"; document.getElementById("tab"+n+"_content").style.display = "block"; tabNum = n; }} ------------------------------------------------------------ ボタン（<button type="button" id="tab0">）の代わりに 画像（<input type="image" id="tab0" src="xxx.gif">）にしたので、 クリックしたときに画像を別の画像に入れ替えるようにしたいのです。 「style.backgroundColor="#fff";」の部分を書き換えれば良いと思うのですが…。 説明不足の点などありましたら補足しますので宜しくお願いします。
- ベストアンサー
- JavaScript
- クリックで色変更後に既に変更された要素を戻すには
javascriptの勉強をしています。 htmlのテーブルタグで、ブロックが３つあるとします。 ■■■ それぞれのブロックを<div id="00"><div id="01"><div id="02"> として定義しています。 onclick="document.getElementById('00').style.backgroundColor='#ff0000' でクリックしたブロックの色を変更しています。 質問したい内容は、「１箇所をクリックした時に、他の２箇所の色を戻す」方法です。 以下はサンプルです。 -------------------------------------- <TABLE BORDER="2" bordercolor="#000000"> <TR> <TD bgcolor="#008000"> <div id="00"> <IMG onclick="document.getElementById('00').style.backgroundColor='#ff0000';document.getElementById('01').style.backgroundColor='#008000';document.getElementById('02').style.backgroundColor='#008000';" border="0" src="item/img/00.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="01"> <IMG onclick="document.getElementById('01').style.backgroundColor='#ff0000';" border="0" src="item/img/01.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="02"> <IMG onclick="document.getElementById('02').style.backgroundColor='#ff0000';" border="0" src="item/img/02.png" width="36" height="36"> </div> </TD> </TABLE>--------------------------------------------- １箇所をクリックした時に、他の２箇所の色を戻すには 「00をクリックした時に、01の色を戻す02の色を戻す」のように、 ３箇所全てに記述しなければならないのでしょうか？ テーブルのブロックが少なければ、これでもいいのですが、 たとえば１００個とか１０００個になった時にはとても大変な作業になってしまいます。 他になにか効率のいい記述の仕方はありますでしょうか？ ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascript return について
javascript return の使い方について こんにちは。 javascriptでhtmlとjavascriptを分けて書く方法を勉強中です。 ○html文 <a href="" name ="linkMaxcd" id ="linkMaxcd">最大値</a> ○javascript文 １）document.getElementById("linkMaxcd").onclick=function(){return maxcd();} ２）function maxcd(){ 省略 return false; } この構文の流れは、 (1)htmlの最大値というテキストリンクをクリックする (2)javascript １）のonclickしたら、maxcdのfunctionを実行する (3)javascript ２）の省略を行い、return false；でfalseを返す ということだと思います。 javascript ２）のreturn false; のfalseは、何処に戻るのですか？ ○javascript参考 １'）document.getElementById("linkMaxcd").onclick=function(){maxcd();} ２'）function maxcd(){ 省略 } もともと上記のjavascript参考にreturnを付け加えたところで、理解できなくなりました。 returnの付け方は、javascript参考サイトの手順に書いてありました。 よろしくお願いします。 以上
- ベストアンサー
- JavaScript
- javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。
モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。 あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ おねがいします！！！ 全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。 でもできたら<input type ～ button ～ onClick>とかがつかわれているとうれしいです。
- ベストアンサー
- JavaScript
- これってJavaScriptですか？？
以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000"> </td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>
- ベストアンサー
- JavaScript
- javascript外部ファイル化の複数指定の質問です。
javascript外部ファイル化の複数指定の質問です。 一つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} 二つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ window.onload = function() { document.getElementById("home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; document.getElementById("sub_home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("sub_home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; } この上記の２つのjavascriptを別々に外部ファイル化して、head内に読み込んでおります。 両方とも動作させたいのですが、下のwindow.onload のjavascriptしか動作しません。 両方、動作させるには、どのように記述すればよいのでしょうか？ どなたか教えていただけませんか？ よろしくお願い致しますm(＿ ＿)m
- 締切済み
- JavaScript
- 色をラジオボタンで選択
エレメントでボタンを押すと色を変えるJavaScriptです。 検索をしながら ボタンで一度変えることはできるようになりましたが <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <button onclick="effect()">チェンジ</button> <span id="sample">■□□■</span> ラジオボタンで選択するようにしたいのですが どのようにすればよいでしょうか？ うまくいく方法を教えてください。 ブラウザーはGoogle Chrome最新版です。 どうしてもできなければ Firefoxでもかまいません。 <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <input type=radio name="colorcode" value="#000000" checked>黒 <input type=radio name="colorcode" value="#ff0000">赤 <input type=radio name="colorcode" value="#00ff00">緑 <span id="sample">■□□■</span>
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- JavaScript Eventのタイミング
Eventの挙動を学ぶために、簡単なスクリプトを作成しました。 テキストボックスに文字列を入れて、Submitボタンを押すと、 テキストボックスの下に(innerHTMLで)入力文字が表示され、 ボタン自体も入力文字になるというものです。 しかし、テキストに文字を入力し、Submitを押してもボタン・innerHTMLともに文字は変化しません。このままリロードをすると変化します。 挙動からして、マウスクリック自体は反応していないが、リロードによりイベントハンドラが動作しているように見受けられます。 イベントハンドラはonclickに代入しているためなぜこのようになるのか わかりません。 できるだけ、JavascriptとHTMLを分離したく外だしのファイルで 実現したいと思っています。 考え方、(比較的平易な)参考資料などありましたら教えていただけないでしょうか？ HTMLで<body onload="init()">として、JavaScriptでは以下のように記述しています。 function init(){ document.getElementById("button").click = change(); } function change(){ keyword = document.getElementById("keyword").value; document.getElementById("input").innerHTML = keyword; document.getElementById("button").value = keyword; }
- ベストアンサー
- JavaScript
お礼
なるほど、そういうことだったんですね。