实施例

Question

我正在开展一个显示图表的网站项目。用户应该能够通过单击“可用传感器”下拉选项之一来更改显示的图表（无需更改网站）。 Dropdown使用传感器连接到MySQL数据库。传感器的id分配给html-input id，其名称分配给输入值。我的意图是在另一个data.php文件中使用传感器ID，该文件负责使用传感器收集的数据连接到表（MySQL）。这个id会告诉这个程序应该连接哪些表。

目前，JS脚本的任务是在点击下拉菜单时提醒所选传感器的ID。而不是一个数字我得到一个消息说'未定义'。最终它会将存储的id传输到上面提到的data.php文件。

请您告诉我在这种情况下是否有必要使用AJAX，或者我的代码中出现此错误的可能原因是什么？

我也尝试使用输入按钮。点击下拉列表中的传感器名称时，我只收到“1”的消息。但是，在两种情况下都会分配sensorName。传感器ID存储为INT，在MySQL表中存储为VARCHAR。

提前感谢您的帮助：）

            <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>

Answer 1

请检查此代码，工作正常

            <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>

Answer 2

如果找到任何项目，

getElementsByClassName将返回至少一个项目的数组。您必须提供要使用的元素索引。

实施例

var sensorID = document.getElementsByClassName("btn_drop")[0].id;

js脚本无法理解通过php分配给html输入值的变量

2 个答案:

实施例