JavaScript function has no effect on button click

Question

I've searched the internet and tried many methods, but am stuck on a relatively simple problem.

The code below is the full scope of my 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();
?>

The more basic part of my problem is with this function:

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

Not called by this button

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

I can't figure out why anyway. I initially thought it was a scope issue, but it should be in scope. I've also tried a number of different ways of calling the function from the button. Thank you very much for any help you can provide. I tried using the class name to reference the button, and also tried various ways of calling the function posted on this site.

Answer 1

When using jQuery, you can find elements by writing CSS selectors.

For example, you have $row = a.closest('tr');, which will find the closest <tr> to any element referenced by the a variable element, and appears to be a <button> element. Since a is just a primitive element, you need to select it using jQuery to use it in jQuery. $(a).closest('tr') will solve this problem.

Next, you have $row.find('drawingnum') which will look for a <drawingnum># within that <tr> element ##element. This is not a real element and is not in your HTML.

However, I see you have this:

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

I guess you want to select this element. Therefore, you need to find an

<input> with a specific property value. In CSS you can use the selector input[name="drawingnum"] to position it, which means you can do the same thing in jQuery.

Here are the full contents:

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

Answer 2

Your problem is in your JavaScript function.

You are confusing PHP and JavaScript notation. There is no need to use the '$' symbol when declaring variables in JavaScript. You may have seen the use of '$' in jQuery, but you didn't mention that you were using it.

If you are not using jQuery, find() and text() are not methods and you should use .querySelector and .value instead.

Also, I don't think you can select rows by name without explicitly adding '[name="whatever"]' to the query.

This is a working version of your function.

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

Here is a working demo of jsbin.

A common suggestion is to use the console in the development tools. It should give you some hints on any JavaScript issues.

An additional caveat is to ensure that each element is assigned a unique id. There should be no duplicate ids on your page.