2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <span>&lt;</span>
    
    <script>
        let text = document.querySelector("span");
        
        text.addEventListener("click", function(){
            if (text.textContent == "&lt;")
            {
                alert("é igual")
            }
            
            else
            {
                alert("não é igual")
            }
        });
    </script>
</body>
</html>

O exemplo acima estou tentando comparar se dois valores são iguais no caso &lt; é igual a &lt; no caso tinha que me retornar true, mas está me retornando false, por que?

2 Respostas 2

7

Basicamente pelo fato de você estar confundindo o conteúdo do elemento com a representação HTML.

O conteúdo textual (textContent) do span é < e não &lt; (é o que você usou no código), portanto a comparação correta é:

text.textContent == "<"

Se tivesse usado innerHTML, aí sim esta comparação funcionaria:

text.innerHTML == "&lt;"

Veja funcionando:

var text = document.querySelector("span");
console.log( 'Texto é igual &lt;? : ' + (text.textContent == "&lt;") );
console.log( 'Texto é igual < ? : ' + (text.textContent == "<") );
console.log( 'HTML é igual &lt;? : ' + (text.innerHTML == "&lt;") );
console.log( 'HTML é igual < ? : ' + (text.innerHTML == "<") );
<span>&lt;</span>

2

A representação real desta linha

<span>&lt;</span>

é "<" e por isso deves fazer a comparação desta maneira:

text.textContent == "<"
0

Você deve fazer log-in para responder a esta pergunta.