Llevo un varios días intentando resolver este problema y no lo consigo. Se que es muy básico, pero estoy empezando con JS y voy algo perdido.
Tengo un select creado con PHP y quiero que la función de JS me consiga los valores seleccionados con un evento onchange, pero por más que lo intento, la variable de JS me sale "undefined", cunando la consulto en la Consola. Incluso he probado de añadir un párrafo y que la función JS escribiera en el párrafo y eso lo he conseguido (lo que me hace deducir que el onchange se dispara, pero no se porque no consigo obtener el "value" de los select.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./../../template.css">
<?php include './../../UniversalConexio.php';
include './../../cabecera.php';
// include '../formato/funcions.php';?>
<title>Game Master BFF</title>
</head>
<body>
<script>
<?php
$consClass = "SELECT `Id_Clase`, `Clase_Codificada` FROM `whch_class`";
$resultado=$conexio->query($consClass) or die("No puedo realizar la consulta");
$classArr = array();
while($row = mysqli_fetch_assoc($resultado)) {
$classArr[] = $row;
}
$consRace = "SELECT `Id_Raza`, `Raza` FROM `whch_race`";
$resultado=$conexio->query($consRace) or die("No puedo realizar la consulta");
$raceArr = array();
while($row = mysqli_fetch_assoc($resultado)) {
$raceArr[] = $row;
}
$consJob = "SELECT `Id_Oficio`, `Carrera`, `Clase`, `Humano`, `Enano`, `Halfling`, `Alto Elfo`, `Elfo Silvano` FROM `whch_job`";
$resultado=$conexio->query($consJob) or die("No puedo realizar la consulta");
$jobPre = array();
while($row = mysqli_fetch_assoc($resultado)) {
$jobPre[] = $row;
}
for($iraza=1;$iraza<6;$iraza++){
$razas = array("", "Humano", "Enano", "Halfling", "Alto Elfo", "Elfo Silvano");
$razaindex = $razas[$iraza];
for($iclase=1;$iclase<9;$iclase++){
for($i=0;$i<64;$i++){
if($jobPre[$i]['Clase'] == $iclase && $jobPre[$i][$razaindex])
$jobArr[$iraza][$iclase][] = $jobPre[$i]['Id_Oficio'];
}
for($i=0;$i<64;$i++){
if($jobPre[$i]['Clase'] == $iclase && $jobPre[$i][$razaindex])
$jobName[$iraza][$iclase][] = $jobPre[$i]['Carrera'];
}
}
}
?>
</script>
<?php include './../../sidebarleft.html';?>
<?php //var_dump($jobName); ?>
<div class="wrapper">
<div class="container">
<h1><?php print '<img src=".\..\..\pic\MASTER_Tipo01_v02.gif" alt="Game Master BFF" title="Game Master BFF" width="205" height="200">';?></h1>
<div class="content">
<p>Bienvenido al proceso de creación de un nuevo personaje para WarhammerRPG. Introduce el nombre y selecciona la raza y clase de tu personaje para empezar la aventura. Si lo prefieres, puedes tirar los dados para generarlos aleatoriamente.</p>
<?php
if(isset($_POST['nombre_generado'])){
$Nombre = $_POST['nombre_generado'];
}else{
$Nombre = '';
}
?>
<form action="stats.php" method="post" id="raza">
<label> Nombre:
<input type = "text" id = "nombrepj" name = "nombrepj" required minlength="3" value = "<?php echo $Nombre;?>"/></label>
<label>Raza:
<select id = "raza" name = "raza" class = "job" onchange="selectJob();">
<option value = "0" >Tirar dado</option>
<?php foreach($raceArr as $race){
echo '<option value=' . $race['Id_Raza'] . '>' . $race['Raza'] . '</option>';
}
?>
</select>
</label>
<label>Clase:
<select id = "clase" name = "clase" class = "job" onchange="selectJob();">
<option value = "0" >Tirar dado</option>
<?php foreach($classArr as $clase){
echo '<option value=' . $clase['Id_Clase'] . '>' . $clase['Clase_Codificada'] . '</option>';
}
?>
</select>
</label>
<label>Oficio:
<select id = "oficio" name = "oficio">
<option value = "0" >Tirar dado</option>
</select>
</label>
<input type = "submit" name = "Empezar" id = "Empezar" value = "Empezar"/>
<p id="demo"></p>
</form>
</div>
</div>
</div>
<div class="sidebar_right">
</div>
<script>
function selectJob(){
let claseCH = document.getElementById('clase').value;
let race = document.getElementById('raza').value;
document.getElementById("demo").innerHTML = "You selected: " + race + " and " + claseCH;
}
</script>
</body>
<?php include './../../pie.html';
mysqli_close($conexio); ?>
</html>
EDITADO: añado el código entero