1
votes

Obtenir une valeur HTML de la balise span

ma balise span ressemble à ceci:

'<span id="quantity_value" value="1">1</span>'

Et la valeur change en utilisant jquery.

Je veux avoir la valeur de cette span comme paramètre, quand je essayez avec le script js:

var number = document.getElementById("quantity_value");

Mon nombre est égal à:

<span id="quantity_value" value="1">1</span>

Mais je veux que le nombre soit égal à la valeur .

javascript jquery html

9 commentaires

Avec jquery, vous pouvez dire $ ('# Quantity_value'). Val () pour obtenir la valeur de la plage. La première partie est le sélecteur qui sélectionne votre élément span. Le .val () est une méthode pour obtenir la valeur de la valeur d'attribut.

var number = document.getElementById ("quantité_value"). textContent (vanilla JS) ou var number = document.getElementById ("quantité_value"). text (); (jQuery )

En fait, comme il s'agit d'un span, avoir une valeur n'a pas de sens ici. Les portées ne sont pas des éléments d'entrée.

attendez, que voulait exactement l'OP? Le contenu du texte à l'intérieur de l'élément, ou l'attribut value de span?

" Et la valeur change en utilisant jquery. " Veuillez expliquer cela plus en détail

@Smankusors Je veux rediriger sur la page ('/../number') mais quand je passe var number = document.getElementById ("quantité_value"). InnerHTML; c'est statique, mon nombre est égal à 1 même s'il a changé

@Taplar j'ai le script jquery, quand je clique sur + j'ajoute 1 à la valeur et à innerhtml et si je clique - je supprime 1 de la valeur et de l'internalhtml

@Taplar vous avez dit que span n'a pas de valeur, puis-je rendre l'élément d'entrée invisible?

Vous pouvez ( ), ou vous pouvez utiliser un attribut de données. Jetez un œil à ma réponse ci-dessous pour un exemple utilisant des attributs de données. @Sebqu

3 Réponses :

2
votes

Si vous ajoutez:

console.log (nombre); juste après l'avoir défini, et regardez le débogueur, vous verrez qu'il a différentes propriétés.

Vous voulez obtenir la propriété innerHTML :

number.innerHTML

2 commentaires

Il y a un problème avec cela. C'est statique je veux dire quand je change le nombre html.innerHTML ne change pas

La variable est lue au moment de l'exécution. Il n'est pas lié à l'élément. Donc, si l'élément change, la variable aura la même valeur. Vous devez relire la valeur après la modification ou lier un événement à l'élément qui mettra automatiquement à jour la variable.

2
votes

Utilisez

var number = document.getElementById("quantity_value");

En écrivant uniquement

var number = document.getElementById("quantity_value").innerHTML;

vous stockez l'objet dans la variable.

1 commentaires

Je recommanderais probablement de nommer la variable quantityValue ou quelque chose pour une auto-documentation supplémentaire. number est une petite faute de frappe loin de Number et peut potentiellement causer des problèmes plus importants. :)

0
votes

Je suggérerais de changer la valeur en un champ de données pour corriger votre code HTML non conforme aux normes, puis vous pouvez récupérer cet attribut lorsque vous avez besoin de la valeur. Par exemple:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="quantity_value" data-value="1">1</span>
<div><button id="changeValue">Change Value</button></div>
<div><button id="getValue">Get Value</button></div>

$('#changeValue').on('click', function(){
  var newValue = Date.now() % 100;
  
                                   //change the data attribute
  $('#quantity_value').text(newValue).data('value', newValue);
});

$('#getValue').on('click', function(){
  console.log($('#quantity_value').data('value'));
});

2 commentaires

Je ne comprends absolument pas comment cela fonctionne. Je suppose que $ ('# changeValue'). est uniquement pour les tests, ai-je raison si oui, alors pourquoi 1 n'a pas de valeur

Oui, les boutons ne sont là que pour les tests. Comme indiqué dans les commentaires de votre question, value n'est pas un attribut valide pour les éléments span , tel que défini par le standard Web HTML. En tant que tel, cette réponse utilise un attribut de données, data-value , à la place de la valeur que vous tentiez d'utiliser. Les attributs de données peuvent être sur à peu près n'importe quel élément, et vous pouvez utiliser la méthode jQuery data () pour obtenir / définir la valeur de celui-ci.