javascript メソッドの使い方

Question

<script type="text/javascript">
function test(id){

	document.getElementById(id).innerHTML="test";

}

test("tes");
</script>

<p><span id="tes"></span></p>

JSは引数にid渡してそのidに何かしらの文字列をセットするみたいな使い方はできないのでしょうか？

下記エラーが出ます。

Uncaught TypeError: Cannot set property 'innerHTML' of null
at dispMsg (create_account_finish.php:72)
at create_account_finish.php:76

Answer 1

他の方も指摘しておりますが、プログラムは基本上から順に実行します。
test()の実行時はまだ<p><span id="tes"></span></p>が作られていないので、
document.getElementById("tes")では見つからずnullになってしまいます。

###・方法その1: <script>をタグの後に追加 (実行文test("tes");のみでも可)

<p><span id="tes"></span></p>

<script type="text/javascript">
	function test(id){
		document.getElementById(id).innerHTML="test";
	}
	test("tes");
</script>

###・方法その2: window.onloadを使う（htmlを読み終えてから実行する）

<script type="text/javascript">
	window.onload = function () {
		test("tes");
	}

	function test(id){
		document.getElementById(id).innerHTML="test";
	}
</script>

<p><span id="tes"></span></p>

参考：window.onload

Answer 2

test("tes");

これの実行時点でspan要素が未ロードということはありませんか？javascriptで、htmlを操作する場合は、htmlのロード終了後に実行されるonloadのスクリプトから呼び出すのが一般的です。

Answer 3

<p><span id="tes"></span></p> の後にスクリプトを書くといいのではないでしょうか。