Javascript - 脚本在第二次单击时不起作用

Question

A basic question by a newbie…

I always encounter the same problem: I often want an element "A" to show an element "B" on click when "B" is hidden, but to hide it when it is visible. Here are two different try that doesn't work:

 let ref = document.getElementsByTagName('sup'); let refContent = document.getElementsByTagName('i'); for(let i = 0; i < ref.length; i++) { ref[i].addEventListener('click', function() { if (refContent[i].style.display == "inline") { refContent[i].style.display = "none"; } else { refContent[i].style.display = "none"; }; }); }

 let ref = document.getElementsByTagName('sup'); let refContent = document.getElementsByTagName('i'); for(let i = 0; i < ref.length; i++) { if (refContent[i].style.display == "") { ref[i].addEventListener('click', function() { refContent[i].style.display = "inline"; }); } else { ref[i].addEventListener('click', function() { refContent[i].style.display = "none"; }); } }

Answer 1

Hi

I'm gonna change some variable names to make this easier to talk about. So, you start off strong

    // get all elements with tag sup
    let buttons = document.getElementsByTagName('sup'); 
    //get all elements with tag i
    let showables = document.getElementsByTagName('i');

For each element buttons we want to bind an onclick event listener . showables should respond to those clicks. You write

    //for every `button` bind this `event listener`
    buttons[i].addEventListener('click', function() {
        if (showable[i].style.display == "inline") {
            showable[i].style.display = "none";
        } else {
            showable[i].style.display = "none";
        };
    });
}

To make this a little more clear lets take out the function and give it a name

let show_hide = function(i) {
        if (showable[i].style.display == "inline") {
            showable[i].style.display = "none";
        } else {
            showable[i].style.display = "none";
        };
});

//for each button, bind show_hide
for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', show_hide(i))
}

The loop there does exactly what you'd expect; it binds show_hide to each button . What does show_hide do?

    //if the element is shown, hide it
    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    //if the element is not shown, hide it
    } else {
        showable[i].style.display = "none";
    };

as you can see that no matter what, show_hide hides the element. so a quick change will fix this for you.

    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    //if not shown, show
    else {
****    showable[i].style.display = "inline";
    };

putting it all together, this should work

let show_hide = function(i) {
    if (showable[i].style.display == "inline") {
        showable[i].style.display = "none";
    } else {
        showable[i].style.display = "inline";
    };
});

//for each button, bind show_hide
for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', show_hide(i))
}

If you want my solution to this problem I'd be more than willing to solve this problem in my own way. Comment and let me know! I hope this helps

fin

Answer 2

I will interpret what you have written but I do not have the complete code I will fix some issues and update if/when you update your code by adding the markup (html).

You should put your selected elements in an array because some browsers will not let you loop over a NodeLists. You can change a NodeLists into an array in a few ways I like the Array.From() way. After changing the NodeLists into an array you can safely loop over the elements in the array using a forEach() loop.

let ref = Array.from(document.getElementsByTagName('sup'));
let refContent = Array.from(document.getElementsByTagName('i'));
ref.forEach(el => {
    el.addEventListener('click', e => {
        e.target.getElementsByTagName('i').style.display = '' // do something
    });
});

This snippet will most likely not work as-is, I'm missing information to finish this script, but perhaps this is a good starting point for further exploration. (Search for stuff and add 'mdn', to get good results).

In stead of directly changing the style of an element it is better to either add or remove a css class which contains the css properties you desire. You can also toggle a class: element.toggle('className) .