Add values in the field by pressing the 'enter' key and reset these values with the 'reset' button in Javascript

Asked

Viewed 31 times

-2

What do you say? How can I add values in the field by pressing the 'enter' key instead of clicking the 'add' button and how to reset these values within the 'select' button with the 'reset' button with Javascript?

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analisador de Números</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header><h1>Verificador de Número</h1></header>
    <section>
        <label for="numero">Digite um número (de 1 a 100): </label><input type="number" id="numero"> <input type="button" id="numero" value="adicionar" onclick="adicionar()">
        <select name="campo" id="campo" size="10"></select>
        <br>
        <button onclick="verificar()">Verificar</button>
        <div id="result">Aguardando valores...</div>
        <button onclick="zerar()">Zerar</button>
    </section>



    <script src="script.js"></script>
    <footer><p>&#169;CursoemVideo</p></footer>
</body>
</html>

JS:

let numero = document.querySelector('input#numero')
let campo = document.querySelector('select#campo')
let valores = []
let result = document.querySelector('div#result')
let soma = 0
let media = 0

function adicionar() {
    if(numero.value.length == 0) {
        alert('Digite valores abaixo')
    }else if(numero.value < 1 || numero.value > 100) {
        alert('Digite um número entre 1 e 100')
    }else {
        if(valores.indexOf(Number(numero.value)) != -1) {
            alert('Esse número já foi adicionado')
        }else {
            valores.push(Number(numero.value))
            let item = document.createElement('option')
            item.text = `Número ${Number(numero.value)} adicionado.`
            campo.appendChild(item)
            soma += Number(numero.value)
            media = parseFloat(soma / valores.length).toFixed(2)
            numero.value = ''
            numero.focus()
        }
    }
}

function verificar() {
    let maior = valores[0] 
    let menor = valores[0]
    let cont = 0
    while(cont < valores.length) {
        if(valores[cont] > maior) {
            maior = valores[cont]
        }else if(valores[cont] < menor) {
            menor = valores[cont] 
        }
        cont++
    }

    if(valores.length == 0) {
        alert('Digite valores acima')
    }else {
        let qtd = valores.length
        result.innerHTML =`<p>Você digitou ${qtd} números</p>`
        result.innerHTML +=`<p>A soma dos números deu ${soma}</p>`
        result.innerHTML += `<p>A média dos números deu ${media}</p>`
        result.innerHTML += `<p>O maior número é ${maior}</p>`
        result.innerHTML += `<p>O menor número é ${menor}</p>`
    }
}

function zerar() {
    valores.item = ''
    result.innerHTML = ''
}

CSS:

*{
    font-family: Arial, Helvetica, sans-serif;
}

header {
    color: white;
    text-align: center;
}

body {
    background-color: rgb(72, 72, 219);
}

section {
    max-width: 600px;
    background-color: white;
    margin: 0 auto;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

section .num {
    text-align: center;
}

section select {
    width: 150px;
    margin-bottom: 5px;
}

section #result {
    margin: 20px auto 0 auto;
}

section #result {
    margin-bottom: 20px;
}

footer {
    text-align: center;
    font-style: italic;
    color: white;
}
javascript html select option

1 answer

1


Hello, to reset 'select', you were doing it right but used the wrong variable. It should be:

function zerar() {
    valores.item = ''
    campo.innerHTML = ''
}

To call the check function with enter, you can use the function keycode and compare with the enter key, which is 13

window.addEventListener('keypress', e => {
    if(e.keyCode === 13){
        verificar()
    }
})

  • And then Andre, that’s exactly it, it worked out here, thank you very much!

  • Glebson Show, happy to help :)

Browser other questions tagged javascript html select option

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