How do I make a button change a certain value in my javascript application?

I'm creating a application using JS and HTML and was wondering how to implement a button that will update a value with the parameters of three items to choose from.

Here was I got so far:

This is how the "value" is displayed in html -

<div id="md" class="mdtxt">{mode}</div>

Using the following script to automatically update the value from default through js -

<script>
document.getElementById("md").innerHTML = currentMode;
</script>

Here is the js side of things -

script.js with

let currentMode = null;

(is nulled to demonstrate default)

config.js defines modes as

config.zones = [
    {
        modeid: 1,
        modetag: "Mode #1",
    },
    {
        modeid: 2,
        modetag: "Mode #2",
    },
    {
        modeid: 3,
        modetag: "Mode #3",
    },
]

Hopefully I gave a good understanding, now I want my html button to be able to cycle through the modes and then wrap back around to the first one in a continuous cycle.

I have a html button element with a id so the element would be id="btns1"

I've tried to use some code from a previous project, as well as watch so youtube tutorials but nothing seems to be helping me understand this.

If you are trying to change the content of a <div> when you click a button, and to cycle through different options for that content (for example listed in the config.zone variable in your case), you can do something like this (to stay close to what you already have):

<div id="md"></div>
<button onclick="selectMode()">Change Mode!</button>
    
<script>
    let config = Object // Ignore this, I need it because I don't know what your config variable is.
    config.zones = [
        {
            modeid: 1,
            modetag: "Mode #1",
        },
        {
            modeid: 2,
            modetag: "Mode #2",
        },
        {
            modeid: 3,
            modetag: "Mode #3",
        }
    ]
    
    let modeID = 1
    let currentMode = config.zones.filter((zone) => zone.modeid == modeID)[0].modetag
    document.getElementById("md").innerHTML = currentMode;
    function selectMode() {
        modeID = modeID < config.zones.length ? modeID + 1 : 1
        currentMode = config.zones.filter((zone) => zone.modeid == modeID)[0].modetag
        document.getElementById("md").innerHTML = currentMode;
    }
</script>

To create also different channels for each mode, you can create a property called channels, with a list of channels you want to cycle through for your mode. The rest is similar to changing the mode. For that purpose I changed the script a bit:

<div id="md"></div>
<div id="ch"></div>
<button onclick="changeMode()">Change Mode!</button>
<button onclick="changeChannel()">Change Channel!</button>
    
<script>
    let config = Object // Ignore this, I need it because I don't know what your config variable is.
    config.zones = [
        {
            modeid: 1,
            modetag: "Mode #1",
            channels: [1,2,3,4],
        },
        {
            modeid: 2,
            modetag: "Mode #2",
            channels: [5,6,7,8],
        },
        {
            modeid: 3,
            modetag: "Mode #3",
            channels: [10,11],
        }
    ]
    
    let modeID = 1;
    let channelIndex = 0;
    document.getElementById("md").innerHTML = set('mode');
    document.getElementById("ch").innerHTML = set('channel');
    function changeMode() {
        modeID = modeID < config.zones.length ? modeID + 1 : 1;
        currentMode = set('mode');
        channelIndex = 0;
        document.getElementById("md").innerHTML = set('mode');
        document.getElementById("ch").innerHTML = set('channel');
    }
    function changeChannel() {
        channelIndex = channelIndex < config.zones.filter((zone) => zone.modeid == modeID)[0].channels.length-1 ? channelIndex + 1 : 0
        document.getElementById("ch").innerHTML = set('channel');
    }
    function set(name='mode') {
        let mode = config.zones.filter((zone) => zone.modeid == modeID)[0]
        if (name == 'mode') {
            return mode.modetag
        } else if (name == 'channel') {
            return mode.channels[channelIndex]
        } else {
            console.log('Error! name needs to be either "mode" or "channel".');
        }
    }
</script>