Estoy trabajando en un proyecto de un sitio web que muestra un gráfico. El usuario debería poder cambiar un gráfico mostrado (sin cambiar el sitio web) haciendo clic en uno de los 'Sensores disponibles' de las opciones desplegables. El menú desplegable se conecta a la base de datos MySQL con sensores usados. La identificación del sensor se asigna a la identificación de entrada HTML y su nombre se asigna al valor de entrada.
Mi intención es usar la identificación del sensor en otro archivo data.php que es responsable de conectarse a las tablas (MySQL) con los datos recopilados por los sensores. Este ID indicaría a cuál de las tablas debería conectarse este programa.
Por el momento, la tarea del script JS es alertar a una ID del sensor elegido cuando se hace clic en el menú desplegable. En lugar de un número, recibo un mensaje que dice 'indefinido'. Eventualmente, transferiría la identificación almacenada al archivo data.php mencionado.
¿Podría decirme si es necesario usar AJAX en este caso o cuál es la posible razón de este error en mi código?
También traté de usar el botón en lugar de la entrada. Al hacer clic en los nombres de los sensores en el menú desplegable, solo recibí mensajes con '1'. Sin embargo, la asignación sensorName funcionó en ambos casos. La identificación de los sensores se almacena como INT, el nombre como VARCHAR en la tabla MySQL.
Gracias de antemano por su ayuda :)
<div id="header_btn" class="dropdown"> <input type="submit" id="btn" value="Available sensors" class="btn btn-success" /> <div class="dropdown-content"> <?php include("config.php"); $sql = "SELECT * FROM sensors"; $result = $db->query($sql); if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ $sensorID = $row["id"]; $sensorName = $row["WebName"]; ?> <input onclick="changeSensorID(this.value)" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" class="btn_drop" id="<?php echo $sensorID ?>" value="<?php echo $sensorName ?>" /></a> <?php } } ?> </div> <script> function changeSensorID() { var sensorID = document.getElementsByClassName("btn_drop").id; alert(sensorID); }; </script> </div>por favor revise este código, funciona bien
<input type="submit" id="btn" value="Available sensors" class="btn btn-success" /> <div class="dropdown-content"> <?php include("config.php"); $sql = "SELECT * FROM sensors"; $result = $db->query($sql); if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ $sensorID = $row["id"]; $sensorName = $row["WebName"]; ?><input onclick="changeSensorID(event)" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" class="btn_drop" id="<?php echo $sensorID ?>" value="<?php echo $sensorName ?>" /></a> <?php } } ?> </div> <script > function changeSensorID(event){ var sensorID = event.target.id; alert(sensorID); } </script> </div>getElementsByClassName devuelve una matriz de al menos un elemento si encuentra alguno. Debe proporcionar el índice del elemento que desea usar.
var sensorID = document.getElementsByClassName("btn_drop")[0].id;