On way to change text

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<span id="container"></span>

<div class="button">
    <button onclick="A1()">Text from first array</button>
    <button onclick="B1()">Text from second array</button>
    <button onclick="C1()">Text from third array</button>
</div>


<script type="text/javascript">

    var txtContainer = document.getElementById('container');
    var txtIndex = 0;
    var txtArrayA = ['1a','2a','3a'];
    var txtArrayB = ['1b','2b','3b'];
    var txtArrayC = ['1c','2c','3c'];

    function A1(){
        txtContainer.innerHTML = txtArrayA[txtIndex];
        txtIndex++;
        if (txtIndex >= 3){txtIndex = 0};
    }


</script>

</body>
</html>