webentwicklung-frage-antwort-db.com.de

Eingabewert ändern onclick button - reines Javascript oder jQuery

Ich habe zwei Buttons und wenn ich auf einen Button klicke, muss ich den Wert im Eingabetext ändern und den Gesamtpreis ändern (Produktpreis * Wert des Buttons - 2 oder 4 Qty). 

Ich weiß, dass es einfach ist, aber ich bin nicht gut in Javascript oder jQuery. Antwort in jsfiddle wäre am besten.
Mein jsfiddle ist hier http://jsfiddle.net/J7m7m/1/

Mein einfacher Code:

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

Eine weitere einfache Lösung für diesen Fall mit jQuery. Denken Sie daran, dass es nicht empfehlenswert ist, Inline-Javascript zu verwenden.

JsFiddle

Ich habe html-IDs zum Gesamtpreis und zu den Schaltflächen hinzugefügt.

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

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

Versuchen Sie folgendes (einfaches Javascript): -

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

Hoffe das wird dir helfen ..

3
Vikash Pandey

mit html5-Datenattribut ...

versuche dies

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

Geige hier

2
bipen

Und hier ist die Antwort, die nicht jQuery ist.

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

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

HTML geringfügige Änderung:

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: Es ist sehr klar, dass dies ein unerwünschter Weg ist, wie unten ausgeführt (ich hatte es vor mir). Im Grunde würden Sie dies also in normalem Javascript tun. Die meisten Leute würden aus gutem Grund vorschlagen, jQuery zu verwenden (andere Antwort hat die jQuery-Version).

2
JofryHS

Das wird gut für Sie funktionieren

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