Почему при клике появляется и исчезает?

Question

[marsel81]

Почему при клике на кнопку div блок появляется и тут же исчезает? Нужно сделать так, чтобы он оставался и при каждом клике менял букву в div

https://jsfiddle.net/Lsrbxje8/1/

Answer 1

[Andrew]

Есть мнение, что страница перегружается.
поставьте:
<button type="button" id="play">Играть!</button>
По дефолту - сабмит - форму отправляет.
а что ваш скрипт должен делатЬ?(по какому принципу менять?)
UPD: Чтобы заработал скрипт триггер на "onload" уберите

var ab = ["а", "б", "в", "г", "д", "е", "ж", "з", "и", "й", "к", 	"л", "м", "н", "о", "п", "р", "с", "т"];

    var LettersDiv = document.getElementById('letter');
    var playBtn = document.getElementById('play');
    
        playBtn.addEventListener('click',function(){
        var rand = 0;
        rand = 0 + Math.floor(Math.random() * (ab.length + 1));
        LettersDiv.innerHTML = ab[rand];

    })

Он иногда еще undefined кидает, потому что
"rand" становится > длины массива с буквами. Сделайте проверку на длину выхода.

rand = Math.floor(Math.random() * (ab.length + 1));
if(rand>=ab.length)rand = ab.length

Comments

[marsel81]

в таком случае он пишет: Cannot read property 'addEventListener' of null, если без onload

UPD исправил, но даже без onload он все равно исчезает

Answer 2

[Максим Тимофеев]

https://jsfiddle.net/Lsrbxje8/12/