Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

button desaparece após executar função

Olá,

A intenção é ter um botão que, ao clicar, escreva-se na tela um número aleatório de 1 a 6 (dado convencional).

Consegui fazer a lógica do dado (aparentemente), mas ao clicar a primeira vez no botão, ele desaparece. Por quê?

Segue código abaixo.

Obrigado,

<meta charset="UTF-8">

<button>Roll</button>

<script>

function printResult(text) {

    document.write(result);
}

function gamble() {

    return Math.round(Math.random()*10)
}

function checkDice() {

    while(result > 6 || result == 0) {
        result = gamble();
    }
    printResult();
}
var result = gamble();
var button = document.querySelector("button");
button.onclick = checkDice;

</script>
2 respostas
solução!

Com o "document.write(result)", voce está escrevendo o texto diretamente no documento HTML, sendo assim, o button que estava no HTML, voce reescreveu o Html e não adicionou o button ao seu html novamente.

<meta charset="UTF-8">

<button>Roll</button>

<label></label>

<script>

function printResult() {

    // Write some text directly to the HTML document
    // https://www.w3schools.com/jsref/met_doc_write.asp
    // document.write(result);

    label.textContent  = result;
}

function gamble() {

    return Math.round(Math.random()*10)
}

function checkDice() {

    while(result > 6 || result == 0) {
        result = gamble();
    }
    printResult();
}

var result = gamble();
var button = document.querySelector("button");
var label = document.querySelector("label");
button.onclick = checkDice;

</script>

espero ter ajudado.

Obrigado, Rodrigo!

Eu fiz algumas mudanças no código. Para "resolver" o problema com o conhecimento que eu tenho hoje (acabei de terminar o primeiro curso de Lógica de Programação I), troquei o document.write por alert.

O código antes de eu conhecer a sua solução estava assim:

<meta charset="UTF-8">
Digite o número de faces do dado: <input>
<button>Roll</button>

<script>

function printResult(text) {

    alert(result);
       result = gamble();
}

function gamble() {

    return Math.round(Math.random()*10)
}

function checkDice() {

    var dDice = input.value;

    if (dDice == 0) {
        alert("Número de face não pode ser igual a zero!")
    }
    else {
    while(result > dDice || result == 0) {
        result = gamble();
    }
       printResult();    
    }
}

var result = gamble();
var input = document.querySelector("input")
var button = document.querySelector("button");
button.onclick = checkDice;

</script>

Após a sua contribuição, ficou assim (bem melhor):

<meta charset="UTF-8">
Digite o número de faces do dado: <input>
<button>Roll</button>

<label></label>

<script>

function printResult() {

    label.textContent = result;
    result = gamble();
}

function gamble() {

    return Math.round(Math.random()*10)
}

function checkDice() {

    var dDice = input.value;

    if (dDice == 0) {
        alert("Número de face não pode ser igual a zero!")
        label.textContent = "";
    }
    else {
    while(result > dDice || result == 0) {
        result = gamble();
    }
       printResult();    
    }
}

var result = gamble();
var button = document.querySelector("button");
var label = document.querySelector("label");
button.onclick = checkDice;
var input = document.querySelector("input");

</script>

Mais uma vez, obrigado!

Abs,