- ベストアンサー
HTMLとJavascriptについて
- HTMLとJavascriptを使ってWEBアプリを作成中です。画像をクリックすると別の要素にidを表示させたいのですが、うまくいきません。
- ページ内にある画像をクリックすると、idを表示するための方法がわかりません。質問です。
- HTMLとJavascriptを使用して、画像をクリックするとidを表示させたいのですが、解決策が分かりません。お知恵を拝借できますか？
- tardyyak
- お礼率44% (12/27)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
id は名称であって、データを入れるとロクなことがありませんよ 独自データ属性を使ってはいかがでしょうか http://www.html5.jp/tag/attributes/data.html == js addEventListener('load', function(){ _ var f = function(v){document.querySelector('div#report').textContent='ここは'+v+'階です'}; _ f('0'); _ document.querySelector('img.hogehoge').parentNode.addEventListener('click', function(ev){ __ f(ev.target.dataset.level); __ ev.preventDefault(); _ }, false); }, false); == html <div> <a href='#'><img class=hogehoge data-level=3></a> </div> <div id=report> </div>
その他の回答 (3)
- DoubtOwl
- ベストアンサー率50% (63/124)
上記の処理では １．jsでhallid = 0が設定される ２．htmlのdocument.writeでhallid = 0が記述される ３．画像のクリックイベントでjsのhallid = 3が設定される で終わっています。 hallidを変更すれば自動で書き換わるのではなく、 HTMLのタグを指定して書き換える必要があります。 <div> __<script type="text/javascript"> ____document.write("ここは"+ hallid + "階です"); __</script> </div> ↓ <div id="msg"> __ここは0階です </div> -------js--------- function test(id){ __var newMsg = "ここは" + id + "階です"; __document.getElementById("msg").textContent = newMsg ; }
お礼
できました。ありがとうございます
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 ページ内リンクとは、ページ内にあるリンクターゲットname="ABC"とかid="ABC"に対して<a href="#ABC">でリンクする方法</a> ＞<a href="#"> ＞__<img src="hoge.png" id="3" class="hogehoge" onclick="test(this.id)" /> ＞</a> とは、まさにページ内リンク ★フェブページを作成されているなら、仕様書を読まれたと思いますが・・ 『IDトークンとNAMEトークンは、アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#h-6.2 )』 これは、SGML由来のマークアップ言語にはすべて共通です。 また、リンク先に移動するのですから、元にidではなく、リンク先に何らかの符号を付けます。 ＞その画像をクリックすると別のdiv要素のところにその画像のidを表示させるようにしたいのですが、 この意味が分かりません。このリンクをクリックすると画像の位置に移動するはずです。 ★また、そもそもDIVの意味を根本から間違えている。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』もので、デザインとは一切無関係です。!! <body> <div class="header"><!-- ここはこの文書のヘッダ --> <h1>タイトル</h1> </div> <div class="section"><!-- ここから本文 --> 本文・・ <div class="nav"><!-- ここはナビゲーション --> </div> </div> <div class="footer"><!-- ここはフッタ --> </div> </body> のように使用するものです!!。 リンクした先に、何らかの符号を表示したい？？？ ⇒フルスクリーンについて・・・ - JavaScript - 教えて！goo( http://okwave.jp/qa/q8137881.html )
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純にページ内リンクじゃまずいの？？
補足
すいません初心者でしてページ内リンクというものがどういうものであるのか教えていただけないでしょうか
お礼
ありがとうございます。