If não funciona por algum motivo

[Kauê Fucherberger Bonfá 0]

eu estou tentando fazer um programa que mostra qual produto vale mais a pena mas eu fiz um if falando que quando o preço e a quantidade dos produtos são iguais a frase "os produtos sao iguais" aparece mas por algum motivo o if não está funcionando.

 <div id="produto1">
                <div><input type="number" id="preco1" placeholder="preco"></div>
                <div><input type="number" id="quantidade1" placeholder="quantidade"></div>
            </div>
<div id="produto2">
                <div><input type="number" id="preco2" placeholder="preco"></div>
                <div><input type="number" id="quantidade2" placeholder="quantidade"></div>
            </div>
<div><button onclick="calcular()">calcular</button></div>
<div><p>resultado:<a id="resultado"></a></p></div>
<script>
  function calcular() {
        var q1 = document.getElementById('quantidade1').value
        var p1 = document.getElementById('preco1').value
        var q2 = document.getElementById('quantidade2').value
        var p2 = document.getElementById('preco2').value
  
        if (p1 == p2 && q1 == q2) {
          document.getElementById('resultado').innerText = 'Os produtos são iguais'    
         }
  }
</script>

Não coloquei o codigo inteiro mas acho que assim da pra entender

[Felipe Guedes Coutinho 0]

Kauê Fucherberger Bonfá

Aqui funcionou perfeitamente com o seu código.

A única coisa que eu fiz para ter certeza de que os valores são iguais foi um ALERT( variáveis ).

 

Vou colocar o código de volta.

 

<div id="produto1">
    <div><input type="number" id="preco1"      placeholder="preco"      required autofocus></div>
    <div><input type="number" id="quantidade1" placeholder="quantidade" required ></div>
</div>
<div id="produto2">
    <div><input type="number" id="preco2"      placeholder="preco"      required ></div>
    <div><input type="number" id="quantidade2" placeholder="quantidade" required ></div>
</div>
<div><button onclick="calcular()">calcular</button></div>
<div><p>resultado:<a id="resultado"></a></p></div>
<script>
function calcular() {
    var q1 = document.getElementById('quantidade1').value
    var p1 = document.getElementById('preco1').value
    var q2 = document.getElementById('quantidade2').value
    var p2 = document.getElementById('preco2').value
    
	alert(q1 + p1 + q2 + p2);
    
    if (p1 == p2 && q1 == q2) {
        document.getElementById('resultado').innerText = 'Os produtos são iguais';
    } else {
        document.getElementById('resultado').innerText = 'Os produtos são diferentes';
	}
}
</script>

Experimente copiar o código e colar em um arquivo vazio, salve com um nome qualquer.html e faça um teste.

 

Espero ter ajudado de alguma forma.

 

Att
Felipe Guedes Coutinho