常連

注目の的

社会貢献

質問力

現在、htmlとjavascriptで、コメントフォームを作っています。
作成にあたって問題が発生したので、その原因と対策法をうかがいたく、質問させていただきます。

まず、下の画像をご覧ください。
画像は、作成しているコメントフォームページの初期状態のものです。
![イメージ説明](6450c7d11febc922fecb0ed69dfe2fee.png)

このコメントフォームの機能面に関して以下の⑴⑵の機能をつけようと考えています。

（１）追加ボタンを押すと、新しいコメントフォーム（新しいテキストエリアとそのテキストエリアに対応する新しい削除ボタン）が同じページ内に挿入される。（下の画像は、追加ボタンを押した後の様子です。)
![イメージ説明](9822c748e1498a6ad6a6ce0108d843d7.png)
（２）削除ボタンを押すと、その削除ボタンが属するコメントフォームが抹消される


冒頭で申し上げた問題とは、この二つの機能のうちの削除機能に関するものです。
具体的に申し上げます。
初期状態で存在していたコメントフォームは、削除ボタンを押すとちゃんと抹消されるのですが、追加ボタンによって新たに挿入されたコメントフォームは削除ボタンを押しても削除されません。

以下にソースコードを記載します。原因や対策法のわかる方がいらっしゃいましたら、ご教授ねがいます。

ーーーーーーーーーーーー
```
<body>


<input type="button" value="追加" id="tsuika">



<div>
<textarea></textarea><input type="button" value="削除" id="sakujo">
</div>



<script>
(function(){

//追加ボタンを押すと、新しいコメントフォームが挿入される
tsuika.addEventListener('click', function(){
var div_element = document.createElement("div");
div_element.innerHTML = '<textarea></textarea><input type="button" value="削除" id="sakujo">';
document.body.appendChild(div_element);
});

//削除ボタンを押すと、その削除ボタンの親要素が中身もろとも削除される
sakujo.addEventListener('click', function(){
this.parentNode.remove();
});
})();
</script>
```
ーーーーーーーーーーーーーー

javascript removeが効かない問題

いつもお世話になっております。

動的に追加した要素にaddEventListnerを設定する方法がわからないのです。
調べてもJqueryでの方法は多く出てくるのですが、生のJavascriptでは出てこないので質問させていただきました。

試しにコードを作成してみたのですが、動的に生成された要素elm_2が存在しないためaddEventListner propertyがNullですと返ってくるのかと推察しました。

jqueryの$(document).on('click','hoge',function)のように動的に生成された要素にイベントを設定したいということになります。
よろしくお願いいたします。

```HTML
<body>

<button id="btn_1">btn</button>

      <script type="text/javascript">
      function adding() {
      var elm_add = document.createElement('button');
      elm_add.id = "hoge";
      elm_add.textContent='btn added';
      var objBody = document.getElementsByTagName("body").item(0);
      objBody.appendChild(elm_add);
      }
      var elm = document.getElementById("btn_1");
      elm.addEventListener("click", adding, false);

      </script>

      <script type="text/javascript">

      function warnings (){
        alert('it works! congraturations!!')
      }


      var elm_2 = document.getElementById("hoge");
      elm_2.addEventListener("click", warnings, false);
     //Uncaught TypeError: Cannot read property 'addEventListener' of null
      </script>
</body>
```

動的に追加した要素にaddEventListnerを設定する方法

```コーディング約半年の者です。
独学で勉強しながら、仕事をしており、JavaScriptやjQueryなども
既存のコードであれば、ネット上に使用方法があるので扱えるようになってきたのですが、
壁にぶち当たりそうになってきているので、どのような思考をすればランキング上位の方達
のようにどんな質問でも答えられるようになるのでしょうか？・・・と疑問が湧いています。

そこで、以下の質問に答えていただけますと幸いです。
```

###Q1.JavaScriptで既存のコードを使わずに自分で開発するまでにどれくらいの制作期間を要するのでしょうか？
※プロジェクトによって全然変わると思うのですが、例えば、最近WEBサイトでよく見る
トップページで独自の画面ロードアニメーションの後に、サイトが表示されるもの
参考：https://www.m-hand.co.jp/


###Q2.ランキング上位者の方達はコードの引き出しが非常に多いように感じるのですが、全て暗記しているのですか？
※私はコードを覚えきれないので、自分の雑記ブログにメモ用に保存して、忘れた都度開いて使用しています。
※パソコンのテキストの暗記機能も使っているのですが、どのように登録したのか忘れてしまうときもあるので不便に感じています。


###Q3.暗記以外で効率よくコードを引き出す方法などがあれば教えてください。


###Q4.JavaScriptやjQueryをマスターする上で参考になる書籍や学習コンテンツがあれば教えてください。
※ドットインストールとプロゲートで基礎学習は一通り学習したため、時間はかかりますが既存のコードを読むことはできます。
必要箇所のみの編集はできますが、応用して編集することができません。

###Q5.上位者の方達は複数言語をマスターしているように見受けられるのですが、初学者の私でも広く浅く理解しておくべきでしょうか？それともJavaScriptやjQueryをまずマスターすべきでしょうか？

お忙しいところ恐れ入りますがご回答いただけましたら幸いです。
よろしくお願いいたします。

teratailランキング上位の方の思考が知りたいです。

動作環境：
OS： Windows7 32bit
開発環境： Access2010 VBA
操作対象：IE9


いつもお世話になっております。

IEにて、コマンドボタンクリック後に、
処理を実行して良いのか確認するダイアログが表示されるサイトがありまして、
確認ダイアログのOKボタンを押せずに困っております。


動作イメージとしましては、このサイトでOKボタンを押して、その後のダイアログのOKボタンを押したいです。
http://kamicha1.web.fc2.com/Excel/Test20090726.html


このサイトでは、OKボタンにID名が設定されていますが、
実際に押したいサイトでは、ID名が設定されていません。


サンプルサイトのHTMLが＜変更後＞のパターンの場合には、
どのように指定すると「.click()」を実行できますか？


＜変更前＞
<input type="submit"value="OK"class="bt2"id="popOK"onclick="return pdf();">
＜変更後＞
<input type="button"value="OK"name="popOK"onclick="return pdf();">



このサイトに対応するサンプルプログラムは以下のようになっています。
（このプログラムを起動すると、IEでOKボタン、確認ダイアログのOKボタンが押されてPDFが表示されます。）


---------------

【サンプルコード】
```
Private Declare PtrSafe Function PostMessage Lib "user32" Alias "PostMessageA" (ByVal hwnd As LongPtr, ByVal wMsg As Long, ByVal wParam As LongPtr, ByVal 

lParam As LongPtr) As Long
Private Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long)
Private Declare Function FindWindow Lib "User32.dll" Alias "FindWindowA" (ByVal lpClassName As String, ByVal lpWindowName As String) As Long

Const WM_COMMAND As Long = &H111&


Sub ie_CommandStateChange()

Dim hwnd As Long
Dim ie As InternetExplorer
Dim a As Long, b As Long
Dim objtag As Object
Dim i As Long

Set ie = CreateObject("InternetExplorer.Application")

ie.Visible = True
ie.Navigate "http://kamicha1.web.fc2.com/Excel/Test20090726.html"

Do While ie.Busy Or ie.ReadyState < 4
DoEvents
Loop

Set objtag = ie.Document.getElementsByTagName("INPUT")
For i = 0 To objtag.Length - 1
If objtag(i).Value = "OK" Then

ie.Document.Script.setTimeout "javascript:document.getElementById('popOK').click()", 200

Sleep 1000

hwnd = FindWindow("#32770", "Web ページからのメッセージ")

If hwnd <> 0 Then

Debug.Print hwnd, ie.hwnd

PostMessage hwnd, WM_COMMAND, vbOK, 0

End If

Exit For

End If
Next i
End Sub
```
--------------------


【サンプルサイトのHTML】
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">


<script language="JavaScript"></script>

<title>VBA</title>
</head>


<body>
<table border="0"width="100%"class="popBtn"><tr><td align="center"><input type="submit"value="OK"class="bt2"id="popOK"onclick="return pdf

();"></td></tr></table>
<input type="hidden"name="analysisPrevActionId"value="SATCB01J">
<script type="text/javascript">


</script>



<img src="http://media.fc2.com/counter_img.php?id=50" style="visibility:hidden" alt="inserted by FC2 system" width="0" height="0">

</body></html>
```
-----------

何卒ご教授の程、よろしくお願いします。