• ベストアンサー

dblclickでdiv要素を一回だけ作成したい。

javascriptで、dblclickでcreateElementを使いdiv要素を作成してappendChildでbodyの部分にdiv要素を挿入することを考えています。 （この部分は自分で解決できました。） この際、dblclickのたびにdiv要素を挿入するのではなく、すでにdblclickでdiv要素が挿入されている場合にはdiv要素を改めて挿入しないようにしたいのですが、どのようにすれば改めてdiv要素を挿入しないようにできるのでしょうか。 javascript初心者です。宜しくお願い致します。

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

現状のソースの全貌が見えないのでなんともいえませんが、次のサンプルのような感じで。 <html> <head> <title></title> <script type="text/javascript"> function sample(){ if(document.getElementById('XYZ')) return;//id='XYZ'のエレメントは既に在る var Div = document.createElement('div'); Div.setAttribute('id','XYZ'); Div.innerHTML='追加しました'; document.body.appendChild(Div); } </script> </head> <body> <p><input type="button" value="DIV生成" onclick="sample()"></p> </body> </html>

spring_man
質問者

お礼

度々ありがとうございます。 参考にさせて頂いて、if文を追加する位置を変更したら、うまくいくようになりました。 どうもありがとうございました。

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

作成するdivにはidを付ける。 作成するときにdocument.getElementByIdで、既に存在していないか確認する。 （既に存在していれば作成しない）

spring_man
質問者

お礼

早速の回答ありがとうございます。 参考にさせていただいて、if文を使ってdiv要素にsetAttributeでidを付与して試してみたのですが、はじめてdblclickした時点ではまだidをつけたdiv要素が作成されていないためか（？）、「document.getElementById("id名") has no properties」とのエラーがでてしまいます。なにか失念していることがあるのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 要素を指定の場所に追加

    お世話になります。 createElementした要素を指定の場所に追加したいのですが どのようにすればよろしいでしょうか？ <HTML> <HEAD> <script type="text/javascript"> function add(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); document.getElementById(id).appendChild ( dummy ); } </script> </HEAD> <BODY> <div id="top"> <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> </div> <br><br> <input type="button" value=copy onClick="add('id_1')"> </BODY> </HTML> ・appendChild前 <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> ・実現したい形 appendChild後(id_1の後に追加する。) <div id="id_1">ほげ１</div> <span>ダミー</span> <div id="id_2">ほげ２</div> ・現状(id_1のdivの中に追加される。) <div id="id_1">ほげ１ <span>ダミー</span></div> <div id="id_2">ほげ２</div> もしかしたらすごく簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。

  • 新しく開いたウィンドウへの要素の挿入方法

    javaScriptのwindow.openを使ってウィンドウを開き そのウィンドウにhtmlタグを挿入するプログラムを作りたいのですが うまくいきません。 例えば以下のような場合だと id="parent"を持つ親タグの子要素として、appendChildメソッドを使用しimgタグを挿入出来ます 　　　var img = document.createElement("img"); 　　　var parent = document.getElementById("parent"); 　　　parent.appendChild(img); しかしwindow.openで開いたウィンドウは親となるタグがありません。 まっさらなウィンドウに要素を挿入するにはどうすればいいんでしょうか？ なかなかうまくいかず困っております。ぜひお詳しい方ご回答お願いします。

  • div要素の入れ替え。半透明イメージ作成

    javascriptでdiv要素の入れ替えを行いたいのですが、ドラッグした際にドラッグしたdiv要素を半透明にし、かつ元のdiv要素は入れ替えが行われるタイミング移動させないようにしたいです。 イメージとしては、ブラウザに表示されている画像をドラッグした時に出てくる半透明のイメージが出てくるのと同じ感じです。 どのような形で作れるのでしょうか？JQueryかライブラリなしで作りたいのですが、アドバイスよろしくお願いします。

  • 要素を追加する関数の作成

    <div id="here"></div> 上の様な要素内に要素と内容を追加する関数を作りたいのですが、思った結果が得られずに悩んでいます。 function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = <p>content</p>; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); この様な場合にはどうしたら良いのか、何かアドバイスを頂けると嬉しいです。

  • remove();で削除要素の再作成ができない

    ボタンを押したときに、.createElement()で作った要素を.remove();で削除して、その後またボタンを押した際にまた作るという形の物を作りたいです。 しかし一度目には要素もできて、削除もできるものの、 二度目のクリックの際要素が作成されません。 jsをインスペクタで見ると、要素は作成されている様に出ているのですが、 その要素にinnerHTMLで入れるテキストの部分にそんな要素はないという旨のエラーがでます。 そしてhtmlをインスペクタで見ると確かにその要素ができていません。 もしかして仕様上一度削除した要素はもう一度作れないのでしょうか？ ネイティブjsを使っています。 https://okwave.jp/qa/q9361862.html の続き

  • スクリプトで<div id="links">

    下記スクリプトで<div id="links"></div>のところを 開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきません どこをどのように変更すれば変換されるのでしょうか 【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>

  • スクロール付きのdivタグを作成するには

    縦スクロール付きのdivタグを作成するにはどうすればよろしいでしょうか。 下記のコードでやってみたのですが、うまくいきません。何が悪いのでしょうか。 var tarobj = object; var ele = document.createElement("div"); ele.setAttribute("overflow-y","scroll;"); ele.setAttribute("width", "100px"); ele.setAttribute("height", "25px"); ele.innerHTML = strobj; tarobj.appendChild(ele);

  • クローンすべてをクリックしたときにリスナーが実行

    下記のようにクローンすべてをクリックしたときにリスナーが実行されるようにしたかったのですが、同じクラス名の要素にはなっているもののおそらく配列の順番が違うので結局別要素と判断されてクローンをクリックしても実行されません。 クローンをクリックしても実行できるようにするにはどうすればよいのでしょうか。 イベントリスナーの対象要素を複数してする方法があるのでしょうか？ let createElement = document.createElement('div'); document.body.appendChild(createElement); let className = createElement.className = 'game'; createElement.style.position = 'fixed'; let clone1 = createElement.cloneNode(true); document.body.appendChild(clone1); clone1.style.position = 'fixed'; let clone2 = createElement.cloneNode(true); document.body.appendChild(clone2); clone2.style.position = 'fixed'; createElement.addEventListener('click', ()=> { ~

  • 指定位置に要素を追加する

    <script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも？いいのですが、何かいいやり方ありませんか？

  • javascriptで要素の構造を生成

    昨日質問したプログラムの続きなんですが、 実はクリックした画像を大きくしたくてその方法を考えています function getElements ( obj ) { //イメージタグここから var src = obj.getAttribute('src'); var element = document.createElement('img'); element.src = src; //div生成 var box = document.createElement('div'); box.style.position = 'fixed'; box.class = 'photobig'; box.style.top = '50%'; box.style.left = '50%'; box.style.width = '900px'; box.style.height = '600px'; box.style.background = '#000000'; box.style.opacity = '0.7'; box.style.marginTop = '-300px'; box.style.marginLeft = '-450px'; box.innerHTML = element;//←ここが問題 var objBody = document.getElementsByTagName("body").item(0); objBody.appendChild(box); // body要素にdivエレメントを追加 // var objPhotobox = document.getElementsByClassName("photobig").item(0); // objPhotobox.appendChild(element); } javascriptでdivを生成し、その中にimgタグで画像を入れようとしています appendChildで生成した後で、innerHTMLにimgタグの情報を入れようとしています innerHTMLに変数をいれてもタグとして生成されないのが分かったところで、 divにクラス名を付けてそのクラスにappendChildしてみたんですが、これもダメでした どうすればよいのか見当つかず困っています 生成した後のものを扱うのが難しそうなので一度にすべて生成するようにするのかなと思いつつやり方がわかりません よろしくお願いします

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する