Error after calling Event

Asked

Viewed 28 times

-2

After calling the Event click on the button, the calculation appears with no result and the HTML that entered through the JS disappears from the screen right after the call. PS: Ignore developing CSS!

/*
    Forma de fazer números aleatórios em um intervalo;

    const num1 = 5
    const num2 = 10

    console.log(Math.floor(Math.random() * (num2 - num1)) + num1)
*/

// Pegar os dois números e inserir no cálculo ---------------------------------

const number1 = document.querySelector("#sorteador1").value
const number2 = document.querySelector("#sorteador2").value
const resultHtml = document.querySelector("#result")
const btn = document.querySelector("#btn")
let calculo = Math.floor(Math.random() * (number2 - number1)) + number1

//Evento de clique no Botão "Sortear" -----------------------------------------

function lucky() {
    return resultHtml.innerHTML = `<h3>O número sorteado foi: ${calculo}</h3>`
}

btn.addEventListener("click", lucky)
:root {
    --color-header-bg: #f8dbc9;
    --color-font: #033d68;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffe7d9;
}

header {
    background-color: var(--color-header-bg);
    border-bottom: 2px solid var(--color-font);
    padding-bottom: 15px;
}

img {
    transform: translateX(900px);
    border-radius: 30%;
    box-shadow: 3px 2px 0px 4px #F2D4C2;
}

form {
    text-align: center;
    margin: 205px 500px;
    padding: 30px 50px;
    border: 3px solid var(--color-font);
    border-radius: 5px;
    box-shadow: 3px 2px 0px 4px #F2D4C2;
    background-color: var(--color-header-bg)
}

span {
    font-size: 80px;
    font-weight: bold;
    color: var(--color-font);
    text-transform: uppercase;
    text-shadow: 5px 3px 0px #F2D4C2;
}

input {
    border: 1px solid var(--color-font);
    border-radius: 4px;
    height: 80px;
    padding-top: 40px;
}

button {
    border: 3px solid var(--color-font);
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 790px;
    margin-top: 15px;
    text-align: center;
    position: absolute;
    top: 570px;
    left: 570px;
}

.sortear {
    font-size: 75px;
    font-weight: bold;
    color: var(--color-font);
    text-transform: uppercase;
    cursor: pointer;
}

button:hover {
    background-color: #F2D4C2;
    box-shadow: 3px 2px 0px 4px #F2D4C2;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="Imagem/SORTEADOR-FAVICON.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <title>Sorteador</title>
</head>

<body>
    <header>
        <a href="index.html">
            <nav>
                <img src="Imagem/SORTEADOR-header.png" alt="Logo Sorteador" srcset="" width="150px">
            </nav>
        </a>
    </header>

    <main>
        <form id="formulary">
            <span>Sortear de </span>
                <input type="number" id="sorteador1" name="num1" min="1" max="10000">
            <span> a </span>
                <input type="number" id="sorteador2" name="num1" min="1" max="10000">
        </form>

        <button form="formulary" id="btn">
            <span type="button" class="sortear">Sortear</spa>
        </button>

        <div id="result"></div>

        <script src="btn.js"></script>
    </main>
</body>
</html>

javascript html event-listener

1 answer

0


Hello!

Well, two main points:

When updating the page, by default, clicking the button would create a Ubmit in your form. To prevent this, in the button click event it is necessary to include a preventDefault();

More about the preventDefault(): https://www.w3schools.com/jsref/event_preventdefault.asp

Regarding the execution of the draw, the code that took the values and made the calculation was being executed when the page was loaded, before the user put the values or press the button. In this case as you need it only after the fill and click, it should be called with the click event.

In this case, I put it inside your Lucky function to test. To further organize your code, you can separate it within another function after.

Follow the modified code below

/*
    Forma de fazer números aleatórios em um intervalo;

    const num1 = 5
    const num2 = 10

    console.log(Math.floor(Math.random() * (num2 - num1)) + num1)
*/

//Evento de clique no Botão "Sortear" -----------------------------------------

function lucky(event) {

    event.preventDefault();
    
    // Pegar os dois números e inserir no cálculo ---------------------------------
    const number1 = parseInt(document.querySelector("#sorteador1").value);
    const number2 = parseInt(document.querySelector("#sorteador2").value);
    const resultHtml = document.querySelector("#result");
    const btn = document.querySelector("#btn");
    let calculo = Math.floor(Math.random() * (number2 - number1)) + number1;

    return resultHtml.innerHTML = `<h3>O número sorteado foi: ${calculo}</h3>`
}

btn.addEventListener("click", lucky)
:root {
    --color-header-bg: #f8dbc9;
    --color-font: #033d68;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ffe7d9;
}

header {
    background-color: var(--color-header-bg);
    border-bottom: 2px solid var(--color-font);
    padding-bottom: 15px;
}

img {
    transform: translateX(900px);
    border-radius: 30%;
    box-shadow: 3px 2px 0px 4px #F2D4C2;
}

form {
    text-align: center;
    margin: 205px 500px;
    padding: 30px 50px;
    border: 3px solid var(--color-font);
    border-radius: 5px;
    box-shadow: 3px 2px 0px 4px #F2D4C2;
    background-color: var(--color-header-bg)
}

span {
    font-size: 80px;
    font-weight: bold;
    color: var(--color-font);
    text-transform: uppercase;
    text-shadow: 5px 3px 0px #F2D4C2;
}

input {
    border: 1px solid var(--color-font);
    border-radius: 4px;
    height: 80px;
    padding-top: 40px;
}

button {
    border: 3px solid var(--color-font);
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 790px;
    margin-top: 15px;
    text-align: center;
    position: absolute;
    top: 570px;
    left: 570px;
}

.sortear {
    font-size: 75px;
    font-weight: bold;
    color: var(--color-font);
    text-transform: uppercase;
    cursor: pointer;
}

button:hover {
    background-color: #F2D4C2;
    box-shadow: 3px 2px 0px 4px #F2D4C2;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="Imagem/SORTEADOR-FAVICON.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <title>Sorteador</title>
</head>

<body>
    <header>
        <a href="index.html">
            <nav>
                <img src="Imagem/SORTEADOR-header.png" alt="Logo Sorteador" srcset="" width="150px">
            </nav>
        </a>
    </header>

    <main>
        <form id="formulary">
            <span>Sortear de </span>
                <input type="number" id="sorteador1" name="num1" min="1" max="10000">
            <span> a </span>
                <input type="number" id="sorteador2" name="num1" min="1" max="10000">
        </form>

        <button form="formulary" id="btn">
            <span type="button" class="sortear">Sortear</spa>
        </button>

        <div id="result"></div>

        <script src="btn.js"></script>
    </main>
</body>
</html>

Hug!

Browser other questions tagged javascript html event-listener

You are not signed in. Login or sign up in order to post.