Вывод массива js

[ramsey]

Здравствуйте. Подскажите, как правильно реализовать переход по элементам массива и их вывод в js.

              <script> 
                $(document).ready(function(){
                        $("#get_element" ).click(function(){
                        
                        // Кликнули на элемент с id = get_element
                        // ???
                    });
                });
                
            </script>

Задача: нажав на элемент с id = get_element меняется текст, совпадающий с кол-вом нажатий.

Пример массива: "Выбрать", "Яблоко", "Груша", "Ананас".

Теоретически понимаю, как это реализуется, но синтаксис не знаю. Добавить в данном случае условие, когда счетчик будет равен последнему элементу - возвращаться на 0 (Выбрать)

<button class="btn btn-primary btn-outline-white px-5 py-3" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Выбрать <!-- Вывод выбранного слова из массива -->
                    
</button>

 

[ramsey]

<a href="#" id = "get_element"> click</a>

 <script> 
                $(document).ready(function(){
                
                    let list = ['Выбрать', 'Яблоко', 'Груша', 'Ананас', 'Банан'];
                    var get_element_num = [];
                    
        
                        $("#get_element" ).click(function(){
                        
                            alert(list[get_element_num]);
                            
                            if(get_element_num == 4) {
                                get_element_num = 0;
                            }else{
                                get_element_num++;
                            }
                            
                            
                    });
                });
                
                
            </script>

В общем, сделал так, но почему-то при первом нажатии, в alert передается undefined, после чего все нормально.
В чем ошибка?
var get_element_num = [];

->

var get_element_num = 0;

Решил. Если есть у кого-то варианты лучше - буду благодарен.
Подскажите, как вывести list[get_element_num] в html, а не через alert?

<button class="btn btn-primary btn-outline-white px-5 py-3" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Здесь как вывести массив этот?
                    
</button>

 

[angrybot]

function onClick() {
    if (index < dataset.length) {
        index++;
        document.getElementBy...(value).innerHTML = list[index];
    }
    else  index = 0;
};

const list = [ "Яблоко" , "Груша" , "Ананас" , "Банан"];
var index = 0;

<button type="button" onClick="onClick()">Click</button>

 

[ramsey]

angrybot, извиняюсь, конечно, но не сработало. Может, я что-то не так сделал?)

            <button class="btn btn-primary btn-outline-white px-5 py-3" onClick="onClick()">
            
            
            
            <script> 
                function onClick() {
                if (index < dataset.length) {
                    index++;
                    document.getElementBy...(value).innerHTML = list[index];
                }
                else  index = 0;
                };

                const list = [ "Яблоко" , "Груша" , "Ананас" , "Банан"];
                var index = 0;

            </script>

            

            </button>

 

[angrybot]

Всё.

 

[fantom]

function onClick() {
    if (index < dataset.length) {
        index++;
        document.getElementBy...(value).innerHTML = list[index];
    }
    else  index = 0;
};

const list = [ "Яблоко" , "Груша" , "Ананас" , "Банан"];
var index = 0;

<button type="button" onClick="onClick()">Click</button>

const не будет виден в функции так как обьявлен ниже и не имеет такого свойства как var "всплывать". Да и var использовать не рекомендуется

 

[angrybot]

Будет, это не анонимная функция вызывающаяся до объявления переменной (между функцией и переменной так же нет никаких операций), насчет var - в данном случае он подходит наверное больше чем let, а объективно - разницы никакой, у него это глобальные переменные похоже.

https://jsfiddle.net/3pL9t5dw/

 

[fantom]

angrybot, а ну да, привычка уже видеть не просто функции выражения, а не декларированные

 

[ramsey]

angrybot, так а вывести как?! Мой вариант функционировал. но результат я мог вывести только в alert.
Как мне вывести его в html ?

<button type="button" onClick="onClick()"> Массив </button>

Хотя бы здесь. Я про это спрашиваю.