title: Why adding style through JavaScript is not working
body: <p>I am a beginner and I am learning JavaScript now. I am trying to make a javascript project. On this project, I am trying to add a style through javascript.
  On my project, there is a button (anchor tag) named &quot;Close&quot;. When it will click, the style <code>text-decoration: line-through</code> will be added to the description which id is <code>issue-{id}</code>.  But the style is not working. The style is not added when I am clicking on the close button.</p>
  <p><strong>Look at the javascript code on line no 29 and 53</strong>.</p>
  <p>Here is my full code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('issueInputForm').addEventListener('submit', submitIssue);
  
  let issueCounterEl = document.getElementById("issue-counter");
  
  function submitIssue(e) {
      const getInputValue = id =&gt; document.getElementById(id).value;
      const description = getInputValue('issueDescription');
      const severity = getInputValue('issueSeverity');
      const assignedTo = getInputValue('issueAssignedTo');
      const id = Math.floor(Math.random() * 100000000) + '';
      const status = 'Open';
      const issue = { id, description, severity, assignedTo, status };
      let issues = [];
      if (localStorage.getItem('issues')) {
          issues = JSON.parse(localStorage.getItem('issues'));
      }
      issues.push(issue);
      localStorage.setItem('issues', JSON.stringify(issues));
      document.getElementById('issueInputForm').reset();
      fetchIssues();
      e.preventDefault();
  }
  
  const closeIssue = id =&gt; {
      const issues = JSON.parse(localStorage.getItem('issues'));
      const currentIssue = issues.find(issue =&gt; issue.id == id);
      currentIssue.status = 'Closed';
      
      document.getElementById(`issue-${id}`).style.textDecoration = 'line-through'; // This line - line: 29. Id form line: 53
  
      localStorage.setItem('issues', JSON.stringify(issues));
      fetchIssues();
  }
  
  const deleteIssue = id =&gt; {
      const issues = JSON.parse(localStorage.getItem('issues'));
      const remainingIssues = issues.filter(issue =&gt; issue.id != id)
      localStorage.setItem('issues', JSON.stringify(remainingIssues));
      fetchIssues();
  }
  
  const fetchIssues = () =&gt; {
      const issues = JSON.parse(localStorage.getItem('issues'));
      const issuesList = document.getElementById('issuesList');
      issuesList.innerHTML = '';
  
      for (var i = 0; i &lt; issues.length; i++) {
          const { id, description, severity, assignedTo, status } = issues[i];
  
          issuesList.innerHTML += `&lt;div class="well"&gt;
                                &lt;h6&gt;Issue ID: ${id} &lt;/h6&gt;
                                &lt;p&gt;&lt;span class="label label-info"&gt; ${status} &lt;/span&gt;&lt;/p&gt;
                                &lt;h3 id="issue-${id}"&gt; ${description} &lt;/h3&gt; 
                                &lt;p&gt;&lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt; ${severity}&lt;/p&gt;
                                &lt;p&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt; ${assignedTo}&lt;/p&gt;
                                &lt;a href="#" onclick="closeIssue(${id})" class="btn btn-warning"&gt;Close&lt;/a&gt;
                                &lt;a href="#" onclick="deleteIssue(${id})" class="btn btn-danger"&gt;Delete&lt;/a&gt;
                                &lt;/div&gt;`;
      }
      issueCounterEl.innerText = issues.length;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Issue Tracker: &lt;/title&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  &lt;body onload="fetchIssues()"&gt;
      &lt;div class="container"&gt;
          &lt;h1&gt;Issue Tracker: &lt;span id="issue-counter"&gt;&lt;/span&gt;&lt;/h1&gt;
          &lt;div class="jumbotron"&gt;
              &lt;h3&gt;Add New Issue:&lt;/h3&gt;
              &lt;form id="issueInputForm"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="issueDescription"&gt;Description&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ..."&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="issueSeverity"&gt;Severity&lt;/label&gt;
                      &lt;select id="issueSeverity" class="form-control"&gt;
                          &lt;option value="Low"&gt;Low&lt;/option&gt;
                          &lt;option value="Medium"&gt;Medium&lt;/option&gt;
                          &lt;option value="High"&gt;High&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="issueAssignedTo"&gt;Assigned To&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ..."&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-primary"&gt;Add&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div id="issuesList"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
          integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>There is no warning or error in the chrome dev tools.</p>
  <p>How can I solve the problem?</p>