javascript Calculadora com visor colorido

[Sergiojr 0]

Saudações a todos.

 

É possível, em Javascript ou outra linguagem semelhante, alterar a cor apenas de um único valor recebido, sem alterar a cor de todos os demais valores recebidos anteriormente em um mesmo input text ou textarea?

 

Um exemplo: Imagine uma calculadora(independente das funções, apenas layout), ela foi "desenhada" com o botão 7 em vermelho, o botão 8 em azul, etc, demais botões e suas cores..

Então quando clicado, o visor recebe o número 7 e atribui o vermelho a ele ou o número 8 e atribui o azul a ele, sem prejudicar a cor do 7, caso este já tenha sido recebido, por exemplo, na concatenação, formando um 78 colorido.

 

Esclarecimento final: é claro que não desejo fazer uma calculadora colorida. Mas um script voltado para esta ideia, será facilmente adaptado para a real necessidade, que é bem complicada de explicar.

 

Alguém pode me ajudar com sugestões de leitura ou script exemplar?

 

Desde já agradeço a todos.

[lumiere 0]

Tem que ser num input text? Tipo, se voce criar labels separadas dinamicamente nao daria?

 

Por exemplo, toda vez que adicionasse um numero, incluisse uma label dinamica na tela?

[Sergiojr 0]

Vou ler sobre isso, mas acredito que não daria certo para o proposto. Imagina que tenho uma lista com 1000 códigos separado por -, então eu seleciono todos eles e colo no textarea, e o botão analisar chama a função que pinta o código -43567- de vermelho entre todos os demais, e assim eu consigo ter uma análise de onde ele está visualmente. 

 

Mas eu vou ler sobre label dinâmica, talvez eu encontre algo que ajude.

[Sergiojr 0]

Alguém pode me ajudar a identificar o problema neste script? Ele está alterando a cor somente de números que ainda não foram inseridos. Se eu voltar a adicionar o número 1 por exemplo na minha calculadora, ele não executa e, adiciona o número 1 de forma normal.

 

<script type="text/javascript">
$(function(){
    $('#idConfirmar').click(function(){
        var searchTerm = "1 3".split(" ");
        
        $(".resultado").each(function() {
            var html = $(this).html().toString();
            for(var i = 0; i < searchTerm.length; i++) {
                var pattern = "([^\\w]*)(" + searchTerm[i] + ")([^\\w]*)";
                var rg = new RegExp(pattern);
                var match = rg.exec(html);
                if(match) {
                    html = html.replace(rg,match[1] + "<font color='red'><b>"+ match[2] +"</b></font>" + match[3]);
                    $(this).html(html);
                }
            }
        });
    });
});
  
</script>

Então para testar eu tenho 3 <input type="button">, cada um com seu value respectivo, e tenho um <span class="resultado" id="idVisor"> que através de uma função vai jogar o value dos button, quando clicado, no <span>.

 

E por último um botão id=idConfirmar(ele serve para alterar a cor, não confirma nada.. kkk) que quando clicado, altera a cor de termos pré-definidos no searchTerm, neste caso 1 e 3, ou seja, sempre que o 1 ou 3 ou ambos(não 13, apenas separados) estiverem no span, suas cores serão alteradas para vermelho.

 

Qual o problema?

1- Se eu adicionar o 1 no visor e confirmar, ele altera a cor. Se eu pressionar o botão 3 em seguida e confirmar, ele altera. Agora se eu voltar a adicionar o número 1, ele não altera. Resultado do exemplo: 1 3 1 3

 

2- Se eu pressionar o número 1, pressionar o número 3 e confirmar, com ambos números já no span. Só altera o encontrado primeiro Resultado: 1 3 3 1

 

O que desejo quando confirmar?

Resultado: 1 3 2 3 1 2 2 3 1 2 3 1

 

Alguém sabe o que pode estar acontecendo de errado?

 

[Sergiojr 0]

Resolvido..

 

Substituir var pattern por

 

var pattern = "([^\w]*)(" + searchTerm + ")([^\w]*)";

 

Obrigado pelo interesse lumiere.

 

Abraço!