我该如何编写这个 javascript 代码清理器？

Question

all

I am currently practicing my coding skills and am making a simple footer selection webpage.

I have four footers with different looks that are set to "display:none" initially. Then, I have four buttons, each one corresponding to its footer type. When the button is clicked, it displays the footer.

Now I just want to know how do I write a cleaner Javascript than what I currently have. Thank you as always.

var footer1 = document.getElementById('footer1');
var footer2 = document.getElementById('footer2');
var footer3 = document.getElementById('footer3');
var footer4 = document.getElementById('footer4');

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');


btn1.onclick = function(e) {
    console.log('You clicked button1');
    e.preventDefault();

    footer1.style.display = 'block';
    footer2.style.display = 'none';
    footer3.style.display = 'none';
    footer4.style.display = 'none';


}

btn2.onclick = function(e) {
    console.log('You clicked button2');
    e.preventDefault();
    footer2.style.display = 'block';
    footer1.style.display = 'none';
    footer3.style.display = 'none';
    footer4.style.display = 'none';



}

btn3.onclick = function(e) {
    console.log('You clicked button3');
    e.preventDefault();
    footer3.style.display = 'block';
    footer2.style.display = 'none';
    footer1.style.display = 'none';
    footer4.style.display = 'none';

}

btn4.onclick = function(e) {
    console.log('You clicked button4');
    e.preventDefault();
    footer4.style.display = 'block';
    footer2.style.display = 'none';
    footer3.style.display = 'none';
    footer1.style.display = 'none';

}

Answer 1

You can just use Arrays like this:

let buttons = [ 'btn1', 'btn2', 'btn3', 'btn4' ];
let footers = [ 'footer1', 'footer2', 'footer3', 'footer4' ];

buttons.forEach((btn, index) => {
    // Please note that you might want to use addEventListener instead of onclick

    document.getElementById(btn).addEventListener('click', (event) => {
        event.preventDefault();

        let button = 'button' + (index + 1);

        alert('You clicked ' + button);

        footers.forEach((footer, index_f) => {
            let f = document.getElementById(footer);

            if(index_f === index) {
                f.style.display = 'block';
            }
            else {
                f.style.display = 'none';
            }
        });
    });
});

To make things even more interesting, you can play with querySelectorAll and custom attributes. You could, for example, add the classes custom-button to your buttons and custom-footer to your footers, and on each button add a data-footer attribute pointing to the id of the corresponding footer. Then, you could do this:

document.querySelectorAll(".custom-button").forEach((button) => {
    button.addEventListener('click', (event) => {
        document.querySelectorAll(".custom-footer").forEach(footer => footer.style.display = 'none');

        let footer = button.getAttribute("data-footer");

        document.getElementById(footer).style.display = 'block';
    });
});

Quite shorter.

Answer 2

There is a common way to do this.

1. Share a class (foo) between all of the elements you want to group into your show/hide radio button-like functionality.

Then use one function, like

function handler = function(e) {
  var foos = document.getElementsByClass("foo");
  // make all foos display="none"
  var target = targets[e.target]; //get the footer to show from the target button
  target.style.display = "block";
}

Answer 3

You can use attribute selector to loop over elements.

[attributeName="value"]

^: Means starts with

$: Ends with

This way, your logic is generic and does not requires you to maintain any list of IDs

Idea:

• You can create a pattern where every button id will correspond to visibility to necessary footer. Better idea would be to use data attribute( data-<attr name> ) but you can work with id s for now.
• Loop over all the buttons and add handler using addEventListener . onClick is a property, so assignment will erase/ override previous value. You can either have inline anonymous function or a named function if you have too many buttons.
• In this handler, loop over all footers and hide them.
• Fetch index using this.id and show necessary footer. Its always better to use classes for such actions instead of setting styles.

 var buttons = document.querySelectorAll('[id^="btn"]'); Array.from(buttons, (button) => { button.addEventListener('click', function(event) { const footers = document.querySelectorAll('[id^="footer"]'); Array.from(footers, (footer) => footer.style.display = 'none' ); const index = this.id.match(/\d+/)[0]; document.getElementById(`footer${index}`).style.display = 'block'; }) })

 div[id^="footer"] { width: 100px; height: 100px; border: 1px solid gray; margin: 10px; }

 <div id="footer1"> Footer 1 </div> <div id="footer2"> Footer 2 </div> <div id="footer3"> Footer 3 </div> <div id="footer4"> Footer 4 </div> <button id="btn1"> Button 1 </button> <button id="btn2"> Button 2 </button> <button id="btn3"> Button 3 </button> <button id="btn4"> Button 4 </button>

References:

• Attribute Selector - MDN