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/

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"> 

  • Problème de bouton de soumission par envoi multiple?
  • Différencier le déclenchement de la souris et du clavier sur le clic
  • Appel de deux fonctions sur un même événement de clic avec d3.js
  • Fonction n'entendant pas dans un événement onclick
  • Comment gérer correctement un événement onclick en conjonction avec un onblor
  • OnClick vs OnClientClick pour un asp: CheckBox?
  • Javascript: obtenez le contenu actuel "onclick" de l'élément
  • Capturez le bouton Twitter "Tweet" en utilisant jQuery
  • 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.