0
votes

document.getElementById (). value ne fonctionne pas

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.


8 commentaires

Avez-vous besoin d'ajouter des guillemets à l'attribut précédent '".$row['id']."'


btn-edit est un élément <i> . Ceux-ci n'ont pas de propriété de value .


@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' id qui est interdit. Changez la function edit(){ en function edit(element){ et passez-la en utilisant onclick='edit(this)' . Ensuite, vous n'aurez pas à le chercher. Pour obtenir la value vous appelleriez element.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'id edit(".$row['id'].") Si vous n'avez pas besoin de l'élément HTML réel.


3 Réponses :


0
votes

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


2 commentaires

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.



0
votes

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 .


0 commentaires

0
votes

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>


0 commentaires