0

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

13
  • Agrega la función selectJob() a la pregunta. Sino no vemos donde falla. A simple vista parece correcta: jsfiddle.net/dn0vgq9y
    – masterguru
    Commented el 6 jul. 2022 a las 18:58
  • Eso que acabas de poner es porque solo has seleccionado uno de ellos, por lo tanto el otro queda undefined... ¿si ambos estan seleccionados te pasa eso?
    – masterguru
    Commented el 6 jul. 2022 a las 20:55
  • Me pasa siempre, esten ambos seleccionados o no. De hecho, si solo selecciono "raza" me sale "undefined" y 0, que es el valor de la opción por defecto del select. Si selecciono "clase", me sale undefined y el número correspondiente de clase.
    – Marc
    Commented el 6 jul. 2022 a las 20:58
  • Probando tu ejemplo aqui: jsfiddle.net/m3gnqh4w a mi me funciona bien siempre. ¿que has omitido en el código de la pregunta? Pues algo no me cuadra.
    – masterguru
    Commented el 6 jul. 2022 a las 21:00
  • La verdad que no lo sé, ya estaba desesperado cuando he venido a preguntar aquí. Adjunto el código entero en mi comentario inicial
    – Marc
    Commented el 6 jul. 2022 a las 21:22

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.