J'ai travaillé sur un projet sur les employés. Il y a donc des données dans la base de données mysql. Donc, pour obtenir cela et le mettre dans une table html, j'ai utilisé php.
echo "<script>
function edit(){
let data_id = document.getElementById('btn-edit');
console.log(data_id.value);
}
</script>";
Donc, si vous voyez les deux dernières balises td vous pouvez voir que j'ai utilisé font awesome et leur ai donné des values respectivement avec des attributs name et id . Et aussi un événement onclick avec une fonction.
$sql = "SELECT * FROM Stock_Management.`staff_details`";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result)){
while($row = mysqli_fetch_assoc($result)){
echo "<tr>
<td scope='row'>".$row['id']."</td>
<td>".$row['fname']."</td>
<td>".$row['lname']."</td>
<td>".$row['phno']."</td>
<td>".$row['employee_address']."</td>
<td>".$row['join_date']."</td>
<td><i class='far fa-edit btnedit' value=".$row['id']." name='btn-edit' id='btn-edit' onclick='edit()' style='color: green; cursor: pointer'></i></td>
<td><i class='far fa-trash-alt btndelete' value='".$row['id']."' name='btn-delete' id='btn-delete' onclick='delete()' style='color: tomato; cursor: pointer'></i></td>
</tr>";
}
}
Mais chaque fois que je suis undefined dans la console. Alors, quel est le problème avec mon code. Aidez-moi, s'il vous plaît!! S'il vous plaît.
3 Réponses :
Afin d'obtenir la valeur, vous pouvez changer le code js en:
function edit(){
console.log(event.target.value)
}
En cliquant dessus, le navigateur crée un événement que vous pouvez cibler pour obtenir la valeur cliquée.
il vous manque également "'" autour de value value = ". $ row [' id ']." gardez à l'esprit que vous ne devriez pas avoir plusieurs occurrences du même identifiant sur la page, donc le ciblage de btn-edit ne fonctionnera jamais si vous avez plusieurs éléments avec cet identifiant.
Vous ne devez pas utiliser la balise "" pour un bouton
Cela ne fonctionnera pas car la value n'est pas une propriété de i .
Vous devriez utiliser quelque chose comme <button> ou <a> Lain - je n'ai pas pu modifier ma réponse ci-dessus, j'ai donc répondu ici maintenant.
Remplacez la «valeur» de votre élément par
console.log(data_id.dataset.value);
Changez la ligne javascript 'console.log (data_id.value);' à
data-value
Pour plus d'informations sur l'utilisation de l'ensemble de données js, visitez https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
En outre, l'élément <i> ne contient pas la propriété value .
1.vous ne pouvez pas ajouter de valeur et de nom à la balise <i> , vous devez utiliser la balise d'entrée, 2. si vous utilisez ceci, j'espère que vous n'aurez aucun problème avec cela;
<label class='far fa-edit btnedit' onclick='edit()' style='color: green; cursor: pointer;font-size: 25px;'>
<input type='hidden' id='btn-edit' name='btn_edit' value='".$row['id']."'/>
</label>
<script>
function edit(){
let data_id = document.getElementById('btn-edit');
console.log(data_id.value);
}
</script>
Avez-vous besoin d'ajouter des guillemets à l'attribut précédent
'".$row['id']."'btn-editest un élément<i>. Ceux-ci n'ont pas de propriété devalue.@NigelRen No Bro, ça ne marche pas '..... BTW merci d'avoir essayé.
@Ivar Alors, quelle est l'alternative?
Par votre logique, vous allez répéter l'
idqui est interdit. Changez lafunction edit(){enfunction edit(element){et passez-la en utilisantonclick='edit(this)'. Ensuite, vous n'aurez pas à le chercher. Pour obtenir lavaluevous appelleriezelement.getAttribute('value').Vous pourriez utiliser
.getAttribute('value')sur l'élément. Mais les attributs de données seraient probablement plus appropriés dans ce cas.@Lain Merci, cela résout mon problème !!
Bon à lire. Pensez également à la suggestion valide de @Ivar sur l'utilisation des attributs de données. En fin de compte, vous pouvez simplement passer la
edit(".$row['id'].")directe de l'idedit(".$row['id'].")Si vous n'avez pas besoin de l'élément HTML réel.