Changer la valeur d'entrée sur le bouton Cliquer – javascript pur ou jQuery

J'ai deux boutons et si je clique sur un bouton, je dois modifier la valeur dans le texte d'entrée et modifier le prix total (prix du produit * valeur du bouton – 2 ou 4 Qté).

Je sais que c'est simple mais je ne suis pas bon en javascript ou jQuery. Répondre dans jsfiddle serait le meilleur.
Mon jsfiddle est ici http://jsfiddle.net/J7m7m/1/

  • HTML: comment créer un bouton "Enregistrer sous"?
  • Obtenir la liste de tous les objets `input` utilisant JavaScript, sans accéder à un objet` form`
  • Ajouter un bouton JavaScript à l'aide de Greasemonkey ou Tampermonkey?
  • Facebook "J'aime" rappel de bouton
  • Le popup de l'extension Chrome ne fonctionne pas, les événements sur les clics ne sont pas traités
  • Comment puis-je demander à Greasemonkey de cliquer sur un bouton qui n'apparaît qu'après un délai?
  • Mon code simple:

    Product price: $500 <br> Total price: $500 <br> <input type="button" onclick="change()" value="2
    Qty"> <input type="button" value="4
    Qty"> <br> Total <input type="text" id="count" value="1"> 

  • Javascript Confirmez le popup Oui, pas de bouton au lieu de OK et Annuler
  • Case à cocher HTML onclick appelé Javascript
  • Existe-t-il un danger pour l'utilisation de champs de saisie en dehors / sans formes dans les pages HTML / Javascript?
  • Puis-je faire un <bouton> ne pas soumettre un formulaire?
  • Cliquez sur un bouton chaque seconde
  • Validation en direct à l'aide de javascript
  • 5 Solutions collect form web for “Changer la valeur d'entrée sur le bouton Cliquer – javascript pur ou jQuery”

    Une autre solution simple pour ce cas en utilisant jQuery. Gardez à l'esprit que ce n'est pas une bonne pratique d'utiliser le javascript en ligne.

    JsFiddle

    J'ai ajouté des ID à html sur le prix total et sur les boutons. Voici le jQuery.

     $('#two').click(function(){ $('#count').val('2'); $('#total').text('Product price: $1000'); }); $('#four').click(function(){ $('#count').val('4'); $('#total').text('Product price: $2000'); }); 

    Utilisant l'attribut de données html5 …

    essaye ça

    Html

     Product price: $<span id="product_price">500</span> <br>Total price: $500 <br> <input type="button" data-quantity="2" value="2&#x00A;Qty"> <input type="button" data-quantity="4" class="mnozstvi_sleva" value="4&#x00A;Qty"> <br>Total <input type="text" id="count" value="1"> 

    JS

     $(function(){ $('input:button').click(function () { $('#count').val($(this).data('quantity') * $('#product_price').text()); }); }); 

    Violons ici

    Et voici la réponse non jQuery.

    Fiddle: http://jsfiddle.net/J7m7m/7/

     function changeText(value) { document.getElementById('count').value = 500 * value; } 

    HTML légère modification:

     Product price: $500 <br> Total price: $500 <br> <input type="button" onclick="changeText(2)" value="2&#x00A;Qty"> <input type="button" class="mnozstvi_sleva" value="4&#x00A;Qty" onClick="changeText(4)"> <br> Total <input type="text" id="count" value="1"/> 

    EDIT: Il est très clair que c'est une manière non souhaitée comme indiqué ci-dessous (je l'avais venu). Donc, dans l'essence, c'est comme ça que vous le feriez dans un javascript simple. La plupart des gens vous suggèrent d'utiliser jQuery (une autre réponse a la version jQuery) pour une bonne raison.

    Essayez ceci (javascript simple): –

     <!DOCTYPE html> <html> <script> function change(value){ document.getElementById("count").value= 500*value; document.getElementById("totalValue").innerHTML= "Total price: $" + 500*value; } </script> <body> Product price: $500 <br> <div id= "totalValue">Total price: $500 </div> <br> <input type="button" onclick="change(2)" value="2&#x00A;Qty"> <input type="button" onclick="change(4)" value="4&#x00A;Qty"> <br> Total <input type="text" id="count" value="1"> </body> </html> 

    J'espère que ceci vous aidera..

    Ma tentative ( JsFiddle )

    Javascript

     $(document).ready(function () { $('#buttons input[type=button]').on('click', function () { var qty = $(this).data('quantity'); var price = $('#totalPrice').text(); $('#count').val(price * qty); }); }); 

    Html

      Product price:$500 <br>Total price: $<span id='totalPrice'>500</span> <br> <div id='buttons'> <input id='qty2' type="button" data-quantity='2' value="2&#x00A;Qty"> <input id='qty2' type="button" class="mnozstvi_sleva" data-quantity='4' value="4&#x00A;Qty"> </div> <br>Total <input type="text" id="count" value="1"> 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.