Заменить «Undefined» на текст

Question

Я пытаюсь заменить «undefined» при отображении массива, который стал пустым.

Вот упрощенная версия программы, в которой пользователь будет уменьшать массив каждый раз, когда кнопка нажата. Когда массив пуст, если пользователь продолжает нажимать кнопку, я бы хотел, чтобы текст заменил «undefined».

Я играл с инструкциями «while», а также «typeof», но я не могу заставить его работать.

<script> 
    basket = ['Apples', 'Bananas', 'Pears']; 

    function showFruit() { 
    var i = 0; // the index of the current item to show 
    fruitDisplay = setInterval(function() { 
     document.getElementById('fruit') 
      .innerHTML = basket[i++]; // get the item and increment 
     if (i == basket.length) i = 0; 
            // reset to first element if you've reached the end 
    }, 100); //speed to display items 

    var endFruitDisplay = setTimeout(function() { 
     clearInterval(fruitDisplay); 

     var index = basket.indexOf(document.getElementById('fruit').innerHTML); 
     basket.splice(index, 1); //remove last shown 

    }, 1000); //stop display after x milliseconds 

    remain = basket.length; 
    document.getElementById("remaining").innerHTML = remain; 

    return showFruit; 
} 

    //if (typeof(basket) == undefined) { 
    //fruit = 'Finished'; 
    //} 

</script> 

    <h1><span id = 'fruit'></span> </h1> 
    Remaining: <span id="remaining"></span> 


<button onclick="showFruit()">Random Fruit</button> 

Answer 1

Просто тест, если массив пуст.

if (basket.length == 0) { 
    document.getElementById("fruit").innerHTML = "No fuits left"; 
} else { 
    document.getElementById('fruit') 
     .innerHTML = basket[i]; 
    i = (i + 1) % basket.length // increment with wraparound 
} 

Answer 2

Я вижу комментируемого код ... попробуйте ...

if (typeof basket === "undefined") { 
    fruit = 'Finished'; 
} 

В принципе, это правильный способ сравнения typeof против undefined. Хотя переменная TypeOf не будет определен, так что ...

Вы также можете проверить по длине массива ...

if (basket.length === 0) { 
    fruit = 'Finished'; 
}