javascript jquery.min.js:2 Uncaught TypeError: Cannot read property 'style' of null

Question

前提・実現したいこと

jsを使用しているのですが、下記エラーが発生し画面表示ができなくなっています。
nullを取得してエラーが出ているので、if文で条件分岐し、
null取得時は空白、値取得時はそのまま表示にしたいと考えてますが、
どのような記載が宜しいでしょうか？

js詳しくなく、質問させて頂きました。

発生しているWrning

jQuery.Deferred exception: Cannot read property 'style' of null TypeError: Cannot read property 'style' of null
    at confirm_and_resubmit (http://127.0.0.1:5000/requests:2073:56)
    at HTMLDocument.<anonymous> (http://127.0.0.1:5000/requests:173:2)
    at j (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999)
    at k (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313) undefined

発生しているエラー

Uncaught TypeError: Cannot read property 'style' of null
    at confirm_and_resubmit (requests:2073)
    at HTMLDocument.<anonymous> (requests:173)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

該当のソースコード

at confirm_and_resubmit (requests:2073)の部分

function confirm_and_resubmit(){
	document.getElementById('overlay_update_{{request_id}}').style.visibility = 'visible'; #エラー箇所
	{% for category, message in 

at HTMLDocument.<anonymous> (requests:173)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	confirm_and_resubmit(); #エラー箇所
});
</script>

###試したコード
innerHTMLは使い方が違ったかもしれません。
at confirm_and_resubmit (requests:2073)の部分

function confirm_and_resubmit(){
      if(document.getElementById('overlay_update_{{request_id}}')=="null"){
          document.getElementById('overlay_update_{{request_id}}').innerHTML = "";} 
      else { document.getElementById('overlay_update_{{request_id}}').style.visibility = 'visible';}

Comments

[m.ts10806]

同問題では？　https://teratail.com/questions/123370

[MF_19]

確認ありがとうございます。こちらに関しては同問題の可能性もあるのですが、別のエラーの可能性もあり改めて質問させて頂きました。こちらはchromeでも出ているエラーだったのと、今回の質問は単純なエラーに対して、その前の質問はIE仕様についてだったので分けさせて頂きました。ただ、こちら（または前回）の問題が解決すれば２つの質問が両方解決する可能性はありますので、その場合はすぐに両方の質問を閉めさせて頂こうと考えていました。色々とご回答ありがとうございます。

Answer 1

2点おかしな部分があります。

• document.getElementById()の返り値は、HTML要素もしくはnull値なので、文字列の"null"とは絶対に等しくなりません。== nullで判定しましょう。
• （今回のエラーとは関係しないですが）nullに対して.innerHTML =の代入を行うことも、もちろんできません。エレメントごと生成して挿入するなど、別な手段を取る必要があります。

Comments

[MF_19]

ご回答ありがとうございます。
こういった形で書き直してみました。

nullのときにreturn ""を返すようにしているのが、少々気になっています。
（nullのときは何もしないでほしいだけなのですが）
何か記載方法におかしな所があればご指摘頂けるとなお助かります。
```
function confirm_and_resubmit(){
var check;
check = document.getElementById('overlay_update_')
if(check==null){return "";}
else { return document.getElementById('overlay_update_').style.visibility = 'visible';}
```