関数でinnerHTMLを使えないようなエラーが出る。

Question

###やりたいこと
ショートカットを作ろうと思って、id要素に出力するときのコードのショートカットを関数で実装しようと思って、以下のコードを書きました。

home.html

<script>
sethtml('sss','<a href="www">aaa<a>');
</script>
<div id="sss"></div>

test.js

function sethtml(id,html1){
  document.getElementById(id).innerHTML = html1;
}

エラー

これでやってみたところsssにaaaが表示されず、コンソールを確認したところ次のようなエラーが出ました。

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at sethtml (test.js:7)
    at home.html:131

これは、MacのChromeで、バージョンは74.0.3729.169です。

わかる方いたらお願いします！！

Answer 1

呼び出す順番の問題では？
ちなみにaの閉じタグがおかしかったので気をつけてください

<script>
window.addEventListener('DOMContentLoaded', function(e){
  sethtml('sss','<a href="www">aaa</a>');
});
function sethtml(id,html1){
  document.getElementById(id).innerHTML = html1;
}
</script>
<div id="sss"></div>

Comments

[Res]

今モバイルなので試してみます。

[think49]

> window.addEventListener('DOMContentLoaded', function(e){
素朴な疑問ですが、window でメソッド呼び出しする理由は何でしょうか。
DOMContentLoaded は bubble するのでこれでも動きますが、window は document よりも発火タイミングが遅いので、理由が気になりました。

[Res]

良い回答ですが、今回はライブラリーの様に簡単にやりたかったので、上の方を選びます。回答ありがとうございます！！

Answer 2

sethtml()が実行された時点で<div id="sss"></div>がまだないので、document.getElementById(id)の結果がnullになります。

順番を入れ替えるとうまくいきます。

<div id="sss"></div>
<script>
sethtml('sss','<a href="www">aaa<a>');
</script>

Comments

[HAC]

自分で書いておいてなんですが...
こちらでも一応動きますが、yambejpさんのようにするのが正道です。あちらを採用してください。
`window.addEventListener('DOMContentLoaded', ... )`= HTMLタグが全解釈されたら動作、なので。

[think49]

否定されたところなんですが、私ならこちらか、<script defer> を採用します。

[HAC]

<script defer>を知りませんでした。勉強になります。
知識不足ゆえお聞きしますが、addEventListener('DOMContentLoaded')を採用しない理由はなんでしょうか？

[think49]

> addEventListener('DOMContentLoaded')を採用しない理由はなんでしょうか？
addEventListener は直接的要因ではなく、<script> の位置に問題があります。
script要素で宣言されたJavaScriptが実行されるまでHTMLパーサのパース処理が止まるパフォーマンス低下問題がある為、要素読み込みが必要なJavaScript処理は </body> 直前で定義する事にしています。
https://gist.github.com/think49/689d7d1e5c5fd0c5ca266e4c66b0b35e
https://www.google.com/search?q=script+%28defer+%7C+async%29&oq=script+%28defer+%7C+async%29

[Res]

今回は簡単に実装したかったのであなたを選びました。
あと、<script defer>も勉強になりました。
think49さん、HACさん、ありがとうございます！

[HAC]

> think49さま
言わんとすることは理解できました。ありがとうございます。