refactoring javascript code to create for loop

user_12809566 0
Viewed 93

I am practicing Javascript. I want each link to display something different in the DOM when clicked.

Here is my current Javascript that works. 

//used a 'for' loop to hide each 'notes' page
const element = document.querySelectorAll(".notes");
for (let x = 0; x < element.length; x++)
  element[x].style.display = 'none';

const html_link= document.getElementById('html-link');
const css_link = document.getElementById('css-link');
const javascript_link = document.getElementById('js-link');

const html_notes = document.getElementById('html-notes');
const css_notes = document.getElementById('css-notes');
const js_notes = document.getElementById('js-notes');

html_link.onclick = function() {
    html_notes.style.display = "block";
    css_notes.style.display = "none";
    js_notes.style.display = "none";
}

css_link.onclick = function() {
    css_notes.style.display = "block";
    html_notes.style.display = "none";
    js_notes.style.display = "none";
}

javascript_link.onclick = () => {
    js_notes.style.display = "block";
    html_notes.style.display = "none";
    css_notes.style.display = "none";
}

How can I refactor it using a for loop? My thinking was for each link clicked, display notes. But I am struggling to figure out how to display the notes div correctly that matches the link clicked. This is what I have started. 

const links = document.querySelectorAll('.links')

for (const link of links) {
  link.addEventListener('click', function() {

    let ref = event.target.parentElement.id.replace('link','notes'); 
//replaces parent element with id 'notes'
    const show = document.getElementById(ref);
//'show' div with new id

  })
}
refactoring dom javascript
1 Answers

Welcome, fellow newbie! I've taken the liberty of writing the html and very minimal styling as well. This is my first attempt at an answer on stackoverflow.

Please note some features of the code I've added:

  • 'links' class added to all links.
  • 'notes' class added to all notes.
  • 'data-notes' attribute added to all links (with the id of each link's respective notes)
<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
</head>

<body>

    <div class="outer">
        <div id="html-link" data-notes="html-notes" class="links">
            <p>html-link</p>
        </div>
        <div id="css-link" data-notes="css-notes" class="links">
            <p>css-link</p>
        </div>
        <div id="javascript-link" data-notes="javascript-notes" class="links">
            <p>javascript-link</p>
        </div>
    </div>

    <div class="outer">
        <div id="html-notes" class="notes">
            <p>html-notes</p>
        </div>
        <div id="css-notes" class="notes">
            <p>css-notes</p>
        </div>
        <div id="javascript-notes" class="notes">
            <p>javascript-notes</p>
        </div>
    </div>

    <style>
        .links {
            cursor: pointer;
            background: green;
            color: white;
            padding: 1rem;
            margin: 1rem;
        }

        .notes {
            display: none;
            background: blue;
            color: white;
            padding: 1rem;
            margin: 1rem;
        }

        .outer {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            margin: 2rem 0;
        }

    </style>

    <script>
            const links = document.querySelectorAll('.links');
            const notes = document.querySelectorAll('.notes');

            for (const link of links) {
                link.onclick = function () {
                    for (const note of notes) {
                        if (note.id == link.dataset.notes) {
                            note.style.display = "block";
                        } else {
                            note.style.display = "none";
                        }
                    }
                }
            }

    </script>

</body>
</html>
Admin1
Related