Fungsi JavaScript tidak mempunyai kesan pada klik butang

Question

Saya telah mencari di internet dan mencuba banyak kaedah, tetapi terperangkap pada masalah yang agak mudah.

Kod di bawah adalah skop penuh soalan saya

<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();
?>

Bahagian asas masalah saya adalah dengan fungsi ini:

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

Tidak dipanggil oleh butang ini

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

Saya tidak tahu mengapa pula. Saya pada mulanya fikir ia adalah isu skop, tetapi ia sepatutnya dalam skop. Saya juga telah mencuba beberapa cara yang berbeza untuk memanggil fungsi dari butang. Terima kasih banyak atas sebarang bantuan yang anda boleh berikan. Saya cuba menggunakan nama kelas untuk merujuk butang, dan juga mencuba pelbagai cara untuk memanggil fungsi yang disiarkan di laman web ini.

Answer 1

Apabila menggunakan jQuery, anda boleh mencari elemen dengan menulis pemilih CSS.

Sebagai contoh, anda mempunyai $row = a.closest('tr');，它将找到离a变量引用的任何元素最近的<tr>元素，并且看起来是一个<button>元素。由于a只是一个原始元素，您需要使用jQuery选择它才能在jQuery中使用它。$(a).closest('tr') akan menyelesaikan masalah ini.

Seterusnya, anda mempunyai elemen $row.find('drawingnum')，它将在那个<tr>元素中查找一个<drawingnum>. Ini bukan elemen sebenar dan tiada dalam HTML anda.

Namun, saya lihat anda mempunyai ini:

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

Saya rasa anda mahu memilih elemen ini. Jadi anda perlu mencari <input>。在CSS中，您可以使用选择器input[name="drawingnum"] dengan nilai atribut khusus untuk mencarinya, yang bermaksud anda boleh melakukan perkara yang sama dalam jQuery.

Berikut adalah kandungan penuh:

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

Answer 2

Masalah anda adalah dalam fungsi JavaScript anda.

Anda mengelirukan notasi PHP dan JavaScript. Tidak perlu menggunakan simbol '$' semasa mengisytiharkan pembolehubah dalam JavaScript. Anda mungkin pernah melihat penggunaan '$' dalam jQuery, tetapi anda tidak menyebut bahawa anda menggunakannya.

Jika anda tidak menggunakan jQuery, find() dan text() bukan kaedah dan anda harus menggunakan .querySelector dan .value sebagai gantinya.

Selain itu, saya rasa anda tidak boleh memilih baris mengikut nama tanpa menambahkan [name="whatever"] secara eksplisit pada pertanyaan.

Ini adalah versi fungsi anda yang berfungsi.

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

Berikut ialah demo kerja jsbin.

Cadangan biasa ialah menggunakan konsol dalam alatan pembangunan. Ia sepatutnya memberi anda beberapa petunjuk tentang sebarang isu JavaScript.

Satu lagi kaveat tambahan ialah memastikan anda memberikan setiap elemen id unik. Seharusnya tiada id pendua pada halaman anda.