Entrar Ainda não tem acesso?
1
resposta

[Dúvida] duvida arrebatadora

por Jorge Henrique Nicolau da Silva
| 102k xp | 105 posts

Eu estou fazendo um programa com código de html , css e javascript, eu estou com problema na parte de css, pois eu tou querendo mudar a cor do botão ou o código input type="button" value="somar" mas não consigo, como se faça afinal? para entender melhor vou inserir os dados! 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Somando Números</title>
</head>
<body>
    <h1>Somando Valores</h1>
    <input type="number" name="txn1" id="txn1">
    <input type="number" name="txn2" id="txn2">
    <input type="button" value="somar" onclick="somar()">
    <div id="res">Resultado</div>

  
</body>
</html>

body {
  text-align: center;
}

h1 {
  color: blue;
}

function somar() {
        var tn1 = document.getElementById('txtn1')
        var tn2 = document.getElementById('txtn2')
        var res = document.getElementById('res')
        var n1 = number(tn1.value)
        var n2 = number(tn2.value)
        var s = n1 + n2 
        res.innerHTML = `A soma entre ${n1} e ${n2} é igual a ${s}`
    }
1 resposta
por Lorena Garcia
| 14188.8k xp | 21263 posts
Instrutor

Oi, Jorge! Tudo bem?

Entendo perfeitamente a sua frustração. Quando estamos começando, é muito comum as coisas não mudarem de cor ou não funcionarem como esperado por detalhes pequenos no código.

Para mudar a cor do seu botão e também fazer o seu cálculo funcionar (notei alguns pontinhos no seu JavaScript que vão impedir o resultado de aparecer), preparei um guia passo a passo para você.

1. Como mudar a cor do botão no CSS

Usando um ID (Recomendado)
Primeiro, mude seu HTML para:
<input type="button" value="somar" id="btn-somar" onclick="somar()">

Depois, no CSS:

#btn-somar {
    background-color: green;
    color: white;
}

2. Ajustes no seu JavaScript

Percebi que o seu cálculo pode não funcionar por dois motivos:

  1. Nomes de ID trocados: No HTML você usou id="txn1", mas no JavaScript tentou buscar txtn1 (com um "t" extra). Eles precisam ser idênticos.
  2. Letra maiúscula: Em JavaScript, o comando para converter texto em número deve começar com "N" maiúsculo: Number().

Veja como o seu código corrigido deve ficar:

function somar() {
    // Note que removi o "t" extra para bater com o ID do seu HTML
    var tn1 = document.getElementById('txn1') 
    var tn2 = document.getElementById('txn2')
    var res = document.getElementById('res')
    
    // O "N" de Number precisa ser maiúsculo
    var n1 = Number(tn1.value)
    var n2 = Number(tn2.value)
    
    var s = n1 + n2 
    
    res.innerHTML = `A soma entre <strong>${n1}</strong> e <strong>${n2}</strong> é igual a <strong>${s}</strong>`
}

Por que usar IDs?

Usar IDs é uma boa prática porque ajuda o navegador a encontrar exatamente o elemento que você quer estilizar ou manipular, sem risco de alterar outros botões que você venha a criar depois.

Tente aplicar essas mudanças no seu projeto. Se o botão ainda não mudar de cor, verifique se o seu arquivo CSS está corretamente vinculado no <head> do HTML através da tag <link>.

Aqui no CodePen tem o seu projeto ajustado, se quiser ver.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA