web-dev-qa-db-fra.com

Changer la valeur d'entrée au bouton de clic - JavaScript pur ou jQuery

J'ai deux boutons et si je clique sur un bouton, je dois modifier la valeur du texte saisi et le prix total (prix du produit * valeur du bouton - 2 ou 4 quantités). 

Je sais que c'est simple mais je ne suis pas bon en javascript ou jQuery. Réponse en jsfiddle serait le mieux.
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&#x00A;Qty">
<input type="button" value="4&#x00A;Qty">
<br>
Total <input type="text" id="count" value="1">
javascriptjquerybuttoninputonclick
4
Jaroslav Klimčík

Une autre solution simple pour ce cas en utilisant jQuery. N'oubliez pas que l'utilisation de javascript en ligne n'est pas une bonne pratique.

JsFiddle

J'ai ajouté des identifiants au format HTML sur le prix total et sur les boutons ..___.

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

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

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

3
Vikash Pandey

en 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());
});
});

violon ici

2
bipen

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 désirée, comme indiqué ci-dessous (je l'avais à venir). En gros, voici comment procéder en javascript. La plupart des gens vous suggèrent d'utiliser jQuery (l'autre réponse a la version jQuery) pour une bonne raison.

2
JofryHS

Cela fonctionnera bien pour vous

   <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
    function myfun(){
    $(document).ready(function(){

        $("#select").click(
        function(){
        var data=$("#select").val();
            $("#disp").val(data);
                            });
    });
    }
    </script>
    </head>
    <body>
    <p>id <input type="text" name="user" id="disp"></p>
    <select id="select" onclick="myfun()">
    <option name="1"value="one">1</option>
    <option name="2"value="two">2</option>
    <option name="3"value="three"></option>
    </select>
    </body>
    </html>
0
Ganesh Nagare