为什么我定义的 <button onclick=function()> 不能工作？答案

【问题标题】：why my defined <button onclick=function()> cannot work?为什么我定义的 <button onclick=function()> 不能工作？
【发布时间】：2021-03-06 08:29:09
【问题描述】：

我尝试做一些事情来列出我数据库中的所有主题，然后在它们旁边有一个按钮允许我删除或更新主题内的问题。所以我添加了带有唯一参数的 onclick 函数。但是当我点击删除按钮时它没有显示任何消息。请帮助我。

<!DOCTYPE html>
    <?php 
        require "connectPHP.php";

        // to get the total number of topic present

        $counter = "SELECT COUNT(IdTopic) FROM TOPIC";
        $result = mysqli_query($con, $counter);
        if($row = mysqli_fetch_assoc($result)){
            $totalTopic = $row['COUNT(IdTopic)'][0];
        }
        $totalTopic = (int)$totalTopic;

    ?>

    <head>
        <link rel="stylesheet" href="mystyle.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">   
    
    </head>
    
    <body>
        <br>
        <div class="collection">
            <br>
            <div class = "collectionContainer">
                <br>
                <div>
                    <?php
                        require "connectPHP.php";
                        $selectDataFromTopic = "SELECT * FROM TOPIC ORDER BY LENGTH(IdTopic), IdTopic";
                        $result = mysqli_query($con,$selectDataFromTopic);         // query
                        echo "<table id='topicTable'>"; // start a table tag in the HTML
                            echo "<tr class='tableHeader'>";
                                echo "<th style='width:10%;'>IdTopic</th>";
                                echo "<th style='width:15%'>Sub topic</th>";
                                echo "<th style='witdh:55%'>title</th>";
                                echo "<th style='witdh:10%'>Delete</th>";
                                echo "<th style='witdh:10%'>change</th>";
                            echo "</tr>";
                                
                            while($row = mysqli_fetch_array($result)){   //Creates a loop to loop through results

                                //$row['index'] the index here is a field name
                                echo "<tr>";
                                    echo "<td>" . $row['IdTopic'] . "</td>";  
                                    echo "<td>" . $row['subTopic'] . "</td>";
                                    echo "<td>" . $row['title'] . "</td>";

                                    $D_position = "D".$row['IdTopic'];
                                    echo "<td><button type='submit' class='deleteButton' id='".$D_position."' onclick='delete('".$D_position."')'> Delete</button></td>";

                                    $C_position = "C".$row['IdTopic'];
                                    echo "<td><button type='submit' class='changeButton' id='".$C_position."' onclick='change('".$C_position."')'> Change question </button></td>";
                                echo "</tr>";
                            }

                        echo "</table>"; //Close the table in HTML
                    ?>
                </div>
                <script>
                

                function delete(deletePositon){
                    confirm( "It will be deleted");
                }

                function change(changePosition){
                    // add some code here
                }
                        
                </script>

            </div>
            <br>
        </div>
    </body>
    
</html>

【问题讨论】：

这显然与 PHP 无关。请点击edit，然后点击[<>] sn-p 编辑器并发布一个minimal reproducible example，其中仅包含渲染的HTML 和脚本。没有 PHP
看来问题出在引用上。您正在生成onclick='delete('D100')'。这被视为 3 个单独的属性 onclick='delete('、D100 和 ')'
@mplungjan PHP 肯定是问题的一部分，因为它与他们如何将变量替换到 HTML 中有关。
当他们发布渲染的 HTML 时，很明显存在引用问题。无论如何要摆脱它，请参阅我的答案
@mplungjan 是的，但是您将看不到需要修复的问题的根源。

标签： javascript php html dom onclick

【解决方案1】：

报价是最初的问题
具有数据属性的委托是解决方案
同时尝试减少回声。在下面使用 heredoc 或我的建议

你可以在这两个函数中使用 fetch

您需要 PHP 按钮看起来像这样

<td><button type='button' class='deleteButton' data-id='<?= $D_position ?>'> Delete</button></td>

渲染后的代码

const deleteRow = id => {
  console.log("Deleting", id);
};
const changeRow = id => {
  console.log("Changing", id);
};
document.getElementById('topicTable').addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("deleteButton")) deleteRow(tgt.dataset.id);
  else if (tgt.classList.contains("changeButton")) changeRow(tgt.dataset.id);
})

<div class="collection">
  <div class="collectionContainer">
    <table>
      <thead>
        <tr class='tableHeader'>
          <th style='width:10%;'>IdTopic</th>
          <th style='width:15%'>Sub topic</th>
          <th style='witdh:55%'>title</th>
          <th style='witdh:10%'>Delete</th>
          <th style='witdh:10%'>change</th>
        </tr>
      </thead>
      <tbody id='topicTable'>

        <tr>
          <td>IdTopic 1</td>
          <td>subTopic 1</td>
          <td>title 1</td>

          <td><button type='button' class='deleteButton' data-id='$D_position1'> Delete</button></td>

          <td><button type='button' class='changeButton' data-id='$C_position1'> Change question </button></td>
        </tr>
        <tr>
          <td>IdTopic 2</td>
          <td>subTopic 2</td>
          <td>title 2</td>

          <td><button type='button' class='deleteButton' data-id='$D_position2'> Delete</button></td>

          <td><button type='button' class='changeButton' data-id='$C_position2'> Change question </button></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

PHP：

<div class="collection">
  <div class="collectionContainer">
    <div>
      <?php
                        require "connectPHP.php";
                        $selectDataFromTopic = "SELECT * FROM TOPIC ORDER BY LENGTH(IdTopic), IdTopic";
                        $result = mysqli_query($con,$selectDataFromTopic);         // query
                        ?>
        <table>
          <thead>
            <tr class='tableHeader'>
              <th style='width:10%;'>IdTopic</th>
              <th style='width:15%'>Sub topic</th>
              <th style='witdh:55%'>title</th>
              <th style='witdh:10%'>Delete</th>
              <th style='witdh:10%'>change</th>
            </tr>
          </thead>
          <tbody id='topicTable'>
            <$php while($row=m ysqli_fetch_array($result)){ //Creates a loop to loop through results //$row[ 'index'] the index here is a field name 
             $D_position="D" .$row[ 'IdTopic']; 
             $C_position="U" .$row[ 'IdTopic']; ?>
              <tr>
                <td><?= $row['IdTopic'] ?></td>
                <td><?= $row['subTopic'] ?></td>
                <td><?= $row['title']</td>
                <td><button type='button' class='deleteButton' data-id='<?= $D_position ?>'> Delete</button></td>
                <td><button type='button' class='changeButton' data-id='<?=$C_position ?>'> Change question </button></td>
            </tr>
              <?php } ?>

        </table>
    </div>

【讨论】：

但是主题的数量是未知的，那么如何使用php代码生成一定数量的表格行，旁边有按钮？
@SzeYuSim 创建所有主题的 PHP 循环是相同的，只是不需要内联 onclick 属性。
在我的浏览器中，它说删除未定义
那么您没有正确执行 PHP $D_position="D" .$row[ 'IdTopic']; 或按钮 <button type='button' class='deleteButton' data-id='<?= $D_position ?>'> Delete</button>。请向我展示填充了 ID 的渲染按钮

【解决方案2】：

您没有正确引用 delete() 和 change() 的参数。

我发现当您使用连接时会让人感到困惑，因为 PHP、HTML 和 JavaScript 所需的引号混合在一起。如果将变量直接替换到 PHP 字符串中，则更容易获得。由于 HTML 属性用单引号分隔，因此您需要在函数参数周围使用双引号。这些双引号需要转义，因为 PHP 字符串用双引号括起来。

$D_position = "D".$row['IdTopic'];
echo "<td><button type='button' class='deleteButton' id='$D_position' onclick='delete(\"$D_position\")'> Delete</button></td>";

$C_position = "U".$row['IdTopik'];
echo "<td><button type='button' class='changeButton' id='$C_position' onclick='change(\"$U_position\")'> Change question </button></td>";

请注意，由于参数是按钮本身的 ID，因此您可以使用 delete(this) 和 change(this) 完全避免此问题。然后应该更改函数以将参数视为 DOM 元素而不是 ID（它们不需要调用 document.getElementById()）。

我还将 HTML 更改为使用 type='button' 而不是 type='submit'。否则，点击按钮会在函数返回后提交表单。

【讨论】：