Acessando informações JSP no Javascript

Front-end JavaScript
,
#1

Bom dia, eu fiz um teste no HTML no javascript e funcionou.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="java.util.*, br.com.pesquisamercado.dao.*, br.com.pesquisamercado.modelo.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
	<meta charset="UTF-8">
	<title>...Cadastra Convidado...</title>
	<style media="screen">
		label{
			display:block;
		}
	</style>
	
	<script type="text/javascript">
		function fMasc(objeto, mascara) {
			obj = objeto
			masc = mascara
			setTimeout("fMascEx()", 1)
		}
		
		function fMascEx() {
			obj.value = masc(obj.value)
		}
		
		function mCPF(cpf) {
			cpf = cpf.replace(/\D/g, "")
			cpf = cpf.replace(/(\d{3})(\d)/, "$1.$2")
			cpf = cpf.replace(/(\d{3})(\d)/, "$1.$2")
			cpf = cpf.replace(/(\d{3})(\d{1,2})$/, "$1-$2")
			return cpf
		}
		
		function mTel(tel) {
			tel = tel.replace(/\D/g, "")
			tel = tel.replace(/^(\d)/, "($1")
			tel = tel.replace(/(.{3})(\d)/, "$1)$2")
		
			if (tel.length == 9) {
				tel = tel.replace(/(.{1})$/, "-$1")
			} else if (tel.length == 10) {
				tel = tel.replace(/(.{2})$/, "-$1")
			} else if (tel.length == 11) {
				tel = tel.replace(/(.{3})$/, "-$1")
			} else if (tel.length == 12) {
				tel = tel.replace(/(.{4})$/, "-$1")
			} else if (tel.length > 12) {
				tel = tel.replace(/(.{4})$/, "-$1")
			}
			
			return tel;
		}
	</script>
</head>

<body>
	<h2>
		<i>...:::Cadastro do Convidado:::...</i>
	</h2>
	
	<table>
		<form class ="" action="cadastrarConvidado" method="post">
			<tr>
				<td>Nome:</td>
				<td><input type="text" name="nome" maxlength="40"/></td>
			</tr>
			
			<tr>
				<td>RG:</td>
				<td><input type="text" name="rg" maxlength="20"/></td>
			</tr>
			
			<td>Estado:</td>
			<td>
				<select name="estado">
					<option value="SP">São Paulo</option>
					<option value="AC">Acre</option>
					<option value="AL">Alagoas</option>
					<option value="AP">Amapá</option>
					<option value="AM">Amazonas</option>
					<option value="BA">Bahia</option>
					<option value="CE">Ceará</option>
					<option value="DF">Distrito Federal</option>
					<option value="ES">Espírito Santo</option>
					<option value="GO">Goiás</option>
					<option value="MA">Maranhão</option>
					<option value="MT">Mato Grosso</option>
					<option value="MS">Mato Grosso do Sul</option>
					<option value="MG">Minas Gerais</option>
					<option value="PA">Pará</option>
					<option value="PB">Paraíba</option>
					<option value="PR">Paraná</option>
					<option value="PE">Pernambuco</option>
					<option value="PI">Piauí</option>
					<option value="RJ">Rio de Janeiro</option>
					<option value="RN">Rio Grande do Norte</option>
					<option value="RS">Rio Grande do Sul</option>
					<option value="RO">Rondônia</option>
					<option value="RR">Roraima</option>
					<option value="SC">Santa Catarina</option>
					<option value="SE">Sergipe</option>
					<option value="TO">Tocantins</option>
				</select>
			</td>
			</tr>
			<tr>
				<td>Data de Nascimento:</td>
				<td><input type="date" name="dataNascimento" id="data" maxlength="10"/></td>
			</tr>
			<tr>
				<td>Idade:</td>
				<td><input type="text" name="idade" maxlength="3" size="1" disabled id="idade"/></td>
			</tr>
			<tr>
				<td>CPF:</td>
				<td><input type="text" name="cpf" maxlength="20" placeholder="Ex.: 000.000.000-00" onkeydown="javascript: fMasc( this, mCPF );" /></td>
			</tr>
			<tr>
				<td>Endereço:</td>
				<td><input type="text" name="endereco" maxlength="40" /></td>
			</tr>
			<tr>
				<td>Bairro:</td>
				<td><input type="text" name="bairro" maxlength="30" /></td>
			</tr>
			<td>Cidade:</td>
			<td><input type="text" name="cidade" value="São Paulo"
				maxlength="40" /></td>
			</tr>
			<tr>
				<td>Telefone:</td>
				<td><input type="text" name="telefone" maxlenght="20"
					placeholder="Ex.:(00)0000-0000"
					onkeydown="javascript: fMasc( this, mTel );" /></td>
			</tr>
			<tr>
				<td>Celular:</td>
				<td><input type="text" name="celular" maxlenght="20"
					placeholder="Ex.: (00)00000-0000"
					onkeydown="javascript: fMasc( this, mTel );" /></td>
			</tr>
			<tr>
				<td>E-mail:</td>
				<td><input type="text" name="email" maxlength="40" /></td>
			</tr>
			<tr>
				<td>Em que país nasceu:</td>
				<td><input type="text" name="nacionalidade" value="Brasil"
					maxlength="30" /></td>
			</tr>
			<tr>
				<td>Tempo em que mora na Cidade:</td>
				<td><input type="text" name="tempoCidade" maxlength="210" /></td>
			</tr>
			<tr>
				<td>Estado Civil:</td>
				<td><select name="estadoCivil">
						<option value="solteiro">Solteiro</option>
						<option value="casado">Casado</option>
						<option value="divorciado">Divorciado</option>
						<option value="viuvo">Viuvo</option>
				</select></td>
			</tr>
			<tr>
				<td>Tem Filho (S/N):</td>
				<td><input type="radio" name="temFilho" value="s" onclick="if(document.getElementById('qtdeFilhos').disabled==true)
						{document.getElementById('qtdeFilhos').disabled=false} if(document.getElementById('idadeFilhos1').disabled==true)
						{document.getElementById('idadeFilhos1').disabled=false}
						if(document.getElementById('idadeFilhos2').disabled==true)
						{document.getElementById('idadeFilhos2').disabled=false}
						if(document.getElementById('idadeFilhos3').disabled==true)
						{document.getElementById('idadeFilhos3').disabled=false}
						if(document.getElementById('idadeFilhos4').disabled==true)
						{document.getElementById('idadeFilhos4').disabled=false}
						">Sim 
					<input type="radio" name="temFilho" value="n" onclick="if(document.getElementById('qtdeFilhos').disabled==false)
					{document.getElementById('qtdeFilhos').disabled=true} if(document.getElementById('idadeFilhos1').disabled==false)
					{document.getElementById('idadeFilhos1').disabled=true}
					if(document.getElementById('idadeFilhos2').disabled==false)
					{document.getElementById('idadeFilhos2').disabled=true}
					if(document.getElementById('idadeFilhos3').disabled==false)
					{document.getElementById('idadeFilhos3').disabled=true}
					if(document.getElementById('idadeFilhos4').disabled==false)
					{document.getElementById('idadeFilhos4').disabled=true}">Não</td>
			</tr>
			<tr>
				<td>Quantos Filhos:</td>
				<td><select name="qtdeFilhos" checked id="qtdeFilhos">
						<option value="0">0</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
				</select></td>
			</tr>
			<tr>
				<td>Idade dos Filhos:</td>
				<td><input type="text" name="idadeFilhos1" size="1" maxlength="2" id="idadeFilhos1" /> 
					<input type="text" name="idadeFilhos2" size="1" maxlength="2" id="idadeFilhos2"/>
					<input type="text" name="idadeFilhos3" size="1" maxlength="2" id="idadeFilhos3"/>
					<input type="text" name="idadeFilhos4" size="1" maxlength="2" id="idadeFilhos4"/></td>
			</tr>
			<tr>
				<td>Trabalha Fora (S/N):</td>
				<td><input type="radio" name="trabalhaFora" value="s" checked onclick="if(document.getElementById('profissao').disabled==true)
						{document.getElementById('profissao').disabled=false}">Sim
					<input type="radio" name="trabalhaFora" value="n" onclick="if(document.getElementById('profissao').disabled==false)
					{document.getElementById('profissao').disabled=true}">Não</td>
			</tr>
			<tr>
			<tr>
				<td>Profissao</td>
				<td><input type="text" name="profissao" maxlength="40" id="profissao"/></td>
				</td>
			</tr>
			<tr>
				<td id="estuda">Estuda (S/N)?:</td>
				<td><input type="radio" name="estuda" value="s" checked onclick="if(document.getElementById('curso').disabled==true)
						{document.getElementById('curso').disabled=false}
						if(document.getElementById('faculdade').disabled==true){document.getElementById('faculdade').disabled=false}
						">Sim
					<input type="radio" name="estuda" value="n" onclick="if(document.getElementById('curso').disabled==false)
					{document.getElementById('curso').disabled=true}
					if(document.getElementById('faculdade').disabled==false){document.getElementById('faculdade').disabled=true}">Não</td>
			</tr>
			<tr>
				<td>Curso:</td>
				<td><input type="text" name="curso" maxlength="40" id="curso"/></td>
				</td>
			</tr>
			<tr>
				<td>Faculdade:</td>
				<td><input type="text" name="faculdade" maxlength="40" id="faculdade" /></td>
				</td>
			</tr>
			<tr>
			</hr>
				<td><i><h2>...:::Itens:::...</h2></i></td>
				<td><i><h2>...Pontos...</h2></i></td>
				<hr />
			</tr>
			<tr>
			<div class='banheiro'>
			<label><td><i>Banheiros</i></td>
            <td><input type="radio" name="contBanheiro" class="contBanheiro" value="0">0
            	<input type="radio" name="contBanheiro" class="contBanheiro" value="1">1  
           		 <input type="radio" name="contBanheiro" class="contBanheiro" value="2">2    
            <input type="radio" name="contBanheiro" class="contBanheiro" value="3">3 
            <input type="radio" name="contBanheiro" class="contBanheiro" value="4">4 ou +  
            <input type="text" name="contBanheiro" class="pontoBanheiro" size="1" disabled=""></td>
      		</label>
    		</div>
			</tr>
			<tr>
			<div class='mensalistas'>
     			 <label><td><i>Mensalistas</i></td>
        				<td><input type="radio" name="contEmpregadas" class="contEmpregadas" value="0">0
        				<input type="radio" name="contEmpregadas" class="contEmpregadas" value="1">1  
        				<input type="radio" name="contEmpregadas" class="contEmpregadas" value="2">2    
        				<input type="radio" name="contEmpregadas" class="contEmpregadas" value="3">3 
        				<input type="radio" name="contEmpregadas" class="contEmpregadas" value="4">4 ou +  
        				<input type="text" name="contEmpregadas" class="pontosEmp" size="1" disabled=""></td>
      				</label>
      			</div>
			</tr>
			<tr>
				<div class='automoveis'>
      			<label><td><i>Automóveis de Passeio</i></td> 
        			<td><input type="radio" name="contAutomoveis" class="contAutomoveis" value="0">0
        			<input type="radio" name="contAutomoveis" class="contAutomoveis" value="1">1  
        			<input type="radio" name="contAutomoveis" class="contAutomoveis" value="2">2    
        			<input type="radio" name="contAutomoveis" class="contAutomoveis" value="3">3 
        			<input type="radio" name="contAutomoveis" class="contAutomoveis" value="4">4 ou +  
        			<input type="text" name="contAutomoveis" class="pontosAuto" size="1" disabled="" verPontuacaoBanheiro()></td>
        		</label>
      			</div>
			</tr>
			<tr>
				<div class='microcomputadores'>
     	 			<label><td><i>Microcomputadores</i></td> 
        				<td><input type="radio" name="contComputador" class="contComputador" value="0">0
        				<input type="radio" name="contComputador" class="contComputador" value="1">1  
        				<input type="radio" name="contComputador" class="contComputador" value="2">2    
        				<input type="radio" name="contComputador" class="contComputador" value="3">3 
        				<input type="radio" name="contComputador" class="contComputador" value="4">4 ou +  
        				<input type="text" name="contComputador" class="pontosMicro" size="1" disabled=""></td> 
      				</label>
    			</div>
			</tr>
			<tr>
				<div class='lavaloucas'> 
      			<label><td><i>Lava Louças</i></td> 
        			<td><input type="radio" name="contLavaLoucas" class="contLavaLoucas" value="0">0
        			<input type="radio" name="contLavaLoucas" class="contLavaLoucas" value="1">1  
        			<input type="radio" name="contLavaLoucas" class="contLavaLoucas" value="2">2    
        			<input type="radio" name="contLavaLoucas" class="contLavaLoucas" value="3">3 
        			<input type="radio" name="contLavaLoucas" class="contLavaLoucas" value="4">4 ou +  
        			<input type="text" name="contLavaLoucas" class="pontosLavaLoucas" size="1" disabled=""></td> 
      			</label>
    			</div>
			</tr>
			<tr>
				<div class='geladeira'>
      			<label><td><i>Geladeira</i></td> 
        			<td><input type="radio" name="contGeladeira" class="contGeladeira" value="0">0
        			<input type="radio" name="contGeladeira" class="contGeladeira" value="1">1  
        			<input type="radio" name="contGeladeira" class="contGeladeira" value="2">2    
        			<input type="radio" name="contGeladeira" class="contGeladeira" value="3">3 
        			<input type="radio" name="contGeladeira" class="contGeladeira" value="4">4 ou +  
        			<input type="text" name="contGeladeira" class="pontosGeladeira" size="1" disabled=""></td> 
      			</label>
    			</div>
			</tr>
			<tr>
				<div class='freezer'>
      			<label><td><i>Freezer</i></td>
        			<td><input type="radio" name="contFreezer" class="contFreezer" value="0">0
        			<input type="radio" name="contFreezer" class="contFreezer" value="1">1  
        			<input type="radio" name="contFreezer" class="contFreezer" value="2">2    
        			<input type="radio" name="contFreezer" class="contFreezer" value="3">3 
        			<input type="radio" name="contFreezer" class="contFreezer" value="4">4 ou +  
        			<input type="text" name="contFreezer" class="pontosFreezer" size="1" disabled=""></td> 
      			</label>
    			</div>
			</tr>
			<tr>
				<div class='lavaroupa'>
      			<label><td><i>Lava Roupa</i></td>
        			<td><input type="radio" name="contLavaRoupa" class="contLavaRoupa" value="0">0
        			<input type="radio" name="contLavaRoupa" class="contLavaRoupa" value="1">1  
        			<input type="radio" name="contLavaRoupa" class="contLavaRoupa" value="2">2    
        			<input type="radio" name="contLavaRoupa" class="contLavaRoupa" value="3">3 
        			<input type="radio" name="contLavaRoupa" class="contLavaRoupa" value="4">4 ou +  
        			<input type="text" name="contLavaRoupa" class="pontosLavaRoupa" size="1" disabled=""></td> 
      			</label>
    			</div>
			</tr>
			<tr>
				<div class='dvd'>
      			<label><td><i>DVD</i></td>
        			<td><input type="radio" name="contDvd" class="contDvd" value="0">0
        			<input type="radio" name="contDvd" class="contDvd" value="1">1  
        			<input type="radio" name="contDvd" class="contDvd" value="2">2    
        			<input type="radio" name="contDvd" class="contDvd" value="3">3 
        			<input type="radio" name="contDvd" class="contDvd" value="4">4 ou +  
        			<input type="text" name="contDvd" class="pontosDvd" size="1" disabled=""></td> 
      			</label>
    		</div>
			</tr>
			<tr>
				<div class='microondas'>
      			<label><td><i>Microondas</i></td>
        			<td><input type="radio" name="contMicroondas" class="contMicroondas" value="0">0
        			<input type="radio" name="contMicroondas" class="contMicroondas" value="1">1  
        			<input type="radio" name="contMicroondas" class="contMicroondas" value="2">2    
        			<input type="radio" name="contMicroondas" class="contMicroondas" value="3">3 
        			<input type="radio" name="contMicroondas" class="contMicroondas" value="4">4 ou +  
        			<input type="text" name="contMicroondas" class="pontosMicroondas" size="1" disabled=""></td>
      			</label>
    			</div>
			</tr>
			<tr>
				<div class='motocicleta'>
     			<label><td><i>Motocicleta de Passeio</i></td>
        			<td><input type="radio" name="contMotocicleta" class="contMotocicleta" value="0">0
        			<input type="radio" name="contMotocicleta" class="contMotocicleta" value="1">1  
        			<input type="radio" name="contMotocicleta" class="contMotocicleta" value="2">2    
        			<input type="radio" name="contMotocicleta" class="contMotocicleta" value="3">3 
        			<input type="radio" name="contMotocicleta" class="contMotocicleta" value="4">4 ou +  
        			<input type="text" name="contMotocicleta" class="pontosMotocicleta" size="1" disabled=""></td>
      				</label>
    			</div>
			</tr>
			<tr>
				<div class='secadora'>
      			<label><td><i>Secadora de Roupas</i></td>
        			<td><input type="radio" name="contSecadora" class="contSecadora" value="0">0
        			<input type="radio" name="contSecadora" class="contSecadora" value="1">1  
        			<input type="radio" name="contSecadora" class="contSecadora" value="2">2    
        			<input type="radio" name="contSecadora" class="contSecadora" value="3">3 
        			<input type="radio" name="contSecadora" class="contSecadora" value="4">4 ou +  
        			<input type="text" name="contSecadora" class="pontosSecadora" size="1" disabled=""></td>
      			</label>
			</tr>
			<tr>
				<td>Automóveis</td>
				<td><input type="text" name="anoModeloCarro" maxlength="40" /></td>
			</tr>
			<tr>
				<div class='agua'>
      			<label><td><i>Agua Encanada</i></td>
        			<td><input type="radio" name="aguaEncanada" class="aguaEncanada" value="1">Sim
        			<input type="radio" name="aguaEncanada" class="aguaEncanada" value="0">Não  
        			<input type="text" name="aguaEncanada" class="pontoAgua" size="1" disabled=""></td>
      			</label>
			</tr>
			<tr>
				<div class='rua'>
      			<label><td><i>Rua Pavimentada</i></td>
        			<td><input type="radio" name="ruaPavimentada" class="ruaPavimentada" value="1">Sim
        			<input type="radio" name="ruaPavimentada" class="ruaPavimentada" value="0">Não  
        			<input type="text" name="ruaPavimentada" class="pontoRua" size="1" disabled=""></td>
      			</label>
			</tr>
			<tr>	
				<div class='instrucao'>
				<td>Instrucao chefe ou Entrevistado</td>
				<td><select name="instrucao" id="instrucao">
						<option value="0" class="instrucao">Analfabeto / fundamental I incompleto</option>
						<option value="1" class="instrucao">Fundamental I completo / Fundamental II incompleto</option>
						<option value="2" class="instrucao">Fundamental II completo / Médio incompleto</option>
						<option value="4" class="instrucao">Médio completo / Superior incompleto</option>
						<option value="7" class="instrucao">Superior Completo</option>
						
						</tr>
				</select>
				</div>
				</td>
			</tr>
			<tr>
			<div class="instrucao">
			<td>Pontos Escolaridade</td>
			<td><input type="text" name="instrucao" size="1" disabled id="pontosEscolaridade"/>
			</td>
			</div>
			</tr>
			<tr>
				<td>Profissão Chefe</td>
				<td><input type="text" name="profissaoChefe" maxlength="40" /></td>
			</tr>
			<tr>
				<td>Empresa</td>
				<td><input type="text" name="empresa" maxlength="30" /></td>
			</tr>
			<tr>
			<div class="pontos">
			<td>Total de Pontos </td>
			<td><input type="text" name="pontos" size="1" value="" disabled id="pontos"/>
			</div>
			</tr>
			<td>Criterio Brasil</td>
			<td><input type="text" name="nivel" size="1"
				value="" disabled id="criterio"/></td>
			</tr>
	</table>
	<div class = "criterioBrasil">
	<table style="width:36%" border="1">
  	<tr>
       	<th><i>A</i></th> 
    	<th><i>B1</i></th>
    	<th><i>B2</i></th>
    	<th><i>C1</i></th>
    	<th><i>C2</i></th>
    	<th><i>D/E</i></th>
  	</tr>
  <tr>
    <th>45 a 100</th>
    <th>38 a 44</th>
    <th>29 a 37</th>
    <th>23 a 28</th>
    <th>17 a 22</th>
    <th>0 a 16</th>
  </tr>
  </div>
</table>
	<br />
	<input type="submit" value="Gravar" />
	<input type="reset" value="Apagar" />
	<input type="submit" value="Enviar Email" />
	<hr />
	<script src='js/calculopontos.js' type="text/javascript"></script>
	<script src='js/calculaIdade.js' type="text/javascript"></script>
	</form>
</body>
</html>

E no javascript (js) faz um cálculo do js:

document.addEventListener('DOMContentLoaded', function(){
  var botoesBanheiro = document.querySelectorAll('.contBanheiro');
  var pontoBanheiro = document.querySelector('.pontoBanheiro');
  var banheiro = document.querySelector('.banheiro');
  
  var banheiros = [0,3,7,10,14];
  
  banheiro.addEventListener('click', function(){
    verPontuacaoBanheiro();
  });    
  
  function verPontuacaoBanheiro() {
    
    botoesBanheiro.forEach(function(el, i){
      if (el.checked) {
    	  pontoBanheiro.value = banheiros[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesEmpregadas = document.querySelectorAll('.contEmpregadas');
  var pontosEmpregadas   = document.querySelector('.pontosEmp');
  var mensalista     = document.querySelector('.mensalistas');

  var mensalistas = [0,3,7,10,13];
  
  mensalista.addEventListener('click', function(){
    verPontuacaoMensalista();
  });    
  
  function verPontuacaoMensalista() {
    
    botoesEmpregadas.forEach(function(el, i){
      if (el.checked) {
        pontosEmpregadas.value = mensalistas[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesAutomoveis = document.querySelectorAll('.contAutomoveis');
  var pontosAutomoveis   = document.querySelector('.pontosAuto');
  var autos     = document.querySelector('.automoveis');


  var automoveis = [0,3,5,8,11];
  
  autos.addEventListener('click', function(){
    verPontuacaoAutomoveis();
  });    
  
  function verPontuacaoAutomoveis() {
    
    botoesAutomoveis.forEach(function(el, i){
      if (el.checked) {
        pontosAutomoveis.value = automoveis[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesMicro = document.querySelectorAll('.contComputador');
  var pontosMicro   = document.querySelector('.pontosMicro');
  var micros     = document.querySelector('.microcomputadores');

  var micro = [0,3,6,8,11];
  
  micros.addEventListener('click', function(){
    verPontuacaoMicro();
  });    
  
  function verPontuacaoMicro() {
    
    botoesMicro.forEach(function(el, i){
      if (el.checked) {
        pontosMicro.value = micro[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesLavaLoucas = document.querySelectorAll('.contLavaLoucas');
  var pontosLavaLoucas  = document.querySelector('.pontosLavaLoucas');
  var lavalouca  = document.querySelector('.lavaloucas');

  var lacaLoucas = [0,3,6,6,6];
  
  lavalouca.addEventListener('click', function(){
    verPontuacaoLavaLoucas();
  });    
  
  function verPontuacaoLavaLoucas() {
    
    botoesLavaLoucas.forEach(function(el, i){
      if (el.checked) {
        pontosLavaLoucas.value = lacaLoucas[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesGeladeira = document.querySelectorAll('.contGeladeira');
  var pontosGeladeira  = document.querySelector('.pontosGeladeira');
  var geladeira  = document.querySelector('.geladeira');

  var geladeiras = [0,2,3,5,5];
  
  geladeira.addEventListener('click', function(){
    verPontuacaoGeladeira();
  });    
  
  function verPontuacaoGeladeira() {
    
    botoesGeladeira.forEach(function(el, i){
      if (el.checked) {
        pontosGeladeira.value = geladeiras[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesFreezer = document.querySelectorAll('.contFreezer');
  var pontosFreezer  = document.querySelector('.pontosFreezer');
  var freezers  = document.querySelector('.freezer');

  var freezer = [0,2,4,6,6];
  
  freezers.addEventListener('click', function(){
    verPontuacaoFreezer();
  });    
  
  function verPontuacaoFreezer() {
    
    botoesFreezer.forEach(function(el, i){
      if (el.checked) {
        pontosFreezer.value = freezer[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesLavaRoupa = document.querySelectorAll('.contLavaRoupa');
  var pontosLavaRoupa  = document.querySelector('.pontosLavaRoupa');
  var lavaroupas  = document.querySelector('.lavaroupa');

  var lavar = [0,2,4,6,6];
  
  lavaroupas.addEventListener('click', function(){
    verPontuacaoLavaRoupa();
  });    
  
  function verPontuacaoLavaRoupa() {
    
    botoesLavaRoupa.forEach(function(el, i){
      if (el.checked) {
        pontosLavaRoupa.value = lavar[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesDvd = document.querySelectorAll('.contDvd');
  var pontosDvd  = document.querySelector('.pontosDvd');
  var dv  = document.querySelector('.dvd');

  var dvd = [0,1,3,4,6];
  
  dv.addEventListener('click', function(){
    verPontuacaoDvd();
  });    
  
  function verPontuacaoDvd() {
    
    botoesDvd.forEach(function(el, i){
      if (el.checked) {
        pontosDvd.value = dvd[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesMicroondas = document.querySelectorAll('.contMicroondas');
  var pontosMicroondas  = document.querySelector('.pontosMicroondas');
  var microondas1  = document.querySelector('.microondas');

  var microondas = [0,2,4,6,6];
  
  microondas1.addEventListener('click', function(){
    verPontuacaoMicroondas();
  });    
  
  function verPontuacaoMicroondas() {
    
    botoesMicroondas.forEach(function(el, i){
      if (el.checked) {
        pontosMicroondas.value = microondas[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesMotocicletas = document.querySelectorAll('.contMotocicleta');
  var pontosMotocicleta  = document.querySelector('.pontosMotocicleta');
  var motocicleta1  = document.querySelector('.motocicleta');

  var motocicleta = [0,1,3,3,3];
  
  motocicleta1.addEventListener('click', function(){
    verPontuacaoMotocicleta();
  });    
  
  function verPontuacaoMotocicleta() {
    
    botoesMotocicletas.forEach(function(el, i){
      if (el.checked) {
        pontosMotocicleta.value = motocicleta[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesSecadora = document.querySelectorAll('.contSecadora');
  var pontosSecadora  = document.querySelector('.pontosSecadora');
  var sec  = document.querySelector('.secadora');

  var secador = [0,2,2,2,2];
  
  sec.addEventListener('click', function(){
    verPontuacaoSecadora();
  });    
  
  function verPontuacaoSecadora() {
    
    botoesSecadora.forEach(function(el, i){
      if (el.checked) {
        pontosSecadora.value = secador[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesAgua = document.querySelectorAll('.aguaEncanada');
  var pontoAgua  = document.querySelector('.pontoAgua');
  var agua  = document.querySelector('.agua');

  var aguaEnc = [4,0];
  
  agua.addEventListener('click', function(){
    verPontuacaoRua();
  });    
  
  function verPontuacaoRua() {
    
    botoesAgua.forEach(function(el, i){
      if (el.checked) {
        pontoAgua.value = aguaEnc[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesRua = document.querySelectorAll('.ruaPavimentada');
  var pontoRua  = document.querySelector('.pontoRua');
  var rua  = document.querySelector('.rua');

  var ruaPav = [2,0];
  
  rua.addEventListener('click', function(){
    verPontuacaoRua();
  });    
  
  function verPontuacaoRua() {
    
    botoesRua.forEach(function(el, i){
      if (el.checked) {
        pontoRua.value = ruaPav[i];
      }
    });
  }
});
document.addEventListener('DOMContentLoaded', function(){
  var botoesInstrucao = document.querySelectorAll('.instrucao');
  var pontoInstrucao  = document.querySelector('.pontoInstrucao');
  var instrucao  = document.querySelector('.instrucao');

  var inst = [0,1,2,4,7];
  
  instrucao.addEventListener('click', function(){
    verInstrucao();
  });    
  
  function verInstrucao() {
    
    botoesInstrucao.forEach(function(el, i){
      if (el.checked) {
        pontoInstrucao.value = inst[i];
      }
    });
  }
});

Não está funcionando no JSP, já em página HTML funciona.

#2

Simples: o funcionamento de uma JSP é diferente do funcionamento do html.

Quando postar código, após inserí-lo na caixa de texto, favor selecionar o mesmo e clicar no botão </> que existe acima do editor.

#3

Entendi, existe alguma forma para que funcione? Ou precisa ser pelo JSP? Pois eu também tenho um método no java e informar com <%%> instanciando a classe?

#4

Qual a razão de estar usando jsp?
Salvo se trate de um projeto em que você precisa manter legado, eu sugiro buscar algo mais atual.

#5

Você teria alguma sugestão?
Como eu poderia fazer? Com JSF, SpringBoot, Angular???

#6

Reparei que vc tem vários desse no seu JS:

document.addEventListener('DOMContentLoaded', function(){ ...

Acho que vc deveria reestruturar esse código e deixar ele mais enxuto e objetivo. Isso iria facilitar a resolução de quaisquer problemas.

#7

Uma observação, o cálculo de idade funciona, conforme fiz um teste.

#8

Alguém teria como me ajudar a resolver esse problema???
Pois em um cálculo de Idade ele logo retorna, a função em Javascript não está retornando para um cálculo de pontos…