人に聞けない痔の悩み、これでスッキリ >>

JavaScriptのonclickイベントについてですが、

 <form name="fm">
 <input type="button" name="bt" value="開始" onclick="Change(1)">

という感じのフォームで、ボタンを押すとChange関数の方で、

 if(f == 1) {
   document.fm.bt.value="停止";
   document.fm.bt.onclick="Change(0)"; //(A)

として、onclickイベントの内容を変更したいのですが、
実際には上のような(A)の文では、
エラーは出ませんが、イベントの実行はできません。
onclickイベントの変更方法をご教授下さい。

ちなみに、プログラム自体は別の方法で対処しましたので、
「もっといい方法がある」というご回答は結構です。

それと、もう一つ教えていただきたいのですが、上の例で、

 document.writeln(document.fm.bt.onClick);

と実行すると"undefined"と表示されますが、

 document.writeln(document.fm.bt.onclick); //(onClickのCが小文字)

と実行すると"function anonymous() { Change(1) } "と表示されます。

大文字と小文字で、なぜ動作が変わるのでしょうか?
ご教授下さい。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

document.fm.bt.onclick = new Function("Change(0);");


としてみてください。

私もわからなくて色々試してこうなりました。
勉強になりました。

別の方法ってinnerHTMLですかね?

この回答への補足

ご回答ありがとうございます。

見事に解決しました。勉強になりました。
ちなみに別の方法とはinnerHTMLではなく、もっとシンプルで、

 if(document.fm.bt.value == "開始") {
   document.fm.bt.value="停止";
     ・  ・  ・
     ・  ・  ・
 }
 else {
   document.fm.bt.value="開始";
     ・  ・  ・
     ・  ・  ・
 }

として、Change関数の引数をなくしました。
グローバル変数を使っても良かったのですが、
これの方がシンプルかと思いました。

開始と停止の切り替えをするだけでしたので、
無理にonClickイベントの内容を変更する必要はなかったということです。
勉強不足でした。

ちなみに、報告ですが、

 document.fm.bt.onClick=new Function("Change(0);");

と、onClickを小文字にした場合、エラーは出ませんが、
イベントの変更はできませんでした。
やっぱり、小文字の方が正しいようですね。

補足日時:2004/01/22 23:36
    • good
    • 0

大文字小文字の件ですが


JavaScriptとHTMLはべっこと思ってください。
それぞれの仕様通りにしないと動きません。
仕様はリファレンス本等を見て確認することです。
まぁ、動かないということは仕様外だということです。

> リファレンス本などは大文字の方が多用

これは、HTML内に記述するイベント属性のことだと思います。(onClick等)
HTMLの記述については大文字小文字は意識しなくていいです。
ただし、JavaScript内では、オブジェクトのセッターやゲッターを使用する場合は仕様に従わないといけません。もちろん大文字小文字の違いもです。
JavaScriptのリファレンス本では大文字小文字は統一されていると思います。(多分 ^^;)
    • good
    • 0
この回答へのお礼

JavaScriptとHTMLはべっこなんですね。
おっしゃる通り、そういえば、手持ちの
リファレンス本で大文字で記述されているところは、
全て、HTMLタグ内ですね。
ちょっと、混同してました。
とても、参考になりました。

お礼日時:2004/01/23 21:52

onclickとonClickの違いについてですが、動く方が正しい。

つまり、onclickの方が正しいということになると思います。

HTML上に書く場合にはどちらでも良いですが、JavaScriptで操作する場合には他にもこんな場合があります。

document.all.Txt_Test.readonly = false;//間違い
document.all.Txt_Test.readOnly = false;//正しい

readonlyの切り替えですが、HTML上はreadonly,readOnlyと両方指定できますが、JavaScriptではreadOnlyでなければ認識してくれません。

他にもありますが、私の場合、わからなくなったら、googleで検索して、かたっぱしから実行しています。

この回答への補足

※※※※※※ 訂正 ※※※※※※
ANo.#3補足の

> ちなみに、報告ですが、
>
>  document.fm.bt.onClick=new Function("Change(0);");
>
> と、onClickを小文字にした場合、エラーは出ませんが、
>        ~~~~~~
> イベントの変更はできませんでした。

下線部は「大文字」の間違いです。
この場をお借りして、訂正致します。
※※※※※※※※※※※※※※※※

補足日時:2004/01/23 21:50
    • good
    • 0
この回答へのお礼

readOnlyの場合は"O"だけ大文字なんですか。
なにか、命名ルールに一貫性がないような気が。
どちらか分からない場合、かたっぱしからやったほうが早いですね。
とても、参考になりました。

お礼日時:2004/01/23 21:52

JavaScriptの関数内で使用されるオブジェクトがプリコンパイラ内で小文字で定義されているからだと思います。


ちなみに、valueも大文字が混じっていたりしたらだめだったと思います。
また、変数名や関数名など自由に決めれるものも大文字と小文字は別の文字として扱われます。

この回答への補足

ご回答ありがとうございます。

ということは、"onClick"に限っては、"C"が
小文字での使用のほうがトラブルが少ないということでしょうか?
リファレンス本などは大文字の方が多用されているように思うのですが。

補足日時:2004/01/22 22:24
    • good
    • 0

それは大文字と小文字で別々の字として認識してしまうからです。



大文字は大文字で認識し、小文字は小文字で認識します。

htmlとかは全然関係ないんですけどね。

この回答への補足

ご回答ありがとうございます。

onClickもonclickも、通常使用する分には
違いはないと思うのですが、質問に書いた例では
動作に違いが出てしまいます。
なぜなんでしょうか?
しかも、小文字のときの動作の方が正しい動作に見えます。

補足日時:2004/01/21 23:59
    • good
    • 0

このQ&Aに関連する人気のQ&A

違い JavaScript」に関するQ&A: name属性とid属性

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

QgetElementByIdでonClick内を書き換える方法

お尋ねします。
適当なIDを振ったaタグ内の各プロパティを画像の切り替えに応じて
書き換えるスクリプトを試しています。
srcや画像の切り替えなどはうまくいくのですが、
onclick内だけうまく書き換えができません。

onclickはイベントハンドラだから無理という気がするのですが、
なにか方法はないでしょうか。

以下のようなスクリプトを書いています。

myImageName = 0;
myImageLink = 1;
myImageTarget = 2;
myclick = 3;

myImage = new Array();
myImage[0]= new Array("01.jpg","ttp://aa.com/","_top","alert('HELLO')");
myImage[1]= new Array("02.gif","ttp://bb.com/","_blank","alert('HI')");

i = 0;

function aaa(){
document.getElementById("banner").src = myImage[i][myImageName];
document.getElementById("banner").href =myImage[i][myImageLink];
document.getElementById("banner").target =myImage[i][myImageTarget];
document.getElementById("banner").onclick =myImage[i][myclick];
}
※あとはタイマー用のスクリプトが続きます。

記述が間違っている気はするのですが、
解決策がわかりません。
よろしくお願いいたします。

お尋ねします。
適当なIDを振ったaタグ内の各プロパティを画像の切り替えに応じて
書き換えるスクリプトを試しています。
srcや画像の切り替えなどはうまくいくのですが、
onclick内だけうまく書き換えができません。

onclickはイベントハンドラだから無理という気がするのですが、
なにか方法はないでしょうか。

以下のようなスクリプトを書いています。

myImageName = 0;
myImageLink = 1;
myImageTarget = 2;
myclick = 3;

myImage = new Array();
myImage[0]= new Array("01.jpg","ttp:...続きを読む

Aベストアンサー

Function関数で文字列を関数オブジェクトにしてやります。
document.getElementById("banner").onclick
= new Function(myImage[i][myclick]);

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qonclick指定関数の引数へローカル変数をセット

・onclick指定関数の引数として、ローカル変数をするにはどうすれば良いでしょうか?
・下記例だと、kokoをローカル変数で定義したい
<input type="button" onclick="hoge(koko);">

■現状
・変数kokoスコープをグローバルで設定しているので無事渡せて(?)ます

■質問背景
・変数はグローバルにしない方が良いと聞いたことがあるので、何か方法があるのかなと思い質問しました

Aベストアンサー

onclick="(function(){var koko='koko';hoge(koko);})();"
これでkokoをローカル変数にすることが出来るはずです。
当然この関数内でしかアクセス出来ないので、他の場所で設定したい場合はグローバル変数にする必要があります。

Qhiddenのvalueの値を変えたい

おはようございます。
教えていただきたいことがあります。
HTMLのほうに
<input type="hidden" name="btn" value="">
と書きます。
それでJavaSctiptのfunctionの中で
document.forms[0].btn.value=funcitonの引数;
とやっているのですが、hiddenのvalueの中に値が入っていないようです。
どうしてでしょうか?
こういう使い方ってできないものなのでしょうか?

宜しくお願いします。

Aベストアンサー

functionから値を設定できるはずですよ。

「forms[0]」ありますが、複数フォームを定義したりはしていないでしょうか?
直接、フォーム名を記述した方が、安全かもしれません。

下記のように作成すれば、動作しました。


<html>

<head>
<script type="text/javascript">
<!--
function setVal(val) {
document.forms.test_form1.btn.value=val
document.forms.test_form1.txt.value=val
}
// -->
</script>
</head>

<body onload="javascript:setVal('abc')">
<form name="test_form1">
<input type="hidden" name="btn" value="">
<input type="text" name="txt" value="">
</form>
</body>

</html>

functionから値を設定できるはずですよ。

「forms[0]」ありますが、複数フォームを定義したりはしていないでしょうか?
直接、フォーム名を記述した方が、安全かもしれません。

下記のように作成すれば、動作しました。


<html>

<head>
<script type="text/javascript">
<!--
function setVal(val) {
document.forms.test_form1.btn.value=val
document.forms.test_form1.txt.value=val
}
// -->
</script>
</head>

<body onload="javascript:setVal('abc')">
<form name="test_form...続きを読む

QボタンのID名を取得するには?

押されたボタンのid名を取得するにはどのように記述したらよいのでしょうか?

<input type="button" value="ボタン" id="push" onClick="click(this)">

function click(obj)
{
 var getId = obj.elements.id;
}

上記では取得できませんでした。
すみませんがお分かりの方いましたらよろしくお願いします。

Aベストアンサー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Q3381972 TestCase 1</title>
<link href="css/design.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript">
function invoke(obj)
{
var Id = obj.id;/* DOM Level 1 Interface HTMLElement */
var Id2 = obj.getAttribute("Id"); /* DOM Level 1 Core Interface Element 俺は断然こっちが好き */

alert("1" + Id);
alert("2" + Id2);
}
</script>
</head>
<body>
<!-- 何かの予約語なのか,click関数という名前では発動しなかった -->
<p><input type="button" value="ボタン" id="push" onClick="invoke(this)" /></p>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Q3381972 TestCase 1</title>
<link href="css/design.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript">
function invoke(obj)
{
var Id = obj.id;/* DOM Level 1 Interface HTMLElement */
var Id2 = obj.getAttribute("Id"); /* DOM Level 1 C...続きを読む

Q