Попытка изменить размер шрифта при нажатии кнопки на основе кода для цвета BG

Question

Я пытаюсь научиться создавать веб-сайты с помощью интерактивных учебных пособий, и я скопировал код из этого видео, чтобы изменить цвет фона при нажатии кнопки.https://www.youtube.com/watch?v=Wj9JpCuMV60

Я изменил код на этот

<button>Switch Colour</button>
    <script type="text/javascript">
        var color = ["#0ff000","#f0ff0f","#000f00","#00f0ff"]
        var i = 0;
        document.querySelector("button").addEventListener("click", 
        function(){
        i = i < color.length ? ++i : 0;
        document.querySelector("body").style.background = color [i]
        })
    </script>

Этот код работает, но когда я пытаюсь адаптировать код для изменения семейства шрифтов, он ничего не делает.

<button>Switch Colour</button>
        <script type="text/javascript">
            var color = ["#0ff000","#f0ff0f","#000f00","#00f0ff"]
            var i = 0;
            document.querySelector("button").addEventListener("click", 
            function(){
            i = i < color.length ? ++i : 0;
            document.querySelector("body").style.background = color [i]
            })
        </script>
<button>Switch Text Colour</button>
        <script type="text/javascript">
            var font-family = ["Helvetica","Impact"]
            var i = 0;
            document.querySelector("button").addEventListener("click", 
            function(){
            i = i < font-family.length ? ++i : 0;
            document.querySelector("body").style.body = font-family [i]
            })
        </script>

Почему верхний код работает, а нижний (мой) - нет?

Answer 1

Вместо

document.querySelector("body").style.body = font-family[i]

используйте:

document.querySelector("body").style.fontFamily = font-family[i]

или:

document.body.style.fontFamily = font-family[i]