グッドデザイン賞を受賞したウォーターサーバー >>

htmlであるボタンを押すと、そこで実行するはずの関数が未定義になる、
という不具合が出ていたのですが、
JavaScript(<script>)の記述場所を変更する事により、対処することができました。

でもまだ、理解ができずにいます。

たとえば

<head>
<script ・・・・外部jsファイル>
</head>
<body>
<input type="text" name="hizuke" ・・・>
<input type="button" name="newdisp" value="表示" onclick="hyouji();">
 ・
 ・
<input type="hidden" name="syori" value="">
 ・
 ・
 ・
</body>
 ・
 ・
※外部jsファイルでhyouji()関数記述


のようなhtmlで、今回「表示」ボタンをクリックするとエラーになり、
エラーの詳細を見ると 
  hyouji()が未定義です
となり、
JavaScriptの関数がまだ読み込まれていないから
記述を後に移動したほうがいいというアドバイスを受け、
このhtmlを

<head>
</head>
<body>
<input type="text" name="HIZUKE" ・・・>
<input type="button" name="newdisp" value="表示" onclick="hyouji();">
 ・
 ・
 ・
<input type="hidden" name="syori" value="">
 ・
<script ・・・・外部jsファイル>
</body>
 ・
 ・

のように変更して、エラーをなくすことができました。

外部jsファイルのhyouji()関数の処理は
「syori」のhiddenに「hyouji」というような処理識別をセットし、
submitしています。

hyouji()関数の前にもたくさんの関数が定義されていて
その中には
   var aaa = document.form1.xxxx.value;
などの記述もたくさんあります。

<script>の記述場所を移動したことで
   htmlを読み込んで、
   「表示」ボタンを表示し、
   jsファイルを読み込む・・・
という処理順序になると思うのですが
表示ボタンをクリックしたときには、
jsファイルの読込みは終了しているのでしょうか???

ボタンをクリックした時にはjsの読込みを終了していないといけないと
思うのですが、なぜjsの記述を<inputボタン>の記述より後のほうに移動させて、
未定義関数が解決されるのかがわかりません。


エラーの内容が
  オブジェクトが見つかりません
などだと、hidden項目が後に記述されているからか・・・と理解できるのですが。



うまく伝わるか不安ですが、
ボタンクリックの前にはJavaScriptの関数が読込みが
終了していなければならないのはわかるのですが、
なぜ、ボタンの表示より、後に記述することで解決できるのか
解説していただけると助かります。

よろしくお願いします。

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

A 回答 (4件)

原始的なプリントデバッグになりますが、外部スクリプトの位置を最初に戻し、スクリプト末尾に



alert(typeof 関数名);

を追加して下さい。関数が定義されていれば中身が表示されますし、未定義なら undeinfed が表示されます。また、アラートが出ない場合はスクリプトが読み込まれていないか、途中でエラーを出しています(IE は静かに死ぬことがあります)。スクリプトが読み込まれているかを確認するには、alert() をスクリプト冒頭に移動してアラートが出れば良い。

IE が静かに死ぬケースにはいくつかパターンがあったはずですが、今思い出せません(すみません)。可能性のひとつはスクリプトファイルの文字化けです。

また、キャッシュが悪さをすることもあります。不可解なバグに悩まされたときは、ブラウザを再起動すると何事もなく動くことがあります。

ただまあ、Firefox で未定義であったということは、読み込まれていなかった可能性が高いと思うのです。

この回答への補足

お礼の補足になりますが。。。


IEは静かに死んでしまった感じでしょうか。
スクリプトフアイルの文字化け・・・もあるんですね。。。
ブラウザを再起動させてもしばらくはダメのようでした。
時間を置けばまだしばらくちゃんと動いてくれ、しばらくするとまたダメ・・・になる。

この原因を調べろ って言われてますが
どんな原因でこうなるのか、 未だわかりませんし、
解決方法も正しいのか判断できません。

そういえば、前にもキャッシュの問題で苦労しました。
消したはずの外部jsファイルなのに、その中の関数がいつまで経っても動いてしまうんです。
キャッシュを何回もクリアしても、その関数は生きてました。

そのとき、IEをアンインストール、インストールしてもらってもダメだったので
確かIEのバージョンを変えてもらって対処できたような記憶があります。

ちょっと話がそれてしまいましたが、
スクリプトファイルの文字ばけのあたりについても調べてみたいと思います。
文字化けしない方法って<META・・>以外に特別に何かあるでしょうか?

補足日時:2012/04/09 11:19
    • good
    • 2
この回答へのお礼

ありがとうございます。

現象が出ているときに、alert・・・は入れて確認しました。
結果は、
alertが出るときは、当たり前に情報の表示がされます。
同じマシン、同じ環境で何度か「表示」ボタンを押すと、
そのうち(15分くらい経過後)、alertが出なくなり、
iframe内は空白のままで、ステータスにエラーがでます。

不可思議な動きでした。。。
今は<script>を下部に移動して、なぜか?!うまく動いています。

この方法を次の案件にも対応させるかどうか、決めなければならないときになりそうです。
どうしたらいいでしょう!!!

お礼日時:2012/04/09 11:08

No.2 補足より:



> 特に今回の事象の解決策はこれでした。
> ・onMousemove、onClickで指定された関数は、HTMLのロードが完了した後に定義しなければならない。

いいえ、そんなことはありません。

> <HEAD>内記述の外部Scriptファイルが読み込みが終わっていないのに、<BODY>の表示が開始され

であれば、HTML 4.0(1) および HTML(5) の規定に違反しています。現状、私はそのようなブラウザの存在を聞いたことがありません。

---
今のところ、ふたつの可能性があります。

・単純に、外部スクリプトの URI ミスであった。script を移動したときに @src を書き直し、たまたま直った。

・『HTMLのロードが完全に終わっていない状態でgetElementByIdなどを呼び出す』箇所があり、そこでエラーを出して止まっていた。そのため、それより後ろで定義されている関数(この場合は関数式)が未定義のままになった。

とにかく、仰る現象と解決方法は、理屈にも(拙いながら)私の経験にも合いません。と言うより、もし仰ることが本当なら、繰り返しますが HTML(5) の規定に適合しませんので、ちょっと大きな問題になります。

script には @defer がなかったんですよね?

この回答への補足

> 単純に、外部スクリプトの URI ミスであった。
> script を移動したときに @src を書き直し、たまたま直った。

これはないです。

> 『HTMLのロードが完全に終わっていない状態で
> getElementByIdなどを呼び出す』箇所があり、
> そこでエラーを出して止まっていた。
> そのため、それより後ろで定義されている関数(この場合は関数式)が
> 未定義のままになった。

getElementByIdはたくさん使っていますが、全てjs外部ファイルの関数内の処理になっています。
CGIアプリで吐き出すhtmlの<SCRIPT>内に直接記述はありません。


> script には @defer がなかったんですよね?

バージョンはHTML 4.01 になります。


cgiアプリの処理の流れは、
 js外部ファイル読込み→上部から画面表示→「表示」ボタン表示→
 「iframe」(枠だけ)表示→onLoad処理でiframe内に最新情報表示
です。
(iframe・・・、何か影響ありますか?)


現象としましては
いつまで経ってもiframe内に情報が表示されないので、
「表示」ボタンを押したらエラーになった。
IEでは
  オブジェクトを指定してください ライン1 文字1
のエラーになったと申告がありました。
IEの問題なのかと、別の方がfirefoxで確認したところ、
エラーコンソールに「(ボタンクリック時のjs関数) is not defined」
と表示された
と申告がありました。

キャッシュのクリアやIEの設定のリセットなど、
いろいろやってもらったのですが
現象は発生しました。
   ↓
(※実際、<SCRIPT>外部ファイルの記述を下部に移動したら解決しました!)


今まで(過去5年間)で私はこの現象はおきたことはありません。
開発部隊からの申告も今までは何もありませんでした。
(5年前から変更のない処理になります)
今でも開発環境では発生しません。


何箇所かで動いているシステムなので
今後、IEのバージョンアップや社内LAN環境が変わったりして
同じような現象が発生すると困るので状況の把握をしておくことと
対処を調べておくよう言われています。


js関数は同じ関数名だと後から読み込まれたほうが動くと言うことですが、
例えば、今回下部に移動したjs外部ファイルの読込みSCRIPTを
上部にも、ファイル名を変えて同じ内容のjs外部ファイルの読込みSCRIPTを
記述したらどうなるのでしょう?
エラーにならなければ・・・なんて思うのですが
安易ですよね。。。


ボタンクリックのイベント処理で、js外部ファイルを読み込みますが、
(そのようにhtmlとして吐き出していますが)
その際に、読み込まれてたjs関数が一旦、
クリアされるなんてないですよね?

補足日時:2012/04/06 11:24
    • good
    • 0
この回答へのお礼

ありがとうございます。

補足に追記します。
(補足に書いていいのかわからないのですが)

お礼日時:2012/04/06 10:25

何かの勘違いの可能性が高いように思われます。



@defer や @async がない限り、外部スクリプトの読み込みはページ描画をブロックします。head 内に 6 個も 7 個も外部スクリプトを並べれば、それらが全部読み込まれるまで、閲覧者は白紙のまま待たされることになります。そうならないよう、外部スクリプトの読み込みを body の末尾に移動させるのです。

ですが、ボタンの場合は別です。ボタンが表示された時点で、ボタンが機能しなければなりません。つまり、ボタンに関する外部スクリプトはボタンの前に読み込んでおかねばならないのです(ここで「え、ボタンがまだ読み込まれていないのに?」と思った方は、バブリングを調べて下さい。まあ、準備が整うまで disabled にしておく手もありますが)。

それを踏まえれば、ボタン制御のスクリプトを事前に読み込んでおくのは真っ当な方法です。それで関数の未定義エラーが出るのなら、単純に、外部スクリプトが読み込まれていなかった可能性が高いと思われます。あるいは、他に原因があります。

この回答への補足

下記のサイトを見つけました。

http://blog.ohanasiya.net/?m=blog&eid=e6f9208db4 …

中ごろのコメントに
#また、関数を定義する順番としては
#以下のような注意点があります。

# ・HTMLのロードが完全に終わっていない状態で
#  getElementByIdなどを呼び出すと、
#  失敗してスクリプトの実行がそれ以上進まなくなる場合がある。

# ・onMousemove、onClickで指定された関数は、
#  HTMLのロードが完了した後に定義しなければならない。

とあります。
特に今回の事象の解決策はこれでした。
# ・onMousemove、onClickで指定された関数は、
#  HTMLのロードが完了した後に定義しなければならない。

これは決まりごとなのでしょうか?
W3Cの?

決まりごとであれば、無条件に従い、
次のシステムにも反映したいと思いますが。

補足日時:2012/04/04 16:47
    • good
    • 0
この回答へのお礼

ありがとうございます。

#ボタンの場合は別です。ボタンが表示された時点で、
#ボタンが機能しなければなりません。
#つまり、ボタンに関する外部スクリプトはボタンの前に
#読み込んでおかねばならないのです

これだと理解できます。
が、未定義エラー・・・になってしまったのです。

なぜか今回、下のほうに移動してしまってエラーを回避できましたが
それこそ変ですよね。
逆に・・・未定義になる可能性大???


修正前の現象では、
<HEAD>内記述の外部Scriptファイルが読み込みが終わっていないのに、<BODY>の表示が開始され、ボタンも表示されたので
ボタンをクリックした結果、未定義エラーになってしまった...
という感じになります。


#それで関数の未定義エラーが出るのなら、
#単純に、外部スクリプトが読み込まれていなかった可能性が
#高いと思われます。
#あるいは、他に原因があります

単純に外部スクリプトが読み込まれていなかった可能性って、
どういう事態でしょうか?

他の原因って 何かありますでしょうか。

5年前に開発したWEBシステムで、IE6で確認を行い、localでも、
社内イントラでもこのような事象はおきませんでした。

2年前にも同じシステムを導入し、IE8でも確認しましたが、localでも、
イントラでも事象はおきませんでした。

変わったことといえば、社内イントラ環境がバージョンアップされたのかも???くらいです。

IE6は構文エラーなどの不具合をカバーしてくれてしまうようですが、
IE8では厳しくなってそこでエラーになりますよね。
2年前のIE8ではエラーは出なかったんですが、今調べてみると、
チョロチョロと構文エラーがあります。
それでもまだ互換性モードにしているので、フォローされてるのだと思いますが。

外部ファイルには全てのJavaScript処理を記述していて、200kbくらいあります。
画面によっては関係ない処理も入っています。

これを整理して関係のある関数だけのjsファイルの記述だけにするよう、
分割したほうがいいのでしょうか?
(かなりの手直しになりそうですが)

お礼日時:2012/04/04 14:17

「外部jsファイル」の中身が問題になります。


javascriptをheadに直接書く場合、そのまま実行してしまうとHTMLの内容がロードされる前に実行されてしまう場合があります。
この時、javascript内でHTML内の要素を扱うような処理を行っていると、その部分がエラーになってしまいます。
この為、下に記述することで解決したのでしょう。

ちなみに、この順序問題は色んな解決方法が用意されています。
特にDOM要素を弄る処理が多いのであれば、jQueryを使われる事をお勧めします。
ちなみにjQueryを使用すると、「$(document).ready(function(){処理});」の書き方で、HTMLが全て読み込まれた状態から処理を開始してくれるようになる為、headに記述しても問題無くなりますよ。
    • good
    • 0
この回答へのお礼

ありがとうございます。

やはり他の要素でエラーになり、
該当関数の読込みまで処理が進まない状況だったのかもしれませんね。

その場合、その要素を扱う部分でのエラーだと理解できたのですが、
イベントを挙げた関数ではあったのですが、
なぜ、その先(!)の関数の未定義のエラーだったのでしょうか。

そこが理解できずにいます。
それともJavaScriptのエラーはそんなものなのでしょうか?
何台かのパソコンで、同じ「未定義のエラー」でした。
対応はしていないのですが、firefoxで調べてくれたときも「未定義エラー」でした。

せめて、要素を扱う処理あたりでエラーになっていてくれればわかりやすいのに。。。

すみません、もう少し
他の方のアドバイスも待ちたいと思います。

お礼日時:2012/04/02 12:02

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

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

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

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

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

QNull またはオブジェクトではありませんのエラー

HTML部で
<FORM NAME="frm1" METHOD="post" ACTION="xxx.html">
 <INPUT TYPE="hidden" NAME="txt1">
</FORM>

javascriptで
document.frm1.txt1.value = "hoge";
document.frm1.submit();

のように記述しています。
FireFoxブラウザでは期待通りの動きをするのですが、
IE6では「document.frm1.txt1はNullまたはオブジェクトではありません」
とエラーが出てしまい、画面遷移しません。

因みにページはフレームを利用しており、
フォームや画面遷移はメインフレームでしか使っていないので、
フレーム名も特につけておりませんし、
targetの記述も使用しておりません。
そこらへんに原因があるのでしょうか。
それにしてもFireFoxでは可、IEではエラー
というのも解せないです。

どなたか分かる方いらっしゃいましたら
ご教示願います。

HTML部で
<FORM NAME="frm1" METHOD="post" ACTION="xxx.html">
 <INPUT TYPE="hidden" NAME="txt1">
</FORM>

javascriptで
document.frm1.txt1.value = "hoge";
document.frm1.submit();

のように記述しています。
FireFoxブラウザでは期待通りの動きをするのですが、
IE6では「document.frm1.txt1はNullまたはオブジェクトではありません」
とエラーが出てしまい、画面遷移しません。

因みにページはフレームを利用しており、
フォームや画面遷移はメインフレームでしか使っていないので、
...続きを読む

Aベストアンサー

>document.frm1
alert(document.frm1);
これが何と出るか。
場合によってはこれも「document.forms[x];」系にしてみる

あと一応確認しておくけど
function(){}
じゃない限りはHTML上に書かれた順に実装される事になってる。
まさかformが現れる前に実行させてないよね?

Q「関数が定義されていない」とのエラーが出る

こんにちは,よろしくお願いします。
何が何だか分からなくて困っています。
IEでは問題なく動くのに,Firefoxだと関数が定義されていないとのエラーが出ます。「<関数名> is not defined 」

スクリプトは,外部ファイル化してあります。キータイプの間違いもありません。何度も確認しました。

function aaa(){
 (スクリプト)
}

<body onload="aaa()">
のようにして呼び出しています。
いったい,何が悪いのでしょうか?

また,Operaだと,「リンク先のスクリプトを読み込むことができません」とのエラーが出ます。
元になるPHPファイルでは,
<script type="text/javascript" language="javascript" src="../javascript/AAAAA.js"></script>
のようにして呼び出しています。
もちろん,ファイルネームのタイプミスはありません。

ちなみに,スクリプトの内容は,日付関連のコードを記述しています。
試行錯誤している時に,他の日付関連のコードを実行したときに,
dayoption is not defined
というエラーが出たことがあります。
関数が存在しているのに,定義されていないと出るのは,もしかすると,日付関連の関数等の使い間違いではないかとも考えています。
使っているものは,Date()とgetYear()です。これらのうちのどちらかがFirefoxやOperaだとサポートされていないのでしょうか?

どうか御指導ください。よろしくお願いします。

こんにちは,よろしくお願いします。
何が何だか分からなくて困っています。
IEでは問題なく動くのに,Firefoxだと関数が定義されていないとのエラーが出ます。「<関数名> is not defined 」

スクリプトは,外部ファイル化してあります。キータイプの間違いもありません。何度も確認しました。

function aaa(){
 (スクリプト)
}

<body onload="aaa()">
のようにして呼び出しています。
いったい,何が悪いのでしょうか?

また,Operaだと,「リンク先のスクリプトを読み込むことが...続きを読む

Aベストアンサー

たぶんなんらかの凡ミスでしょうけど・・・・
firefoxでだめなら、firefoxのアドオンのfirebugで検証するのが一番です

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化したほうが、可読性が高くなると
思います。

Q「nullまたはオブジェクトではありません」というエラーが出ます。

こんにちは、IE7、VISTAで試しています。
エラーもなく動いたのですが、
sClientXとsClientYの値をフォームメールでデータ送信したくて
clientX=<input type="text" id=sClientX><br>
clientY=<input type="text" id=sClientY><br>
という部分を<form>内に入れると

「sClientXはnullまたはオブジェクトではありません」
というエラーが出ます。
エラーの原因はなんでしょうか?

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--

var sample;
var sClientX;
var sClientY;
var target;
var isDrag=0;
function document_onmousedown(){
isDrag=1;
target=event.srcElement;}
function document_onmousemove(){
if( isDrag ){
target.style.top=event.clientY-8;
target.style.left=event.clientX-8;}
}
function document_onmouseup(){
isDrag=0;
sClientX.value = document.getElementById('sample').style.left;
sClientY.value = document.getElementById('sample').style.top;
}
document.onmouseup = fOnmousemove;
function fOnmousemove()
{
}
//-->
</SCRIPT>
</HEAD>
<BODY onmousemove="document_onmousemove()" onmousedown=
"document_onmousedown()" onmouseup="document_onmouseup()">

<DIV style="position:absolute" id=sample>
このオブジェクトが移動します
</DIV>

<DIV id=text1 style="position:absolute;font-size:24px; cursor:hand">
</DIV>

<form>
clientX=<input type="text" id=sClientX><br>
clientY=<input type="text" id=sClientY><br>
</form>

</BODY>
</HTML>

こんにちは、IE7、VISTAで試しています。
エラーもなく動いたのですが、
sClientXとsClientYの値をフォームメールでデータ送信したくて
clientX=<input type="text" id=sClientX><br>
clientY=<input type="text" id=sClientY><br>
という部分を<form>内に入れると

「sClientXはnullまたはオブジェクトではありません」
というエラーが出ます。
エラーの原因はなんでしょうか?

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--

var sample;
var sClientX;
var sClientY;
var target;
v...続きを読む

Aベストアンサー

紛らわしい命名や参照が原因です。

"sClientX" ってのが、
最初の方の var での定義と、
結果埋め込み用の<input>のidと被っています。

どちらかの名前を変えるか
オブジェクトの参照を省略せずに
document.getElementById('sClientX').value = ~
と、する等の対処で解決すると思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QgetElementByIdの戻り値がnullになります。

getElementByIdでdivタグのオブジェクトを取得したいのですが、nullとなってしまいます。
以下のコードのどこがいけないのでしょうか。
---
<div id='a'></div>

<script language="javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>
---

Aベストアンサー

さらに実験

<div id='a'></div>
<div></div>
<script type"text/javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>

これはnullですが

<div id='a'></div>
<div>あ</div>
<script type"text/javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>

これは[object]や[HTMLdivElement]が返りました。

QIE11 javascriptについて

すみません、IE11なってから、以下のjavascriptが動かなくなりました。
画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。

全部のロジックを書いてしまいましたが、
何処がIE11から変更されたかが解らなくて、困っている所です。
何処を直すのか、全部聞くのもあつかましいと思いました、
どのあたりを見直しすれば宜しいですか。
教えて頂ければ幸いです。



<SCRIPT language="JavaScript">
<!--
var img = new Array();
img[0] = new Image(); img[0].src = "img/4031.jpg";
img[1] = new Image(); img[1].src = "img/4032.jpg";
img[2] = new Image(); img[2].src = "img/4031.jpg";
img[3] = new Image(); img[3].src = "img/4032.jpg";
img[4] = new Image(); img[4].src = "img/4031.jpg";

imgMaxSizeW = 171;
imgMaxSizeH = 141;
alphaTimer = 10;
stopTimer = 2000;
nextImgTimer = 1000;

_dom=(document.all?3:(document.getElementById?1:(document.layers?2:0)));

function getWindowSize() {
if(_dom == 1 || _dom == 2) {
win_width = self.innerWidth;
win_height = self.innerHeight;
}
if (_dom == 3) {
win_width = document.body.clientWidth;
win_height = document.body.clientHeight;
}
}

function showLayer(layerName){
if (_dom == 1) document.getElementById(layerName).style.visibility = "visible";
if (_dom == 2) document.layers[layerName].visibility = "show";
if (_dom == 3) document.all(layerName).style.visibility = "visible";
}

function hideLayer(layerName){
if (_dom == 1) document.getElementById(layerName).style.visibility = "hidden";
if (_dom == 2) document.layers[layerName].visibility = "hide";
if (_dom == 3) document.all(layerName).style.visibility = "hidden";
}

function writeHTML(layerName,html) {
if (_dom == 1) {
var div = document.getElementById(layerName);
while(div.hasChildNodes()) div.removeChild(div.lastChild);
var range=document.createRange();
range.selectNodeContents(div);
range.collapse(true);
var cf=range.createContextualFragment(html);
div.appendChild(cf);
}
if (_dom == 2) {
var div = document.layers[layerName];
div.document.open();
div.document.write(html);
div.document.close();
}
if (_dom == 3) document.all(layerName).innerHTML = html;
}

function moveLayerTo(layerName, x, y){
if (_dom == 1) {
document.getElementById(layerName).style.left = x + scrollX;
document.getElementById(layerName).style.top = y + scrollY;
}
if (_dom == 2) {
document.layers[layerName].left = x + pageXOffset;
document.layers[layerName].top = y + pageYOffset;
}
if (_dom == 3) {
document.all(layerName).style.pixelLeft = x + document.body.scrollLeft
document.all(layerName).style.pixelTop = y + document.body.scrollTop;
}
}

function changeAlpha(layerName) {
if (_dom == 3) {
if (alphaCount < 200) {
alphaCount += 2; op = alphaCount > 100 ? 100 - (alphaCount-100) : alphaCount;
document.all(layerName).filters["alpha"].opacity = op;
if (op == 100) {
tim = setTimeout("changeAlpha('"+layerName+"')", stopTimer);
} else {
tim = setTimeout("changeAlpha('"+layerName+"')", alphaTimer);
}
} else {
hideLayer(layerName);
clearTimeout(tim);
tim = setTimeout("setAlphaImgPos()",nextImgTimer);
}
} else {
setTimeout("setAlphaImgPos()",nextImgTimer*2);
}
}

var imgCount = 0;
function setAlphaImgPos() {
writeHTML("imgLay",'<IMG src="' + img[imgCount].src + '" border="0">');
imgCount++; if (imgCount >= img.length) imgCount = 0;
getWindowSize();
sX = Math.floor(Math.random()*(win_width-imgMaxSizeW-10));
sY = Math.floor(Math.random()*(win_height-imgMaxSizeH-10));
moveLayerTo("imgLay",sX,sY);
showLayer("imgLay");
alphaCount = 0;
changeAlpha("imgLay");
}

window.onload = setAlphaImgPos;

// -->
</SCRIPT>

すみません、IE11なってから、以下のjavascriptが動かなくなりました。
画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。

全部のロジックを書いてしまいましたが、
何処がIE11から変更されたかが解らなくて、困っている所です。
何処を直すのか、全部聞くのもあつかましいと思いました、
どのあたりを見直しすれば宜しいですか。
教えて頂ければ幸いです。



<SCRIPT language="JavaScript">
<!--
var img = new Array();
img[0] = new Image(); img[0].src = "img/4031.jpg";
im...続きを読む

Aベストアンサー

他の HTML がわからないので適当に付け加えて開発者ツールで確認してみたのですが、moveLayerTo() の
if (_dom == 1) {
 document.getElementById(layerName).style.left = x + scrollX;
 document.getElementById(layerName).style.top = y + scrollY;
}
で scrollX は定義されていません と表示されます。というか、F12 を押すと開発者ツールが使えるので何らかの問題が起きたならこれで確認しましょう。

あと、透過度の設定を DX フィルターを使って行っているようですが、それも IE10 から使えなくなっています。
https://msdn.microsoft.com/ja-jp/library/ie/hh801215(v=vs.85).aspx
IE10 以降ではかわりに CSS の opacity を使ってください。
https://developer.mozilla.org/ja/docs/Web/CSS/opacity

他の HTML がわからないので適当に付け加えて開発者ツールで確認してみたのですが、moveLayerTo() の
if (_dom == 1) {
 document.getElementById(layerName).style.left = x + scrollX;
 document.getElementById(layerName).style.top = y + scrollY;
}
で scrollX は定義されていません と表示されます。というか、F12 を押すと開発者ツールが使えるので何らかの問題が起きたならこれで確認しましょう。

あと、透過度の設定を DX フィルターを使って行っているようですが、それも IE10 から使えなくなってい...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

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...続きを読む

QJSPの処理の途中で、JavaScriptの処理をしたい

プログラムをJSPで記述している(<% %>タグ)のですが、
JavaScriptのalertやconfirmなどのポップアップするダイアログを
表示したいのです。それは可能なのでしょうか?

Aベストアンサー

No.2の回答に対する回答(変な日本語ですが)です。

JSPとJavaScriptの処理の行われる順番について考えていないと
エラーになることがありますよ。
大まかな流れは、
 JSPのソースをサーバ側で解釈、実行する(HTMLのソースを吐き出す)
  ↓
 クライアントに生成したソースを送信する
  ↓
 クライアント側のブラウザがソースを解釈する
  ↓
 ソースの中のJavaScriptを、ソースの上のほうから順次実行する
  ↓
 同時に、通常の表示(HTMLの解釈)も実行される

 と、こういう流れですので、例えば、JavaScriptで値を入力し、
JSPでその値を使おうとすると、エラーとなります。

 具体的にやりたいこと(やろうとしていること)を書いていただいたほうが
適切に回答できますが、上記が今考えられるエラーの原因です。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング