按鈕點擊時，JavaScript函數無效

Question

我已經在互聯網上搜索並嘗試了很多方法，但是在一個相對簡單的問題上卡住了。

下面的程式碼是我問題的全部範圍

<script>
//Function to eventually copy the entire row to another table
function dosomethingcrazy(a)
{
    console.log('hello');
    var $row = a.closest('tr');    // 找到行
    var $text = $row.find('drawingnum').text(); // 找到文本
                            
    // 让我们测试一下
    alert($text);
}
</script>
                
<?php
if (isset($_POST['cars']))
{
    $category = $_POST['cars'];
}
//connect               
$con = mysqli_connect('localhost', 'root', '','ironfabpricing');

// 检查连接
if ($con->connect_error)
{
      die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT `DWG_NO`, `Description`, `Profile`, `Pieces`, `Length`, `Ib/ft`, `Observ`  FROM `$category`";
$result = $con->query($sql);

// 设置表头
echo "<div class='tableWrap'><table class='styled-table'><thead><tr><th>Add</th><th>DWG_NO</th><th>Description</th><th>Profile</th><th>Pcs</th><th>Length</th><th>Ib_ft</th><th style=width:100%>Observation</th></tr></thead><tbody>";

// 将数据库结果输出到可以查看的表中                  
if ($result->num_rows > 0)
{
      // 输出每一行的数据
      while($row = $result->fetch_assoc())
          {
        echo "<tr><td>
        <button type='button' onclick='dosomethingcrazy(this)'>Try</button>
        </td><td>".$row["DWG_NO"]."</td><td>".$row["Description"]."</td>
                <td>".$row["Profile"]."</td>
                <td><textarea rows='1' cols='3' id='myTextarea' name='something'>0</textarea></td>
                <td>".$row["Length"]."</td>
                <td>".$row["Ib/ft"]."</td>
                <td>".$row["Observ"]."</td></tr>";
      }
} 

// 用户可以填写的表中的最后一行，以便将另一项输入到数据库中                 
echo "<tr><form id='form1' action='insert.php' method='post'>
      <input type='hidden' id='greeting' name='test' value='$category'>
      <td><button type='button' onclick='dosomethingcrazy(this)'>Try</button></td>
      <td><input type='text' name='drawingnum' placeholder='Drawing #'></td>
      <td><input type='text' name='type' placeholder='Type' required></td>
      <td><input type='text' name='profile' placeholder='profile' required></td>
      <td><input type='number' min='0' name='pieces' placeholder='0'></td>
      <td><input type='number' min='0' name='length' placeholder='0' required></td>
      <td><input type='number' min='0' name='ibft' placeholder='0' required></td>
      <td><textarea class='description' oninput = 'auto_grow(this)' type='text' name='description' value='initiate-value'></textarea></td></form></tr>";
echo "</tbody></table></div>";
                    
$con->close();
?>

我遇到問題的更基本部分是這個函數：

function dosomethingcrazy(a)
{
    console.log('hello');
    var $row = a.closest('tr');    // 找到行
    var $text = $row.find('drawingnum').text(); // 找到文本
                            
    // 让我们测试一下
    alert($text);
}

沒有被這個按鈕呼叫

<button type='button' onclick='dosomethingcrazy(this)'>Try</button>

我無論如何都無法弄清楚為什麼。我最初認為這是一個範圍問題，但它應該在範圍內。我還嘗試了多種不同的從按鈕呼叫函數的方式。非常感謝您能提供的任何幫助。我嘗試使用類別名稱來引用按鈕，也嘗試了在這個網站上發布的多種呼叫函數的方式。

Answer 1

在使用jQuery時，您可以透過編寫CSS選擇器來尋找元素。

例如，您有$row = a.closest('tr');，它將找到離a變數引用的任何元素最近的<tr> 元素，並且看起來像是一個<button>元素。由於a只是一個原始元素，您需要使用jQuery選擇它才能在jQuery中使用它。 $(a).closest('tr')將解決這個問題。

接下來，您有$row.find('drawingnum')，它將在那個<tr>元素中尋找一個<drawingnum>元素。這不是一個真實的元素，也不在您的HTML中。

不過，我看到您有這個：

<input type='text' name='drawingnum' placeholder='Drawing #'>

我猜您想選擇這個元素。因此，您需要找到一個具有特定屬性值的<input>。在CSS中，您可以使用選擇器input[name="drawingnum"]來定位它，這意味著您可以在jQuery中做相同的事情。

這裡是全部內容：

var $row = $(a).closest('tr');
var text = $row.find('input[name="drawingnum"]').text();

Answer 2

您的問題出在您的JavaScript函數中。

您混淆了PHP和JavaScript的表示法。在JavaScript中宣告變數不需要使用'$'符號。您可能在jQuery中看到了'$'的使用，但您並沒有提到您在使用它。

如果您沒有使用jQuery，則find()和text()不是方法，您應該使用.querySelector和.value代替。

此外，我認為您無法通過名稱選擇行，除非在查詢中明確添加'[name="whatever"]'。

這是您的函數的一個可工作版本。

  <script>
    function dosomethingcrazy(a)
    {
      // 混淆了php和javascript表示法。
      // javascript不使用'$'符号表示变量。
        console.log('hello');
        var row = a.closest('tr');    // 查找行
        // 您是否使用jquery？如果是，您可以使用find，但如果不是，则使用querySelector。
        // 如果您没有使用库，则使用.value来获取输入值。
        var text = row.querySelector('[name="drawingnum"]').value; // 查找文本

        // 让我们来测试一下
        alert(text);
    }
  </script>

這裡有一個jsbin的工作示範。

一個常見的建議是使用開發工具中的控制台。它應該給您一些關於任何JavaScript問題的提示。

另一個額外的警告是確保每個元素都指定一個唯一的id。您的頁面上不應該有重複的id。