Javascript 无法从HTML数据集中访问值

在从一个div拖放到另一个div时，我使用Dataset获取一些不同的值。但是当我调用Javascript函数时，我无法访问附加属性，例如

数据customerId

带有PHP动态数据的HTML:

<fieldset id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Vacant parking spots</legend>
    <?php $counter = 0; foreach ($sql_get_vacant_spots_results_ as $row) { ?>
        <div id="<?php echo $counter; ?>" data-customerid="<?php echo $arr_users[0]['customer_id']; ?>" data-y="<?php echo $row['spot_no'] ?>" data-z="<?php echo $row['location_id'] ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" ondragstart="drag(event)" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $row['spot_no'] . ' Gate: ' . $row['parking_gate_id'] ?></label>
        </div>
    <?php $counter++; } ?>
</fieldset>

<fieldset id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Current parking spots of the customer</legend>
    <?php $count = 0; foreach ($arr_users as $user) { ?>
        <div id="<?php echo $count ?>" data-customerid="<?php echo $user['customer_id'] ?>" data-y="<?php echo $user['spot_id'] ?>" data-z="<?php echo $user['location_id'] ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $user['spot_id'] . ' Gate: ' .  $user['gate_id'] ?></label>
        </div>
    <?php $count++; } ?>
</fieldset>

   function drop(ev) {
        const el = document.querySelector('#' +ev.dataTransfer.getData("text")); //prints: Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#33' is not a valid selector.
        console.log('drop', el.dataset.customerid);
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

const el = document.querySelector("[id=" + "\'" + ev.dataTransfer.getData("text") + "\'" + "]");

---

通过如下方式访问id进行修复：

<fieldset id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Vacant parking spots</legend>
    <?php $counter = 0; foreach ($sql_get_vacant_spots_results_ as $row) { ?>
        <div id="<?php echo $counter; ?>" data-customerid="<?php echo $arr_users[0]['customer_id']; ?>" data-y="<?php echo $row['spot_no'] ?>" data-z="<?php echo $row['location_id'] ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" ondragstart="drag(event)" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $row['spot_no'] . ' Gate: ' . $row['parking_gate_id'] ?></label>
        </div>
    <?php $counter++; } ?>
</fieldset>

<fieldset id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Current parking spots of the customer</legend>
    <?php $count = 0; foreach ($arr_users as $user) { ?>
        <div id="<?php echo $count ?>" data-customerid="<?php echo $user['customer_id'] ?>" data-y="<?php echo $user['spot_id'] ?>" data-z="<?php echo $user['location_id'] ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $user['spot_id'] . ' Gate: ' .  $user['gate_id'] ?></label>
        </div>
    <?php $count++; } ?>
</fieldset>

   function drop(ev) {
        const el = document.querySelector('#' +ev.dataTransfer.getData("text")); //prints: Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#33' is not a valid selector.
        console.log('drop', el.dataset.customerid);
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

const el = document.querySelector("[id=" + "\'" + ev.dataTransfer.getData("text") + "\'" + "]");

编辑：

<fieldset id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Vacant parking spots</legend>
    <?php $counter = 0; foreach ($sql_get_vacant_spots_results_ as $row) { ?>
        <div id="<?php echo $counter; ?>" data-customerid="<?php echo $arr_users[0]['customer_id']; ?>" data-y="<?php echo $row['spot_no'] ?>" data-z="<?php echo $row['location_id'] ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" ondragstart="drag(event)" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $row['spot_no'] . ' Gate: ' . $row['parking_gate_id'] ?></label>
        </div>
    <?php $counter++; } ?>
</fieldset>

<fieldset id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <legend style="color:cadetblue; border:white; width:auto; font:bold">Current parking spots of the customer</legend>
    <?php $count = 0; foreach ($arr_users as $user) { ?>
        <div id="<?php echo $count ?>" data-customerid="<?php echo $user['customer_id'] ?>" data-y="<?php echo $user['spot_id'] ?>" data-z="<?php echo $user['location_id'] ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" width="88" height="31">
            <labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $user['spot_id'] . ' Gate: ' .  $user['gate_id'] ?></label>
        </div>
    <?php $count++; } ?>
</fieldset>

   function drop(ev) {
        const el = document.querySelector('#' +ev.dataTransfer.getData("text")); //prints: Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#33' is not a valid selector.
        console.log('drop', el.dataset.customerid);
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

const el = document.querySelector("[id=" + "\'" + ev.dataTransfer.getData("text") + "\'" + "]");

Html元素id:

id="count_id<?php echo $counter; ?>"

id=“计数\u id”

旁注：如果你不喜欢香草javascript，你可以通过使用jquery:）来节省大量的输入，这是违反直觉的。假定

querySelector

采用有效的

#idname

。您的问题可能源于您的

id

仅仅是数字，这将是一个问题：“id和NAME标记必须以字母（[a-Za-z]）开头，后面可以跟任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“-”）、冒号（：”）和句点（“。”@incredible我知道这一点。检查我的编辑，我在数字idAh之前添加文本，我在你的问题代码中找不到实际的

id

值，所以我很好奇

id=”“

看起来就像是整数。