0
votes

Réinitialiser l'élément HTML à la valeur par défaut avec JavaScript

problème:

Je me demande s'il existe une fonction similaire qui permet de réinitialiser un texte à sa valeur par défaut comme pour l'attribut de valeur.

Html: xxx

JavaScript: xxx

désiré Sortie:

Pour ramasser la valeur à l'intérieur et la réinitialisation à chaque fois qu'une réponse est soumise, similaire à celle de defaultvalue Pour .


6 commentaires

Pourriez-vous ne pas utiliser silderOutput.value ?


@EvolutionXbox Il n'y a pas d'attribut de valeur pour et ce que je demande était s'il y avait un moyen d'éviter le codage rigide "50" dans JS, mais le ramasser à la place du HTML. une manière dynamique.


Je suppose que vous devrez le chercher à partir du HTML avant de l'écraser la première fois.


Qu'en est-il d'utiliser un attribut data ? (Sortie a une valeur attribut html.spec.whatswg.org/multipage/... )


Bien sûr, la solution idéale serait d'avoir curseur.value = curseur.defaultValue; SliderChange (curseur); conduit également à la valeur de sortie "par défaut" d'origine.


La voie la plus propre imo utilisera le bouton de réinitialisation native


3 Réponses :


2
votes

Vous pouvez utiliser Attribut Data-X:

sliderOutput.innerHTML = sliderOutput.dataset.defaultValue


0 commentaires

1
votes

Vous essayez d'attribuer la valeur de slider.defaultvalue à slideroutput.innerhtml , pourquoi pas juste cela?

// réinitialisation de la valeur pour const curseur = nœud.queryselector (". Custom-gamme"); curseur.value = slider.defaultvalue;

// réinitialisation de la valeur pour const SliderOutput = nœud.QuerySelector ("sortie"); slideroutput.innerhtml = curseur.defaultvalue;


0 commentaires

0
votes

Vous pouvez également utiliser la réinitialisation native.

p>

<form>
  <input id="slider" type="range" class="custom-range" name="studyslider" min="1" max="100" step="1" value="50" oninput="sliderChange(this)" onchange="sliderChange(this)">
  <output class="badge badge-light badge-width mt-4 mb-3" name="studyslider-output" id="output">50</output>
<input type="reset" />
</form>


0 commentaires