Ajuda, PrimeFaces + Javascript

Front-end
#1

Seguinte pessoal preciso de uma ajuda aqui, creio que é coisa simples mas nao consegui ainda encontrar a solução.

Então eu tenho um <p:wizard> em uma das minhas paginas, na 3º <p:tap> eu tenho alguns campos que gostaria de pegar o valor com e realizar um calculo (algo bem simples), então eu tentei utilizando javascript porem quando eu faço tudo via inspecionar elementos funciona que uma beleza porem quando eu coloco na minha pagina não funciona.

segue abaixo os códigos:

Primeiro eu fiz desta maneira e não deu muito certo utilizando o seletor do PrimeFaces.

			var $totalD = PF('totalD');
			var $recebidoD = PF('recebidoD');
			var $trocoD = PF('trocoD');
			var $calculo = 0;
					
					$recebidoD.jq.click(function(){
					$calculo = $recebidoD.val() - $totalD.val();
					$trocoD.jq.val($calculo);
					});

E este é o erro que me retorna no console:

 Widget for var 'totalD' not available!
primefaces.js.jsf?ln=primefaces&v=5.0:1 Widget for var 'recebidoD' not available!
primefaces.js.jsf?ln=primefaces&v=5.0:1 Widget for var 'trocoD' not available!
geraPassagem.jsf:235 Uncaught TypeError: Cannot read property 'jq' of undefined

Depois tentei desta forma que também não funcionou :frowning:

			var $total = document.getElementById('formPrincipal:txtTotalDinheiro');
			var $recebido = document.getElementById('formPrincipal:txtVlrRecebidoDinheiro');
			var $troco = document.getElementById('formPrincipal:txtTrocoDinheiro');
			var $calculo = 0;

				$recebido.click(function(){
				$calculo = $recebido.value - $total.value;
				$troco.value($calculo);
				});

E me retornou este outro erro:

geraPassagem.jsf:235 Uncaught TypeError: Cannot read property 'click' of nullgeraPassagem.jsf:235
 (anonymous function)

Eu não imagino que esteja fazendo de errado, pois também não entendo muito de javascript, se alguém puder me ajudar fico grato.

#2