Estou tendo problemas com um código que não funciona no meu projeto e alguns parecidos também não, alguém pode me ajudar? #2499

Thiggoz · 2024-09-06T18:46:46Z

Thiggoz
Sep 6, 2024

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo de exercício</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Verificador de idade</h1>
    </header>
    <section>
        <div>
            <p>Ano de Nascimento:
                <input type="number" name="txtano" min="0">
            </p>
            <p>Sexo:
                <input type="radio" name="radsex" id="mas" checked>
                <label for="mas">Masculino</label>
                <input type="radio" name="radsex" id="fem">
                <label for="fem">Feminino</label>
            </p>
            <p>
                <input type="button" value="Verificar" onclick="verificar()">
            </p>
        </div>
        <div id="res">
            Preencha os campos acima para verificar
        </div>
    </section>
    <footer>
        <p>&copy; ThiagoPintoso</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

JavaScript:

function verificar() {
    var data = new Date()
    var ano = data.getFullYear()
    var fano = document.getElementById('txtano')
    var res = document.getElementById('res')
    if (fano.value.length == 0 || Number(fano.value) > ano) {
        window.alert('[ERRO] Verifique os dados e tente novamente')
    } else {
        var fsex = document.getElementByName('radsex')
        var idade = ano - Number(fano.value)
        res.innerHTML = `Idade calculada ${idade}`
    }
}

CSS:

body {
    background: rgb(70, 142, 236);
    font: normal 15pt Arial;
}
header {
    color: white;
    text-align: center;
}

section {
    background: white;
    border-radius: 10px;
    padding: 15px;
    width: 500px;
    margin: auto;
    box-shadow: 3px 3px 10px rgb(0, 0, 0, 0.363);
}

footer {
    color: white;
    text-align: center;
    font-style: italic;
}

Diego-Girao · 2024-09-06T21:21:49Z

Diego-Girao
Sep 6, 2024

Então, tem alguns ajustes a ser feito, fiz alguns ajustes, compare com o seu código para entender melhor o que foi feito. Um detalhe no Javascript foi: var fsex = document.getElementsByName('radsex') faltou o s em Elements. E também evite usar var, utilize const ou let de acordo com a necessidade. Espero ter ajudado !!

HTML

<header>
    <h1>Verificador de idade</h1>
</header>
<section>
    <div>
        <p>Ano de Nascimento:
            <input type="number" name="txtano" id="txtano" min="0">
        </p>
        <p>Sexo:
            <input type="radio" name="radsex" id="mas" value="Masculino" checked>
            <label for="mas">Masculino</label>
            <input type="radio" name="radsex" id="fem" value="Feminino">
            <label for="fem">Feminino</label>
        </p>
        <p>
            <input type="button" value="Verificar" onclick="Verificar()">
        </p>
    </div>
    <div id="res">
        Preencha os campos acima para verificar
    </div>
</section>
<footer>
    <p>&copy; ThiagoPintoso</p>
</footer>

Javascript

const data = new Date();
const ano = data.getFullYear();
const fano = document.getElementById('txtano');
const res = document.getElementById('res');

function Verificar() {
    if (fano.value.length == 0 || Number(fano.value) > ano) {
        window.alert('[ERRO] Verifique os dados e tente novamente');
    } else {
        let fsex = document.getElementsByName('radsex');
        let idade = ano - Number(fano.value);
        let genero = '';

        // Loop through the radio buttons to find the selected one
        for (let i = 0; i < fsex.length; i++) {
            if (fsex[i].checked) {
                genero = fsex[i].value;
                break;
            }
        }

        res.innerHTML = `Idade calculada: ${idade}. Gênero: ${genero}`;
    }
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Estou tendo problemas com um código que não funciona no meu projeto e alguns parecidos também não, alguém pode me ajudar? #2499

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Estou tendo problemas com um código que não funciona no meu projeto e alguns parecidos também não, alguém pode me ajudar? #2499

Uh oh!

Thiggoz Sep 6, 2024

Replies: 1 comment

Uh oh!

Diego-Girao Sep 6, 2024

HTML

Javascript

Thiggoz
Sep 6, 2024

Diego-Girao
Sep 6, 2024