0
votes

Comment faire fonctionner ma fonction de réinitialisation sur mon élément d'entrée?

J'ai une fonction de réinitialisation, qui sélectionne l'ID d'une entrée.

J'ai un bouton qui déclenche la fonction lorsqu'il est cliqué sur.

où suis-je mal ici? Je pensais que c'était peut-être parce que mon contribution n'était pas sous une forme et que je devrais créer un formulaire et lui donner un identifiant de référence. Mais cela n'a pas fonctionné non plus.

J'ai aussi essayé d'utiliser document.getElementyID. ("réinitialiser"). Réinitialiser ();

Cela n'a pas fonctionné non plus.

IM perdu! / p> xxx


xxx

xxx


5 commentaires

L'ID "des entrées sont" NameInput1 "et" NameInput1 ", pas" RESET ".


Utilisation: Ceci réinitialisera toutes les valeurs à l'intérieur de votre étiquette de formulaire.


Bien, mais il n'y a pas de tag de formulaire. En outre, je ne suis en fait pas clair dans cette question, mais je veux un bouton qui supprimera toutes mes intrants. J'ai deux entrées de date et deux entrées de texte. J'essayais simplement de comprendre comment au moins obtenir le bouton travailler sur un seul élément avant de m'attaquer à un moyen de les sélectionner.


Il suffit d'envelopper tout votre code à l'intérieur de votre étiquette de formulaire. Cela ne changera rien. et utiliser


La chose est que mon CSS utilise la grille. Donc, cette entrée particulière est dans un élément de grille imbriquée. C'est dans la cellule de grille 1 de 9 cellules. La chose est que je veux éventuellement sélectionner toutes les entrées (il y a 4, deux entrées de date et deux entrées de texte) et posez-les à l'aide d'un bouton. Donc, un type d'entrée "réinitialiser" ne fonctionne pas vraiment pour moi ici, car il ne s'appliquerait qu'à une entrée.


3 Réponses :


0
votes

Avant d'arriver à votre code: Si vous souhaitez réinitialiser les champs d'un formulaire à leurs valeurs initiales, vous n'avez pas besoin d'écrire un code du tout. Utilisez simplement un Type d'entrée = "RESET" CODE> dans le formulaire:

 <div class="container">

<div class="cell-1" id="centerElement">
    <div id="cell-1-nest-l"></div>
    <div id="cell-2-nest-l"></div>
    <div id="cell-3-nest-l"></div>
    <div id="cell-4-nest-l"><h3>your name</h3></div>
    <div id="cell-5-nest-l"></div>
    <div id="cell-6-nest-l"><input type="text" class="nameStyle1 reset" id="nameInput1"></div>
<div class="cell-2" id="centerElement" ><img onclick="getSum();" src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>

<div class="cell-3" id="centerElement" >
        <div id="cell-1-nest"></div>
        <div id="cell-2-nest"></div>
        <div id="cell-3-nest"><h3>their name</h3></div>
        <div id="cell-4-nest"></div>
        <div id="cell-5-nest"><input type="text" class="nameStyle1 reset" id="nameInput2"></div>
        <div id="cell-6-nest"></div>


        </div>

<div class="cell-4" id="result1">
    <input type="date" class="dateStyle1 reset" id="dateInput1">
        </div>

<div class="cell-5"><input type="button" value="Reset" onclick="clearInputs();"></div>

<div class="cell-6" id="result2"> 
    <input type="date" class="dateStyle2 reset" id="dateInput2" placeholder="Their Bday">
        </div>
<div class="cell-7"></div>

<div class="cell-8"></div>

<div class="cell-9"></div>


13 commentaires

Merci pour cela, j'ai corrigé cela plus tôt mais cela ne fonctionne toujours pas!


Je vais essayer de réécrire cela en utilisant un queryselctor tout parce que je veux réellement que cela fonctionne sur toutes mes intrants. Dans mon HTML, j'ai deux entrées de date et deux entrées de texte.


@nineborn - Oui, cela fonctionne . Et si vous voulez faire toutes vos entrées, voir le "s'il y aura plus d'une" partie de la réponse.


haha ok je suis sûr que ça fait, je suis juste en train d'essayer de comprendre où je vais mal. Je vais utiliser un QuerySelectorall ("# RESET") et ajoutez une classe de "réinitialisation" au HTML de cet élément et testez-la.


@nineborn - Un problème est que vous avez class = "" dans plusieurs endroits dans une balise, qui ne fonctionne pas. J'ai noté que dans ma réponse et j'ai ajouté un exemple de fonctionnement.


Woops n'a pas fini de lire votre commentaire. Ok, j'ai donc besoin de les garder plusieurs classes dans la balise de classe. Doh. Laissez-moi essayer ceci.


Merci cela a finalement travaillé. Ce que je ne comprends pas, c'est pourquoi dois-je utiliser un pourachs sur un QuerySelectorall? Je pensais que QuerySelectorallall sélectionnerait tous les éléments, puis en passant dans le .value serait suffisant. Pourquoi n'est-ce pas? De plus, je ne comprends pas l'argument (entrée) à l'intérieur de la fonction foreach. Cela vous dérangeriez-vous clarifier tout cela pour un débutant? J'essaie de comprendre le processus de pensée


En outre, en ce qui concerne la première partie de votre réponse, concernant vos conseils pour utiliser un type d'entrée "réinitialiser" à la place. Oui, j'ai réalisé que cela effacerait une forme, mais mes intrants sont n ° 1 non sous des formes (si elles sont?) # 2 Ils sont dans différentes cellules de grille (DIV) dans un récipient de grille. Sauf absence de quelque chose, et je peux écrire un type d'entrée simple "réinitialiser" et l'attribuer à toutes mes entrées sur la grille ... puis j'ai pensé que je devais écrire une fonction à la place.


@nineborn - QuerySelectorALLL renvoie une liste d'éléments correspondants. Cette liste n'a pas de propriété , la DOM n'a pas d'API basée sur un ensemble (comme JQuery fait, par exemple). Pour définir la valeur de chaque entrée dans la liste des éléments correspondants, vous devez la boucler. foreach Est-ce que cela appelle le rappel que vous le donnez à plusieurs reprises, une fois pour chaque élément de la liste, en passant la liste dans la première argument. Le rappel ci-dessus accepte cet argument en tant que paramètre nommé entrée . Donc, chaque fois qu'il s'appelle (une fois par élément), entrée fait référence à une entrée différente de la liste.


@nineborn - re Type = "RESET" : Vous pouvez envelopper un formulaire autour de toute la grille. Les entrées étant dans différentes cellules de la grille ne sont pas un problème. Si vous faites cela, méfiez-vous d'un gotcha sur le bouton élément ( , pas Type d'entrée = "bouton" ). Le type de éléments est Soumettre , ils vont donc essayer de soumettre le formulaire s'ils sont dans un formulaire < / code>. Lorsque vous utilisez la touche uniquement en tant que bouton, vous devez avoir besoin . Mais vous utilisez saisir le type = "bouton" donc vous allez bien.


Merci de clarifier. Lorsque j'ai initialement étudié une réponse pour cela, j'ai juré que j'ai vu quelqu'un mettre un .value à la fin de la sélection d'un identifiant. Pourriez-vous faire le simple .value = "" à la fin des autres sélecteurs? Dire getElementyid?


En outre, que pensez-vous que c'est une meilleure pratique? Écrire la fonction que nous avons construite ou l'envelopper sous une forme?


@nineborn - voir la réponse ci-dessus, oui, vous pouvez utiliser .value du résultat de getElementyid ou QuerySelector car ils renvoient un Élément simple (ou null si aucun n'est trouvé), pas une liste. QuerySelectorAll , getelementsByTagname , etc. Listes de retour. J'utiliserais la fonctionnalité de réinitialisation construite dans le navigateur plutôt que de la mettre en œuvre moi-même. Réfermer les meilleures pratiques: ce n'est pas la meilleure pratique Touse OnClick Attributs et tel. Utilisez AddeventListener ou similaire à la place. Joyeux codage!



0
votes

document.getelementByID ("réinitialiser") recherche un élément avec id = "réinitialiser" qui ne semble pas exister, c'est pourquoi rien n'est réinitialisé.

Si votre est dans un Vous pouvez utiliser pour réinitialiser toutes les valeurs de formulaire ( https://www.w3schools.com/tags/att_input_type_reset.asp )

Vous pouvez essayer < Pré> xxx

et voir qu'il fonctionnerait sur cet élément spécifique


0 commentaires

0
votes
document.getElementById("nameInput1").value = "";

document.getElementByClass("reset").value = "";

0 commentaires