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

[Dúvida] Manipular dados no JavaScript

Olá pessoal,

Estou criando um projeto, pelo qual o usuário seleciona dois números ou string que irão realizar comparações.

<body>

    <p>Escolha o primeiro número/string para comparação:</p>
    <select id="primeiro__valor">
        <option>--Selecione o valor</option>
        <option value="1">1</option>
        <option value="1">'1'</option>
        <option value="30">30</option>
        <option value="30">'30'</option>
        <option value="10">10</option>
        <option value="10">'10'</option>
    </select>

    <p>Escolha o segundo número/string para comparação:</p>
    <select id="segundo__valor">
        <option>--Selecione o valor</option>
        <option value="1">1</option>
        <option value="1">'1'</option>
        <option value="30">30</option>
        <option value="30">'30'</option>
        <option value="10">10</option>
        <option value="10">'10'</option>
    </select>

    

    <script src="day1.js"></script>
</body>

A partir do recebimento desses dois valores pelo HTML, quero realizar uma manipulação de dados pelo JS, onde comparo se os dois valores são iguais, porém com tipos diferentes (string e number).

Todos os valores recebidos entram como string, assim tive que criar uma conversão usando o parseInt para os números que realmente são do tipo number, serem números.

Porém o grande problema agora é realizar as comparações com os números já convertidos e imprimindo se realmente há uma comparação.

let selectPrimeiroValor = document.getElementById('primeiro__valor');
let selectSegundoValor = document.getElementById('segundo__valor');

const numeroUm = parseInt(selectPrimeiroValor[1].value);
const stringUm = selectPrimeiroValor[2].value;
const numeroTrinta = parseInt(selectPrimeiroValor[3].value);
const stringTrinta = selectPrimeiroValor[4].value;
const numeroDez = parseInt(selectPrimeiroValor[5].value);
const stringDez = selectPrimeiroValor[6].value;


selectPrimeiroValor.addEventListener('change', function(){
    
})


selectSegundoValor.addEventListener('change', function(){

})
3 respostas

Olá Lucas! Tudo bem contigo?

Para comparar os valores recebidos no JavaScript, você pode utilizar os operadores de comparação, como o === para comparar se os valores são iguais e do mesmo tipo.

No seu código, você já está convertendo os valores para números utilizando o parseInt, o que é correto. Agora, dentro dos eventos de mudança dos selects, você pode realizar as comparações e imprimir o resultado.

Por exemplo, dentro do evento de mudança do primeiro valor, você pode fazer o seguinte:

selectPrimeiroValor.addEventListener('change', function(){
    const valorSelecionado = selectPrimeiroValor.value;
    const valorConvertido = parseInt(valorSelecionado);

    if (valorConvertido === numeroUm) {
        console.log("O primeiro valor é igual a 1");
    } else if (valorSelecionado === stringUm) {
        console.log("O primeiro valor é igual a '1'");
    } else if (valorConvertido === numeroTrinta) {
        console.log("O primeiro valor é igual a 30");
    } else if (valorSelecionado === stringTrinta) {
        console.log("O primeiro valor é igual a '30'");
    } else if (valorConvertido === numeroDez) {
        console.log("O primeiro valor é igual a 10");
    } else if (valorSelecionado === stringDez) {
        console.log("O primeiro valor é igual a '10'");
    }
});

Você pode fazer algo similar para o evento de mudança do segundo valor.

Dessa forma, você estará comparando os valores selecionados com os valores previamente definidos e imprimindo a comparação correspondente.

Espero ter ajudado e bons estudos!

solução!

Fala caro, Renan.

Primeiramento quero agradecer pelo retorno meu amigo. Sem sua ajuda, não conseguiria abrir mais minha cabeça para resolver este problema.

Sobre o que você me respondeu, o código que você me enviou não resolve o meu problema. Perceba que você criou um parseInt para todos os elementos do selectPrimeiroValor.value, fazendo assim, até os números que são realmente string, serem convertidos. Analisei também que não há necessidade também de uma segunda varíavel. Podemos utilizar uma variável let, alterando a variável caso o select seja um número, sendo assim estou encaminhando o código corrigido para você ver.

selectPrimeiroValor.addEventListener('change', function(){
  
  let primeiroValorSelecionado = selectPrimeiroValor.value;
  
  //realizando a conversão string para números caso o usuário escolha a opção number
  if(selectPrimeiroValor[1].selected == true || selectPrimeiroValor[3].selected == true || selectPrimeiroValor[5].selected == true){
    primeiroValorSelecionado = parseInt(primeiroValorSelecionado);
  }
  
  if (primeiroValorSelecionado === numeroUm) {
    console.log("O primeiro valor é igual a 1");
  }
  else if (primeiroValorSelecionado === stringUm){
    console.log("O primeiro valor é igual a '1'");
  }
  else if (primeiroValorSelecionado === numeroTrinta){
    console.log("O primeiro valor é igual a 30");
  }
  else if (primeiroValorSelecionado === stringTrinta){
    console.log("O primeiro valor é igual a '30'");
  }
  else if (primeiroValorSelecionado === numeroDez){
    console.log("O primeiro valor é igual a 10");
  }
  else if (primeiroValorSelecionado === stringDez){
    console.log("O primeiro valor é igual a '10'");
  }
   
})

Desde então, agradeço sua ajuda.

Olá Lucas, eaí tudo bem?

Fico feliz em ver que você está se dedicando ao projeto e encontrou uma solução para o problema! Você fez um ótimo trabalho ao refinar o código e torná-lo mais eficiente, além de lidar de forma adequada com as conversões entre strings e números.

Realmente, sua abordagem de utilizar uma única variável let e verificar se o usuário escolheu uma opção numérica antes de realizar a conversão com parseInt é uma forma mais elegante e concisa de tratar essa situação. Além disso, você organizou as comparações de maneira clara e legível.

É importante lembrar que, ao desenvolver projetos, sempre buscamos melhorar e otimizar nossas soluções. Com isso em mente, parabéns por ter a iniciativa de revisar o código e aprimorá-lo para alcançar o resultado desejado.

Se surgir qualquer outra dúvida ou se precisar de mais ajuda, não hesite em me perguntar. Estou à disposição para apoiá-lo em seu aprendizado e no desenvolvimento do projeto.

Continue assim, com dedicação e entusiasmo! Tenho certeza de que você vai se sair muito bem em suas empreitadas. Estou torcendo por seu sucesso!

Grande abraço e bons estudos!