javascript...createに詳しい方。

Question

###前提・実現したいこと
javascriptより、
画像をオンマウスで通過する処理をしたいと考えております。

###発生している問題・エラーメッセージ
クロージャ内で新たに作成した要素に画像が表示されない。
document.getElementById(countAdd).src = img[0];というコードに対して
動きがない。
###該当のソースコード

<table>
<tr><td id="1" onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="2"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="3"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="4"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="5"onmouseover="func(1,0,id)"><img src="sample.png"></td>
<tr><td id="6"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="7"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="8"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="9"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="10"onmouseover="func(1,0,id)"><img src="sample.png"></td>
<tr><td id="11"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="12"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="13"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="14"onmouseover="func(1,0,id)"><img src="sample.png"></td><td id="15"onmouseover="func(1,0,id)"><img src="sample.png"></td>・//5×5のテーブル
</table>
</div>
<script>
var img = new Array();

img[0] = new Image();
img[0].src = "sample.png";
img[1] = new Image();
img[1].src = "sample2.png";


var check = ["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""];
var countAdd = 16;
/////////////////////////////こっから
function func( $a, $b ,m) {
	console.log("func()="+m);
	if(check[m] == m ){return;}
		
	var $intervalID = setInterval(function(){main(m);},5);

		function main(m) {
			var $targetElement = document.getElementById(m);
			$a = $a - 0.01;
		if( $a >= $b ){
			$targetElement.style.cssText = "opacity:" + $a + ";";
		}else{
			clearInterval( $intervalID );

		}
	}

check[m] = m;

}

function addElem(){


	function addElement() {
		if(countAdd == 21){return;}
		var element = document.createElement("td"); 

		element.id= countAdd;
	    	element.innerText = "■";

		var obj = document.getElementsByTagName("table").item(0);
		obj.appendChild(element); 
		element.onmouseover  = function(){func("1","0",element.id);}
		
		document.getElementById(countAdd).src = img[0];//ここが問題のコード

		console.log("countAdd="+countAdd+"element.id"+element.id);
		countAdd = countAdd +1;
		}
addElement();
}

</script> 
<button onclick="addElem()">要素を追加</button> 



</head>

###試したこと
直接ソースを入力したり、してみましたが、反応なし。
エラーコードなどはでていません。テーブルのほうには画像が表示されます。
どうぞよろしくおねがいいたします。

Answer 1

document.getElementById(countAdd).src = img[0];//ここが問題のコード

ここですが、document.getElementById(countAdd)で取得されるオブジェクトは
直前で生成したtdのオブジェクトです。
tdにはsrcというパラメータはありません。
おそらくやりたいことは

<td><img src="sample.jpg"></td>

という形にしたいのでしょうが、子要素を入れるやり方が間違っています。

とりあえずsample.jpgをtdの中に入れたいのであれば以下のようなコードがシンプルです。

document.getElementById(countAdd).innerHTML = "<img src=\"sample.jpg\">";

また、いちいちdocument.getElementById(countAdd)で取り直さなくとも、
elementがtdを指しているので、これでもいけます。

element.innerHTML = "<img src=\"sample.jpg\">";

Comments

[退会済みユーザー]

なるほど、具体例を用いて説明してくださり、誠にありがとうございます。
回答者様が記載した「おそらくやりたいこと」というのが私の一環してお聞きしたかったところであります。
さらに私が表示させたいコードを記載してないにも関わらずそこにたどり着いてしまったことに感服いたしました。しかも早い。。。
どうぞまた機会があればよろしくお願いいたします。
再三の御礼申し上げますが誠にありがとうございました。