La fonction JavaScript n'a aucun effet sur le clic sur le bouton

Question

J'ai cherché sur Internet et essayé de nombreuses méthodes, mais je suis bloqué sur un problème relativement simple.

Le code ci-dessous représente toute la portée de ma 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();
?>

La partie la plus fondamentale de mon problème concerne cette fonction :

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

Pas appelé par ce bouton

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

Je n'arrive pas à comprendre pourquoi de toute façon. Au début, j'ai pensé que c'était un problème de portée, mais cela devrait être une question de portée. J'ai également essayé différentes manières d'appeler la fonction à partir du bouton. Merci beaucoup pour toute aide que vous pouvez apporter. J'ai essayé d'utiliser le nom de la classe pour référencer le bouton et j'ai également essayé différentes manières d'appeler la fonction publiée sur ce site.

Answer 1

Lorsque vous utilisez jQuery, vous pouvez trouver des éléments en écrivant des sélecteurs CSS.

Par exemple, vous avez $row = a.closest('tr');，它将找到离a变量引用的任何元素最近的<tr>元素，并且看起来是一个<button>元素。由于a只是一个原始元素，您需要使用jQuery选择它才能在jQuery中使用它。$(a).closest('tr') résoudra ce problème.

Ensuite, vous avez l'élément $row.find('drawingnum')，它将在那个<tr>元素中查找一个<drawingnum>. Ce n'est pas un élément réel et ne figure pas dans votre code HTML.

Cependant, je vois que vous avez ceci :

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

Je suppose que vous souhaitez sélectionner cet élément. Vous devez donc trouver un <input>。在CSS中，您可以使用选择器input[name="drawingnum"] avec une valeur d'attribut spécifique pour le localiser, ce qui signifie que vous pouvez faire la même chose dans jQuery.

Voici le contenu complet :

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

Answer 2

Votre problème vient de votre fonction JavaScript.

Vous confondez les notations PHP et JavaScript. Il n'est pas nécessaire d'utiliser le symbole « $ » lors de la déclaration de variables en JavaScript. Vous avez peut-être vu l'utilisation de « $ » dans jQuery, mais vous n'avez pas mentionné que vous l'utilisiez.

Si vous n'utilisez pas jQuery, find() et text() ne sont pas des méthodes et vous devez plutôt utiliser .querySelector et .value.

De plus, je ne pense pas que vous puissiez sélectionner des lignes par nom sans ajouter explicitement [name="whatever"] à la requête.

Il s'agit d'une version fonctionnelle de votre fonction.

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

Voici une démo fonctionnelle de jsbin.

Une suggestion courante consiste à utiliser la console dans les outils de développement. Il devrait vous donner quelques indications sur tout problème lié à JavaScript.

Une autre mise en garde supplémentaire est de vous assurer de donner à chaque élément un identifiant unique. Il ne devrait y avoir aucun identifiant en double sur votre page.