title: Uncaught TypeError: Cannot set property 'innerHTML' of null Django
body: <p>I know there are many similarly to this question but I can't find a way.
  I have a table and when I click edit in row table the modal should show and I want to pass data from  table to modal and display some data in modal that comes from my table .When the button click it always error and the modal didn't show.I been using Django.Please see the image below. Below is my current code. Can you help me please?</p>
  <p><a href="https://i.stack.imgur.com/pwm3i.jpg" rel="nofollow noreferrer">enter image description here</a></p>
  <blockquote>
  <p>accounts.html</p>
  </blockquote>
  <pre><code> {% extends 'navigation.html' %}
  {% block content %}
  &lt;script&gt; 
      function exampleModal(firstName,lastName){
         
              document.getElementById('firstNameValueId').innerHTML = firstName
              document.getElementById('secondNameValueId').innerHTML = lastName
              $(&quot;#exampleModal&quot;).modal('show');
          }
  &lt;/script&gt;
  
      &lt;!-- mytable --&gt;
      &lt;div class=&quot;tabs-animation&quot;&gt;
          &lt;div class=&quot;card mb-3&quot;&gt;
              &lt;div class=&quot;card-header-tab card-header&quot;&gt;
                  &lt;div class=&quot;card-header-title font-size-lg text-capitalize font-weight-normal&quot;&gt;&lt;i
                          class=&quot;header-icon lnr-laptop-phone mr-3 text-muted opacity-6&quot;&gt; &lt;/i&gt;Accounts Information
                  &lt;/div&gt;
                  &lt;div class=&quot;btn-actions-pane-right actions-icon-btn&quot;&gt;
                      &lt;div class=&quot;btn-group dropdown&quot;&gt;
                          &lt;button type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;
                              class=&quot;btn-icon btn-icon-only btn btn-link&quot;&gt;
                              &lt;i class=&quot;pe-7s-menu btn-icon-wrapper&quot;&gt;&lt;/i&gt;
                          &lt;/button&gt;
                          &lt;div tabindex=&quot;-1&quot; role=&quot;menu&quot; aria-hidden=&quot;true&quot; class=&quot;dropdown-menu-right rm-pointers dropdown-menu-shadow dropdown-menu-hover-link dropdown-menu&quot;&gt;
                              &lt;h6 tabindex=&quot;-1&quot; class=&quot;dropdown-header&quot;&gt;Header&lt;/h6&gt;
                              &lt;button type=&quot;button&quot; tabindex=&quot;0&quot; class=&quot;dropdown-item&quot;&gt;
                                  &lt;i class=&quot;dropdown-icon lnr-inbox&quot;&gt; &lt;/i&gt;&lt;span&gt;Menus&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;button type=&quot;button&quot; tabindex=&quot;0&quot; class=&quot;dropdown-item&quot;&gt;
                                  &lt;i class=&quot;dropdown-icon lnr-file-empty&quot;&gt; &lt;/i&gt;&lt;span&gt;Settings&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;button type=&quot;button&quot; tabindex=&quot;0&quot; class=&quot;dropdown-item&quot;&gt;
                                  &lt;i class=&quot;dropdown-icon lnr-book&quot;&gt; &lt;/i&gt;&lt;span&gt;Actions&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;div tabindex=&quot;-1&quot; class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
                              &lt;div class=&quot;p-3 text-right&quot;&gt;
                                  &lt;button class=&quot;mr-2 btn-shadow btn-sm btn btn-link&quot;&gt;View Details&lt;/button&gt;
                                  &lt;button class=&quot;mr-2 btn-shadow btn-sm btn btn-primary&quot;&gt;Action&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                   &lt;table style=&quot;width: 100%;&quot; id=&quot;example&quot; class=&quot;table table-hover table-striped table-bordered&quot;&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Action&lt;/th&gt;
                              &lt;th&gt;Firstname&lt;/th&gt;
                              &lt;th&gt;Lastname&lt;/th&gt;
                              &lt;th&gt;Email&lt;/th&gt;
                              &lt;th&gt;Username&lt;/th&gt;
                           
                              &lt;th&gt;Date joined&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody&gt;
                      {% for user_information in user_information %}
                          &lt;tr&gt;
                              &lt;td&gt;&lt;a class=&quot;btn btn-info&quot; onclick=&quot;exampleModal('{{user_information.first_name}}','{{user_information.last_name}}')&quot;&gt;Edit&lt;/a&gt;&lt;/td&gt;
                              &lt;td&gt;{{user_information.first_name}}&lt;/td&gt;
                              &lt;td&gt;{{user_information.last_name}}&lt;/td&gt;
                              &lt;td&gt;{{user_information.email}}&lt;/td&gt;
                              &lt;td&gt;{{user_information.username}}&lt;/td&gt;
                              
                          &lt;/tr&gt;
                      {% endfor %}
                      &lt;/tbody&gt;  
                  &lt;/table&gt;
                  
                   
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  {% endblock %}
  
      &lt;!-- This is my modal --&gt;
  &lt;div id=&quot;modal-div&quot;&gt;
          &lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot;
          aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
              &lt;div class=&quot;modal-content&quot;&gt;
                  &lt;div class=&quot;modal-header&quot;&gt;
                      &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Personal Information&lt;/h5&gt;
                      &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                          &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-body&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
              
                      &lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
                          &lt;label for=&quot;firstname&quot;&gt;  &lt;p id=&quot;firstNameValueId&quot;&gt;Some text in the Modal..&lt;/p&gt;&lt;/label&gt;
                          &lt;div&gt;
                              &lt;input type=&quot;text&quot; class=&quot;custom-input1 form-control &quot; id=&quot;firstNameValueId&quot; name=&quot;firstname&quot; placeholder=&quot;First name&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label for=&quot;lastname&quot;&gt;Last name&lt;/label&gt;
                          &lt;div&gt;
                              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;secondNameValueId&quot; name=&quot;lastname&quot; placeholder=&quot;Last name&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>