Why does comparison using javascript not work?

Asked

Viewed 201 times

1

What I want to do:

Algorithm that generates field change logs in front-end.

Problem:

Certain code snippet I compare the old value with the new value:

            if( value =! anterior ){
                elemento.val( value ).attr( 'data-anterior', anterior ).toggleClass('log_inativo log');
            }else{
                elemento.toggleClass('log log_inativo');
            }

However, regardless of the values it is falling into if and then into Else endlessly.

Code

JS

$(document).ready(function(){
//Grava o valor anterior do campo
    $( "input, select" ).focus(function(){            

        //Grava o atual valor em um atributo atributo
        var anterior = $(this.tagName + "[name="+ this.name +"][data-anterior]");           

        //Se o atributo não existe, ele é criado
        if(!anterior.length){
            $(this).attr('data-anterior', this.value);
        }
    }).change(function(){           

        //Define as variaveis
        var value = this.value;
        var anterior = $(this.tagName + "[name="+ this.name +"][data-anterior]").attr('data-anterior');
        var name = this.name;
        var elemento = $( "input[name=log_" + name + "]" );         

        console.log("value:", value, "anterior:", anterior);
        //Verifica se já não existe um elemento de log
        if( elemento.length ){

            //Verifica se o novo valor alterado não é o valor antigo
            if( value !== anterior ){
                elemento.val( value ).attr( 'data-anterior', anterior ).toggleClass('log_inativo log');
            }else{
                //Então remove
                elemento.toggleClass('log log_inativo');
            }
        }else{ //Se não existe ele cria
            $( ".formInner" ).append( "<input type = 'hidden' class = 'log' name = 'log_" + name + "' value = '" + value + "' data-anterior = '" + anterior + "'>" );
        }           

    })})

HTML

<body>
<div class = "formInner">
    <input type ="text" name = 'item1' value ="teste 01">
    <select name ='item2'>
        <option selected> banana </option>
        <option> banana 2 </option>
    </select>
</div>

Jsfiddle http://jsfiddle.net/anndreyy/gzdg3f5o/8/

Observation

To check on line 20, js, has console.log of the entered value and the previous value. teste 01 Note which class has changed to log_inactive, but the entered value is different from the previous value teste 02

What am I doing wrong? Valeus.

javascript jquery
  • 5

    =! should be !=. Will that be all?

  • @bfavaretto so I analyzed the problem is just this. kk

  • Really hadn’t touched me about it. how dumb I am =) However, the problem continues.

  • You are saying that the value is equal to the opposite of the previous (value =! value)

  • 1

    And even switching, when you do the toggle, you reverse the condition. Making it never know which way you want to stay.

  • 1

    Ivan, thank you. That was really the problem.

  • 1

    Another thing you can do is change: .attr( 'data-anterior', anterior ) for .data('anterior', anterior), when you use data-element, the word data is already an element reference, which will contain attributes.

  • Thanks, I’ll do it! Thanks.

Show 3 more comments

2 answers

1

The colleague Ivan, solved my problem, which in this case was the toggle function. The comparison operation was working perfectly, but as the toggle function reverses the variables, regardless of the order the classes inserted within it were placed, so it would always invert regardless of which value of the value variables and previous.

Funny that I put this function only to test, I wasn’t actually going to use it. Replace with the remove function, since at the beginning of the algorithm and check if there is an Hidden element with the element name, if not I create a new.

//Verifica se o novo valor alterado não é o valor antigo
            if( value !== anterior ){
                elemento.val( value ).attr( 'data-anterior', anterior );
            }else{
                //Então remove
                elemento.remove();
            }

0

The condition would be different values !==

Example:

var value = "a";
var anterior = "b";

if (value !== anterior) {
  document.write('diferente');
} else {
  document.write('igual');
}

Browser other questions tagged javascript jquery

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