change not working jQuery

-2

私はdivで変更値を表示しようとしていますが、動作しません。次に例を示します。プラスとマイナスのためchange not working jQuery

button_up=document.getElementById('up'); 
 
button_down=document.getElementById('down'); 
 

 
button_up.onclick=function() {setQuantity('up');} 
 
button_down.onclick=function() {setQuantity('down');} 
 

 
quantity = document.getElementById('quantity'); 
 

 
function setQuantity(upordown) { 
 

 
    if (quantity.value > 1) { 
 
     if (upordown == 'up'){++quantity.value;} 
 
     else if (upordown == 'down'){--quantity.value;}} 
 
    else if (quantity.value == 1) { 
 
     if (upordown == 'up'){++quantity.value;}} 
 
    else 
 
     {quantity.value=1;} 
 

 
} 
 

 
$('.order-option input[type=\'text\']').change(function(){ 
 
      $('.show').text($('#quantity').val()) 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="order-option">Quantity: <span id="quantity-field"> 
 
     <button id="down">-</button> 
 
     <input type="text" id="quantity" value="1"> 
 
     <button id="up">+</button> 
 
    </span> 
 
</div> 
 
<div class="show"></div>

出典

2016-08-01 MAHAR

は、変更イベントを発生させる何かをするときにうまく機能します。 *ヒントヒント* –

あなたはjsをたくさん混ぜているようです。一貫性を維持しようとすると、document.getElementByIdは機能しますが、jqueryを使用しているので、なぜ$（ "＃quantity"）だけではないのですか？ – JonH

Changeイベントが文句を言わない呼び出される必要はありません、それはときにのみトリガされますあなたはマウスやキーボードで値を強制的に変更します...そのため、機能ごとに数量を設定しながら変更イベントをトリガする必要があります。

var button_up=document.getElementById('up'); 
var button_down=document.getElementById('down'); 

button_up.onclick=function() {setQuantity('up');} 
button_down.onclick=function() {setQuantity('down');} 

var quantity = document.getElementById('quantity'); 
var $targetInput = $('.order-option input[type=\'text\']'); 
function setQuantity(upordown) { 

    if (quantity.value > 1) { 
     if (upordown == 'up'){++quantity.value;} 
     else if (upordown == 'down'){--quantity.value;}} 
    else if (quantity.value == 1) { 
     if (upordown == 'up'){++quantity.value;}} 
    else 
     {quantity.value=1;} 
    $targetInput.trigger('change'); 
} 

$targetInput.change(function(){ 
    $('.show').text($('#quantity').val()) ; 
    });

出典

2016-08-01 19:53:39 CNKR

あなたのボタンは、変更を通知するためにクリックイベントを処理する必要があります。たとえば、入力フィールドに直接入り、数字を入力してフォーカスを失った場合、divを表示して更新を取得します。

まず、両方のボタンに同じクラス名をクラスを割り当てる：

<button class="movingOnUpOrDown" id="down">-</button> 
<button class="movingOnUpOrDown" id="up">-</button>

そして、クラスレベルでイベントを処理：

$(".movingOnUpOrDown").click(function(){ 
    $('.show').text($('#quantity').val()); 
});

あなたがしたいことがあり、次のようにあなたが何かを行うことができますあなたが既にセットを持っているので、getValueへのメソッドの呼び出しなど、これをリファクタリングします。ボタンのクリックイベントでは、setValue()関数を呼び出して、その直後にgetValue()にすることができ、この関数は単にあなたの数量を返します。

これはすべてテストされているわけではありませんが、他の可能性について検討する必要があります。あなたはjQueryを使ってやろうとしているとき、あなたのsetQuantity機能

function setQuantity(upordown) {  
    if (quantity.value > 1) { 
     if (upordown == 'up'){++quantity.value;} 
     else if (upordown == 'down'){--quantity.value;}} 
    else if (quantity.value == 1) { 
     if (upordown == 'up'){++quantity.value;}} 
    else{ 
     quantity.value=1; 
    } 
    $('.show').html(quantity.value); 
}

で

出典

2016-08-01 19:46:00 JonH

作業の例を追加できますか？ – MAHAR

はいが追加されました。両方のボタンにクラス名を設定してから、クリックイベントを処理します。 – JonH

小さな変化は、あなたがこの

$('.order-option input[type=\'text\']').change(function(){ 
      $('.show').text($('#quantity').val()) 
     });

出典

2016-08-01 19:50:20 jonju

これはもう一つの可能性ですが、私はsetが値を設定するだけで、この値を得るためには別のメソッドが呼び出されるべきだと思います。 – JonH

これは私の質問ではありません – MAHAR

@MAHARあなたの質問は何ですか？それで？ div – jonju

あなたが投稿したのと同じ順序でコードをお持ちの場合、それは動作しません。

通常、マークはJavascriptで動作する前にブラウザにダウンロードする必要があるため、最初にマークが表示されます。

だから、

HTML JavaScriptライブラリのjQueryのようにとして参照して、カスタムのJavaScriptとなります。

あなたのコードを実行して、コンソールでエラーが発生しました.nullでonclickを定義することはできません。あなたのボタンは、HTMLがダウンロードされるのを待たずにjavascriptが実行されているときにはnullです。

jQueryでは、コードを実行する前にhtml（DOM）がダウンロードされるのを待つためにdocument.ready（）を使用できます。

コードの再編成を試し、コードをdocument.readyでラップし、最新のブラウザのDeveloper Tools（Console）にも注意してください。

これで問題が解決しない場合は、もう一度ここに戻ってください。

私はちょうどあなたのコードを編集していると私は、数量入力フィールドからテキストがマイナーチェンジでショーのdivに表示されるように得ることができます。

<html> 
<body> 
<div class="order-option">Quantity: <span id="quantity-field"> 
     <button id="down">-</button> 
     <input type="text" id="quantity" value="1"> 
     <button id="up">+</button> 
    </span> 
</div> 
<div class="show"></div> 
</body> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 

$(function(){ 
button_up=document.getElementById('up'); 
button_down=document.getElementById('down'); 

button_up.onclick=function() {setQuantity('up');} 
button_down.onclick=function() {setQuantity('down');} 

quantity = document.getElementById('quantity'); 

function setQuantity(upordown) { 

    if (quantity.value > 1) { 
     if (upordown == 'up'){++quantity.value; $('.show').text($('#quantity').val()) ;} 
     else if (upordown == 'down'){--quantity.value;}} 
    else if (quantity.value == 1) { 
     if (upordown == 'up'){++quantity.value;}} 
    else 
     {quantity.value=1;} 

} 

$('.order-option input[type=\'text\']').change(function(){ 
      $('.show').text($('#quantity').val()) 
     }); 
     }); 
</script>

量の入力が物理的に変更されていないため、onchangeイベントは発生しません。テストする場合は、数量入力フィールドにカーソルを置き、そこに何かを入力して、画面のどこかをクリックすると、数量ボックスに入力したものがshow divに表示されます。これは、入力フィールドを変更してフォーカスを移動したためです。

このように、数量入力フィールドを更新すると同時に（すでに上記のコードにその1つの例を追加しています）、show divを更新し、機能しないonchangeイベントを削除することをお勧めします。

出典

2016-08-01 19:59:15

答えて

関連する問題