Why adding style through JavaScript is not working

Question

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 "Close". When it will click, the style text-decoration: line-through will be added to the description which id is issue-{id}. But the style is not working. The style is not added when I am clicking on the close button.

Look at the javascript code on line no 29 and 53.

Here is my full code:

document.getElementById('issueInputForm').addEventListener('submit', submitIssue);

let issueCounterEl = document.getElementById("issue-counter");

function submitIssue(e) {
    const getInputValue = id => 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 => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const currentIssue = issues.find(issue => 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 => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const remainingIssues = issues.filter(issue => issue.id != id)
    localStorage.setItem('issues', JSON.stringify(remainingIssues));
    fetchIssues();
}

const fetchIssues = () => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const issuesList = document.getElementById('issuesList');
    issuesList.innerHTML = '';

    for (var i = 0; i < issues.length; i++) {
        const { id, description, severity, assignedTo, status } = issues[i];

        issuesList.innerHTML += `<div class="well">
                              <h6>Issue ID: ${id} </h6>
                              <p><span class="label label-info"> ${status} </span></p>
                              <h3 id="issue-${id}"> ${description} </h3> 
                              <p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
                              <p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
                              <a href="#" onclick="closeIssue(${id})" class="btn btn-warning">Close</a>
                              <a href="#" onclick="deleteIssue(${id})" class="btn btn-danger">Delete</a>
                              </div>`;
    }
    issueCounterEl.innerText = issues.length;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Issue Tracker: </title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body onload="fetchIssues()">
    <div class="container">
        <h1>Issue Tracker: <span id="issue-counter"></span></h1>
        <div class="jumbotron">
            <h3>Add New Issue:</h3>
            <form id="issueInputForm">
                <div class="form-group">
                    <label for="issueDescription">Description</label>
                    <input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
                </div>
                <div class="form-group">
                    <label for="issueSeverity">Severity</label>
                    <select id="issueSeverity" class="form-control">
                        <option value="Low">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="High">High</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="issueAssignedTo">Assigned To</label>
                    <input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
                </div>
                <button type="submit" class="btn btn-primary">Add</button>
            </form>
        </div>
        <div class="col-lg-12">
            <div id="issuesList"></div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

There is no warning or error in the chrome dev tools.

How can I solve the problem?

You set the new style and THEN you call fetchIssues() which recreates the HTML with all new elements replacing the one that you just assigned the style to. When you assign a style to a specific element, rather than a style that is applies via a style sheet, then that style only applies to that specific element. When you replace the element with a new element, the previous manual style settings will not be on that new element. — jfriend00
– jfriend00, Commented Aug 23, 2021 at 4:57

user13899130 · Accepted Answer · 2021-08-23 15:55:44Z

1

Your code is all-right but has a small mistake. All you need to do is just put the line document.getElementById(`issue-${id}`).style.textDecoration = 'line-through'; after fetchIssues();.

Then it will look like this:

const closeIssue = id => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const currentIssue = issues.find(issue => issue.id == id);
    currentIssue.status = 'Closed';
    localStorage.setItem('issues', JSON.stringify(issues));
    fetchIssues();
    document.getElementById(`issue-${id}`).style.textDecoration = "line-through";
}

answered Aug 23, 2021 at 15:55

user13899130

Sign up to request clarification or add additional context in comments.

Comments

Sebastian Simon · Accepted Answer · 2021-08-23 05:04:27Z

1

This is because you add the id on the wrong element, it should on <h6> and you put it on <h3>.
Comment your fetch method, because it will override the style you just applied.

See fiddle: https://jsfiddle.net/ramseyfeng/41kvwqye/

issuesList.innerHTML += `<div class="well">
                              <h6 id="issue-${id}">Issue ID: ${id} </h6>
                              <p><span class="label label-info"> ${status} </span></p>
                              <h3> ${description} </h3> 
                              <p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
                              <p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
                              <a href="#" onclick="closeIssue(${id})" class="btn btn-warning">Close</a>
                              <a href="#" onclick="deleteIssue(${id})" class="btn btn-danger">Delete</a>
                              </div>`;

edited Aug 23, 2021 at 5:04

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

answered Aug 23, 2021 at 4:56

huan feng

8,7043 gold badges40 silver badges66 bronze badges

2 Comments

Satyajit Roy Over a year ago

Oh sorry. The id of h3 is confusing you. I set it for h3, not for h6. If I comment the fetch method the style is applying correctly but the innterText of h6 is not changing form Open to Close.

huan feng Over a year ago

Where is the text in? I can see the status changed from 'Open' to 'Closed' after clicking the close button. Please check the previous fiddle carefully.

Suresh Ponnukalai · Accepted Answer · 2021-08-23 05:27:00Z

You can't see the strike through effect in UI because you are always display the information from the local storage setup. You are not updating the strike through style effect on your local storage information. So before fetching your information update your local storage information for the specific id with the strike through style effect like below.

Instead of

document.getElementById(`issue-${id}`).style.textDecoration = 'line-through'; // This line - line: 29. Id form line: 53

Use below

issues.find(issue => issue.id == id).style.textDecoration = 'line-through';

The above line will update the local storage value and you can see the effect in UI.

document.getElementById('issueInputForm').addEventListener('submit', submitIssue);

let issueCounterEl = document.getElementById("issue-counter");

function submitIssue(e) {
    const getInputValue = id => 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 => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const currentIssue = issues.find(issue => issue.id == id);
    currentIssue.status = 'Closed';    
    issues.find(issue => issue.id == id).style.textDecoration = 'line-through';

    localStorage.setItem('issues', JSON.stringify(issues));
    fetchIssues();
}

const deleteIssue = id => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const remainingIssues = issues.filter(issue => issue.id != id)
    localStorage.setItem('issues', JSON.stringify(remainingIssues));
   fetchIssues();
}

const fetchIssues = () => {
    const issues = JSON.parse(localStorage.getItem('issues'));
    const issuesList = document.getElementById('issuesList');
    issuesList.innerHTML = '';

    for (var i = 0; i < issues.length; i++) {
        const { id, description, severity, assignedTo, status } = issues[i];

        issuesList.innerHTML += `<div class="well">
                              <h6>Issue ID: ${id} </h6>
                              <p><span class="label label-info"> ${status} </span></p>
                              <h3 id="issue-${id}"> ${description} </h3> 
                              <p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
                              <p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
                              <a href="#" onclick="closeIssue(${id})" class="btn btn-warning">Close</a>
                              <a href="#" onclick="deleteIssue(${id})" class="btn btn-danger">Delete</a>
                              </div>`;
    }
    issueCounterEl.innerText = issues.length;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Issue Tracker: </title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body onload="fetchIssues()">
    <div class="container">
        <h1>Issue Tracker: <span id="issue-counter"></span></h1>
        <div class="jumbotron">
            <h3>Add New Issue:</h3>
            <form id="issueInputForm">
                <div class="form-group">
                    <label for="issueDescription">Description</label>
                    <input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
                </div>
                <div class="form-group">
                    <label for="issueSeverity">Severity</label>
                    <select id="issueSeverity" class="form-control">
                        <option value="Low">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="High">High</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="issueAssignedTo">Assigned To</label>
                    <input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
                </div>
                <button type="submit" class="btn btn-primary">Add</button>
            </form>
        </div>
        <div class="col-lg-12">
            <div id="issuesList"></div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

user16730065 · Accepted Answer · 2021-08-23 04:50:14Z

0

Your JavaScript runs before your done is rendered, so you need to wait for it to finished and you do that with

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
/// add code here
});

answered Aug 23, 2021 at 4:50

user16730065

Comments

Matthias · Accepted Answer · 2021-08-23 04:51:05Z

0

Just a little tip: (not going to solve your problem) Set another variable as the element:

issueid = document.getElementById(`issue-${id}`)

Then, do the following:

issueid.style.textDecoration = 'line-through';

(I know this should be in the comments but I don't have enough rep.)

answered Aug 23, 2021 at 4:51

Matthias

2851 silver badge16 bronze badges

Comments

sooraj s pillai · Accepted Answer · 2021-08-23 04:53:12Z

0

Try this

document.getElementById(`issue-${id}`).style.textDecoration = "line-through";

answered Aug 23, 2021 at 4:53

sooraj s pillai

9162 gold badges18 silver badges41 bronze badges

Collectives™ on Stack Overflow

Why adding style through JavaScript is not working

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related