[Solved] JavaScript Error: Cannot set properties of null

I am trying to figure out why I am getting an error after pressed Clear button to clear up TextArea and later I am typing the html contents in the text area, after done I pressed the Preview button it doesn’t display in the html viewer and give me an error: Cannot set properties of null (setting “innerHTML”) because TextArea feel like blank/null even html contents already written in the TextArea.

see the code:

<div class="card bg-light mb-3" style="max-width: 38rem;">
<div class="card-header"><%: Html.TranslateTag("Template","Template - HTML Source Code")%>:</div>
<div class="card-body">
<div><textarea id="htmltext" class="form-control card-text" contenteditable="true" placeholder="<%: Html.TranslateTag("Write HTML Source Code here...","Write HTML Source Code here")%>..."></textarea></div>
</div>
</div>

<br />

<div class="row">
    <div class="prevreset">
    <input type="button" value="<%: Html.TranslateTag("Preview","Preview")%>" id="add"  class="btn btn-sm btn-primary active" onclick="PreviewHtml();" />
    <input id="cleartextarea" type="button" value="<%: Html.TranslateTag("Reset","Reset")%>" class="btn btn-sm btn-secondary" onclick="ResetHtml();" />
        <input type="button" class="btn btn-sm btn-info" value="<%: Html.TranslateTag("Clear","Clear")%>" title="<%: Html.TranslateTag("Clear Text Area","Clear Text Area")%>" id="clear" onclick="ClearTextViewer();" />
     </div>
</div> <%-- row--%>

<br />

<div class="row">
<div>

<p id="output" style="display: none; font-weight: 600"><%: Html.TranslateTag("Output","Output")%>:</p>
   <div class="col-md-4 border-dark auto">
        <div style="display: table;" id="tableviewer" >
                <div style="display: table-row;">
                <div style="height: 300px; display: table-cell; border: 0px;" id="viewer" ></div>

        
        </div>   <%--table row--%>
     </div>  <%--display table viewer--%>
   </div>  <%--col md 4--%>
 </div>  <%--six--%>
</div>   <%--row--%>

<div class="form-group d-flex">
<div class="bold col-3" id="messageDiv" style="color: darkgreen;">
    </div>

jQuery:

       function PreviewHtml() {
            var text = document.getElementById("htmltext");
            var previewhtml = document.getElementById("viewer");
            previewhtml.innerHTML = text.value;   here?
            $("#output").show("slow");
        }

        function ResetHtml() {
            document.getElementById('htmltext').value = "";
            $("#viewer").remove();
            $("#viewer").fadeIn(1)
                location.reload(true);
            $("#output").hide();
            $("#htmltext").focus();
        };

        function ClearTextViewer() {
            document.getElementById('htmltext').value = "";
            $("#viewer").remove();
            location.reload(true);
            $("#output").hide();
            /*$('#htmlviewer').val('');*/
            $("#htmltext").focus();
        };

Your help is very appreciated.  Thanks