プロが教えるわが家の防犯対策術!

JavaScriptをHTMLファイルに記述した場合、最初にfunctionスコープ内の動作以外は全て行なわれますよね。例えば、

<script type="text/javascript">
<!--
alert("test");
//-->
</script>

と書いた場合、ページの表示と同時にアラートが出ます。しかし上のalertの部分をdocument.getElementById("test").innerHTML = "test";にすると、これが実行されないのです。もちろん<div id="test"></div>タグはちゃんとbodyタグ内に記述してあります。functionを定義してbody onLoadで呼び出す方法もありますが、できればfunctionをむやみに使いたくないので、先のalertの時のように動作させたいのです。

これが動作しない原因は何なのでしょうか?

A 回答 (3件)

>できればfunctionをむやみに使いたくない


ってどんな主張かしりませんが、つまらないポリシーのために
本来やるべきことを避けているのでは本末転倒ですね。
functionをつかわないなら、bodyの一番最後に
scriptをかくことになりますのでひじょーにかっちょわるいです。

前出の回答のほかではよくつかうのはonloadで呼び出す。

<html>
<head>
<script>
window.onload=function(){
document.getElementById("test").innerHTML = "test";
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
    • good
    • 2

No1でも書かれてるけどJavascriptは上から順に読み込まれる


HTMLも上から描画されていく

なので読み込んでいってまだ描画されてない所に実行文が有っても無いと言われる。


・headタグ内でscript実行
・目的のタグがbody内
 →まだbodyは読まれてないので無いと言われる


//----------
TEST();
function TEST(){
 alert("TEST");
}
//----------
TESTの実体が出てきてないのに呼び出してるので実行できない
    • good
    • 2

単純にdocument.getElementById("test")がまだ無いだけだと思います。


例えば
<head>
<script>
document.getElementById("test").innerHTML = "test";
</script>
</head>
ではオブジェクトがありませんとなりますが、
<div id="test"></div>
<script>
document.getElementById("test").innerHTML = "test";
</script>
とすると動くと思います。
    • good
    • 2

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

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

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

QinnerHTMLなどの反映タイミング

innerHTMLやinnerTextでの反映タイミングについて教えてください。

JavaScriptでsleep関数の自作テストを行なっている過程で
innerHTMLやinnerTextが即時には反映されない現象に直面しました。
コードを貼り付けておきます。
※htmlとしてIE等のブラウザで動かしてもいいですが、
htaとして実行したほうが簡易で軽くていいと思います。

このコードでは
(1)innerHTML(かinnerText)で「実行中…」を表示
(2)sleep関数を呼ぶ
(3)innerHTML(かinnerText)で「終了」を表示
という、(少なくとも表示部分に関しては)
極めて単純な処理をしています。しかし(1)が反映されません…。

(1)と(2)の間にalertを書いたりするときちんと(1)が表示されます。

よく他言語・フレームワークではflushとかリアルタイム描画等の
コマンドやオプションで対処できるので、JavaScript(JScript)でも
ないものかなぁと思い質問してみることにしました。


質問は以下です
・この現象はなぜ起こるのか。原因説明
・これを回避する方法はあるかないか
・あるのならその方法

明示的なコマンド・オプションでも対症療法でもかまいません。
環境はとりあえずはWinXP・hta(レンダリングエンジン:IE8)で動けばOKです。
よろしくお願いします。


<html>
<body>

<div id="status">sleepテスト</div>

<input type="button" onclick="testAjaxSleep()" value="testAjaxSleep"><br>
<input type="button" onclick="testBusySleep()" value="testBusySleep"><br>
<br>

<script>
var waittime = 3;

function testAjaxSleep() {
document.getElementById("status").innerHTML = "「AjaxSleep」実行中…";
ajaxSleep(waittime);
document.getElementById("status").innerHTML = "AjaxSleep終了";
}
function testBusySleep() {
document.getElementById("status").innerText = "「BusySleep」実行中…";
document.close();
busySleep(waittime);
document.getElementById("status").innerText = "BusySleep終了";
}


function ajaxSleep(sec) {
var stopTime = (new Date()).getTime() + Math.floor(1000 * sec);
var url = "http://www.google.com/?dummy";
var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
while (stopTime > (new Date()).getTime()) {
xmlHttp.open('GET', url, false);
xmlHttp.send(null);
}
}
function busySleep(sec) {
var stopTime = (new Date()).getTime() + Math.floor(1000 * sec);
while (stopTime > (new Date()).getTime()) {}
}
</script>

</body>
</html>

innerHTMLやinnerTextでの反映タイミングについて教えてください。

JavaScriptでsleep関数の自作テストを行なっている過程で
innerHTMLやinnerTextが即時には反映されない現象に直面しました。
コードを貼り付けておきます。
※htmlとしてIE等のブラウザで動かしてもいいですが、
htaとして実行したほうが簡易で軽くていいと思います。

このコードでは
(1)innerHTML(かinnerText)で「実行中…」を表示
(2)sleep関数を呼ぶ
(3)innerHTML(かinnerText)で「終了」を表示
という、(少なくとも表示部分に関しては)
極め...続きを読む

Aベストアンサー

 お礼書いてくれたので、蛇足となりつつも

AJAXでサーバーの応答待つのは、あまりにも不正確になりがちで、
処理待ちの間ブラウザごとロックするブラウザーもあるそうです。

そこで、HTAでやってるって事なんで、wscriptshellのsleepを使って
もう一つ似たようなやつを↓

(sleep.js)
var parm = WScript.arguments;
if (parm.length > 0) {
WScript.Sleep(parm(0)*1000);
}
を準備して

HTA内からajaxSleep()で呼び出す、

function ajaxSleep(sec){
var WshShell = new ActiveXObject("WScript.Shell");
WshShell.run("wscript sleep.js " + sec , 0 ,true); //同期
WshShell = null;
}

※実際は固定のパス名(sleep.jsの保存場所)も指定しときゃなきゃいけないけど。

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

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

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

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

Aベストアンサー

<select style="width: 200px">

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の戻り値が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]が返りました。

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

Q