• ベストアンサー

ソースの初歩的な質問です

スタートを押下したら、alertの"消します""出します"の通りに、 obj.gifが反応するようにするソースを作成したいです。 以下のソースでは対象オブジェクトが見つからないという エラーが返ってきてしまいます。 どの様に修正すればよいのか教えてください。 宜しくお願い致します。 <html> <head> <script type="text/JavaScript"> function Start(lyrball) { alert("消します"); document.getElementById(lyrball).style.visibility = "hidden"; alert("出します"); document.getElementById(lyrball).style.visibility = "visible"; } </script> </head> <body> <a href="JavaScript:Start()">スタート</a> <div id="lyrball"> <img src="obj.gif"> </div> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

引数を渡してないですね。 <a href="JavaScript:Start('lyrball')">スタート</a> とするだけでよさそうですが、どうでしょう? #1さんの書かれたallは避けた方が賢明かと

willbelate
質問者

お礼

おっしゃる通り引き数が抜けていただけでした。 ありがとうございます。

その他の回答 (1)

  • kana_m
  • ベストアンサー率40% (26/65)
回答No.1

なんか色々間違っていますが・・・。 即席ですが、functionを以下のようにしてみて下さい。 function Start() { alert("消します"); document.all["lyrball"].style.visibility = "hidden"; alert("出します"); document.all["lyrball"].style.visibility = "none"; } たぶん勘違いしてる部分が多いと思いますので もう一度勉強し直してみることをお勧め致します。

willbelate
質問者

補足

早速のご回答ありがとうございます。 昨日今日始めたばかりなのでわからないことだらけです;; お陰様で消すことが出来ました。 しかし出すことが出来ません。 エラーは「visibility  プロパティの値が取得できませんでした。 引数が無効です。」 宜しかったらこれも教えてください。

関連するQ&A

  • 初歩的なソースで質問です

    [スタート] をクリックするとアラートの"消します"が出現し、 OKするとAA.gifが消え、 再度[スタート] をクリックするとアラートの"出します"が出現し、 OKするとAA.gifが表示されるという 一連の流れを繰り返すソースを作りたいです。 現状では[スタート] とAA.gifが表示されていて、 "消します"のアラートをOKするとエラーになってAA.gifが消えません。 document.getelementbyid( lyr ).style.visibility = "hidden"; (9行目行)に対して、 「オブジェクトでサポートされていないプロパティまたはメソッドです」とエラー表示されます。 どのように修正したらいいのか教えてください。 ソースを以下に貼っておきます。 <html> <head> <script type="text/javascript"> //visf=表示フラグ(表示ならtrue、非表示ならfalse) function lyrsetvisibility( lyr , visf ) { if ( visf ) { document.getelementbyid( lyr ).style.visibility = "visible"; } else { document.getelementbyid( lyr ).style.visibility = "hidden"; } } //実行 function start() { alert("消します"); lyrsetvisibility( "lyrball" , false ); alert("出します"); lyrsetvisibility( "lyrball" , true ); } </script> </head> <body> <div id="lyrball" style="position:absolute; left:128px; top:128px;"> <img src="AA.gif"> </div> <a href="javascript:start()"> [スタート] </a> </body> </html>

  • phpソースの中のjavascriptを実行する方法

    現在、AJAXの勉強をしているプログラミング初心者です。 環境はapache2,php5です。 phpのソースの中にjavascriptを埋め込んだものを動作させるには どうしたらよいのかが分かりません、 例えば以下の2つのファイルの場合。 abc.php↓ --------------------------------------------------------------- <html> <head></head> <body> <?php echo "こんにちわ"; ?> <script tyep="text/javascript"> alert("hello"); </script> </body> </html> --------------------------------------------------------------- abc.html↓ --------------------------------------------------------------- <html> <head> <script> try{ var obj= new ActiveXObject("Microsoft.XMLHTTP");} catch(e){var obj=new XMLHttpRequest();} function load(point){ obj.open("POST","abc.php",true); obj.send(null) obj.onreadystatechange=change; } function change(){ if(obj.readyState==4){ document.getElementById("target").innerHTML=obj.responseText; } } </script> </head> <body> <div id="target"></div> <a href="#" onclick="load();">click!</a> </body> </html> --------------------------------------------------------------- としたところ、 abc.phpを実行した場合はabc.phpのjavascriptが実行されてアラートがでるのですが、 abc.htmlからabc.phpにリクエストを出して出力された場合には、 javascriptが実行されずにアラートが出ない。 どうしてこのようになるのでしょうか? また解決策があれば教えてください。 よろしくお願いします。

  • opera で戻った時のページの初期化処理について

    こんにちわ。 opera上の「戻る処理」関連で困っています。 デフォルト非表示の<div>領域をjavascriptで 表示するようにしたりしてるのですが、 一度どこかのページに行って「戻るボタン」で 戻ってきたときに、それが表示されたままに なってしまいます。 出来れば戻ってきた場合も非表示にするための 初期化処理をしたいのですが、なにかいい方法を ご存知の方いらっしゃいましたら教えてください。 検証:windows98, opera7.23 分かっていること:戻った場合、body onload も通らない。 --------------- <head> <script> function vis_switch(arg) { obj = document.getElementById("vis"); obj.style.visibility = arg; } </script> </head> <body onload="javascript:vis_switch('hidden')"> <div id="vis" style="visibility:hidden;"> 表示/非表示 </div> <a href="javascript:vis_switch('visible');">表示on</a> <a href="http://goo.ne.jp">どこかのページ</a> </body> -----------------------

  • getElementsByNameで要素が取得できない

    久々にJavaScriptを組みました。 以下のソースコードなんですが、ボタンクリック時にalertで「1」 が表示されるはずだと思っているのですが、「0」が返ってきます。 何かおかしなところはありますでしょうか?宜しくお願いします。 <html> <head> <script language="javascript"> function test(){ var obj = document.getElementsByName("name1"); alert(obj.length); } </script> </head> <body> <div name="name1"></div> <button onclick="test();">TEST</button> </body> </html>

  • プルダウンメニューでページ内の表示を変える の派生質問

    某サイトで紹介いただいているソースの引用で恐縮ですが、 下記のソースで、div1~3のソース部分はうまく切り替わるのですが、ページが開いてすぐの時点では、まったく表示されず、セレクト項目を選んだ後に切り替えが動作します。 ページを開いたら、デフォルトで <div id="item1"> <p> あいうえお </p> </div> が表示されるようにするには、どうすれば宜しいでしょうか? ご教授くださいませ ------------------------ <html> <head> <script type="text/javascript" language="JavaScript"> function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option value="item1">ディブ1</option> <option value="item2">ディブ2</option> <option value="item3">ディブ3</option> </select> </form> <div id="item1"> <p> あいうえお </p> </div> <div id="item2"> <p> かきくけこ </p> </div> <div id="item3"> <p> さしすせそ </p> </div> </body> </html>

  • IEだけで動きません。Javascriptに関する質問です。

    IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう? 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html>   <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script>   </head> <body>   <div id="container">   </div>       <div id="menu">    <ul>    <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li>    <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li>    <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li>    </ul>   </div>     </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html>  <head> <script type="text/javascript" src="bbb.js"></script>  </head>   <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div>   </body> </html>

  • これは何をするスクリプトですか?

    <head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。

  • 同じIDのスタイルをまとめて変更したい

    JavaScriptでスタイルを変更しようと思ったのですが、なかなかうまくいきません。 <html> <head> <script language="JavaScript"> function change(obj) { document.getElementById(obj).style.color="#ff0000"; } </script> </head> <body> <div id="a">要素A</div> <div id="b">要素B</div> <div id="a">要素A</div> <input type="button" value="変更" onClick="change('a')"> </body> </html> 変更ボタンを押すとIDが"a"のフォントカラーが赤色になるはず、と思ったのですが、これだと1段目の「要素A」だけが赤色になり、3段目の「要素A」に変化がありません。getElementById()メソッドは上から1番目のIDしか参照しないのでしょうか。どうすれば1段目と3段目の両方のフォントカラーを変更できるでしょうか。

  • CSSのID名に配列を使えませんか?

    以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1~に該当するID名を、配列として定義することってできませんか? <style type="text/css"><!-- #a1 { display:none; } #a2 { display:none; } #a3 { display:none; } // --></style> <script type="text/javascript"><!-- function disp(aaa) { obj = document.getElementById(aaa); if( obj.style.display =="block" ){ obj.style.display ="none"; }else{ obj.style.display ="block"; } } function create(bbb){ document.write(bbb); } // --></script> <body> ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br> いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br> うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>

  • 表示/非表示の切り替え

    AAA、BBB、CCCの3つが縦に並んでいるとします。 ここで、あるボタンをクリックすると、BBBが消えるようにしたいです。 JavaScriptを使用して、以下のようなものを作ってみましたが、これだと、BBBが消えたスペースが空白として残ってしまいます。 スペースを残さずに、AAAとCCCを詰めて表示させたいのですが、何か方法はありますでしょうか? ====================================================================== <html> <body> <SCRIPT LANGUAGE='JavaScript'> <!-- function showLAYER(idName){ document.getElementById(idName).style.visibility = 'visible' } function hiddenLAYER(idName){ document.getElementById(idName).style.visibility = 'hidden' } //--> </SCRIPT> <A HREF="javascript:showLAYER('layer1')">[表示]</A> <A HREF="javascript:hiddenLAYER('layer1')">[非表示]</A> <br><br> AAA<br> <DIV ID = "layer1" > BBB </DIV> CCC<br> </body> </html> ======================================================================

専門家に質問してみよう