web-dev-qa-db-ja.com

クリック時の入力値の変更-純粋なJavaScriptまたはjQuery

2つのボタンがあり、ボタンをクリックすると、入力テキストの値を変更し、合計価格（製品価格*ボタンの値-2または4 Qty）を変更する必要があります。

私はそれが簡単であることを知っていますが、私はjavascriptやjQueryが苦手です。 jsfiddleでの回答が最適です。
私のjsfiddleはここにあります http://jsfiddle.net/J7m7m/1/

私の簡単なコード：

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
6
Jaroslav Klimčík

この場合のjQueryを使用した別の簡単なソリューション。インラインjavascriptを使用することはお勧めできません。

JsFiddle

合計価格とボタンにIDをhtmlに追加しました。これがjQueryです。

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

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

これを試してください（シンプルな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>

これがあなたを助けることを願っています。

4
Vikash Pandey

html5データ属性を使用しています...

これを試して

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

ここを中心に

2
bipen

そして、ここに非jQueryの答えがあります。

フィドル： http://jsfiddle.net/J7m7m/7/

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

HTMLのわずかな変更：

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

編集：これが以下で指摘されているように、これが望ましくない方法であることは非常に明確です（私はそれを持っていました）。したがって、本質的には、これが普通の古いjavascriptで行う方法です。ほとんどの人は、正当な理由でjQuery（他の回答にはjQueryバージョンがあります）を使用することを勧めます。

2
JofryHS

これはあなたのためにうまくいきます

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