How to toggle font-family to different button elements

Question

I want to toggle a CSS style to the button elements. The problem is that the JavaScript code is not working.

This is what I did. The changeFont() function is not working.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
    <style>
        .invisible {
            font-family: 'Anton' 'sans-serif';
        }
    </style>
</head>
<body>
    <button onclick="changeFont()">Abraham Abah</button>
    <button onclick="changeFont()">Work</button>
    <button onclick="changeFont()">Lab</button>
    <script>
        function changeFont() {
            let toggleFontFamily = document.querySelectorAll("button");
            for (let i = 0; i < toggleFontFamily.length; i++) {
                if (toggleFontFamily[i] == toggleFontFamily[0]) {
                    toggleFontFamily[0].classList.toggle("invisible");
                } else if (toggleFontFamily[i] == toggleFontFamily[1]) {
                    toggleFontFamily[1].classList.toggle("invisible");
                } else {
                    toggleFontFamily[2].classList.toggle("invisible");
                }
            }
        }
    </script>
</body>
</html>

Does this answer your question? [How to loop through selected elements with document.querySelectorAll](https://stackoverflow.com/questions/12330086/how-to-loop-through-selected-elements-with-document-queryselectorall) — 0stone0, Jul 10 '23 at 14:21
Why won't you do `toggleFontFamily[i].classList.toggle("invisible");` instead off the `if`'s? — 0stone0, Jul 10 '23 at 14:22
It is a typo, you need a comma to separate your fonts **font-family: 'Anton','sans-serif';** But for your javascript remove ALL of your if statements and just have one toggle. The whole point of toggle is for your browser to detect if the class exists or not and what to do with it. — imvain2, Jul 10 '23 at 14:34

score 2 · Answer 1 · answered Jul 10 '23 at 14:32

It is a lot simpler than what you just coded. Just check my solution. And also you missed a , to separate the fonts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
    <style>
        .invisible {
            font-family: 'Anton', 'sans-serif';
        }
    </style>
</head>
<body>
    <button>Abraham Abah</button>
    <button>Work</button>
    <button>Lab</button>
    <script>
        let toggleFontFamily = document.querySelectorAll("button");

        for (i = 0; i < toggleFontFamily.length; i++) {
            toggleFontFamily[i].addEventListener('click', function(){
                this.classList.toggle('invisible');
            })
        }        
    </script>
</body>
</html>

How to toggle font-family to different button elements

1 Answers1