Javascript onClickは2回クリックしない限り実行されません

私のテーブルのJavaScriptに別の問題があります。基本的に、私が投稿したリンクを見ると、チェックマークと赤色の3つのセルがあります。セルをクリックすると、チェックマークが削除され、セルの色が変わります。リセットボタンでテーブルを初期状態に戻したいと思います。ただし、これには2回のクリックが必要です。最高のがあるでしょうソースを表示するが、ここでそれが動作することはできません私のjavascriptのコードであるhttp://cs1.ucc.ie/~od1/project_css/Javascript onClickは2回クリックしない限り実行されません

：あなたはここにリンク上でこれをテストすることができ

 function resetColour(objName){ 
      var arr = document.getElementsByName(objName); 
      var arrLen = arr.length; 

      for(var i = 0; i < arrLen; i++){ 
       if(arr[i].checked){ 
        arr[i].parentNode.style.backgroundColor = "#F26C4F"; 
       } 
       else{ 
        arr[i].parentNode.style.backgroundColor = "#FAF4E3"; 
       } 
      } 
     }

は、私ができる方法はありますワンクリックでフォームをリセットして色を変更しますか？

出典

2012-03-20 cs_irl

それはあります。あなたがすることができる最も簡単な（しかし最悪の）方法は、あなたの関数を呼び出すのを数ミリ秒待つことです。

<input type="reset" name="reset" value="Reset" onclick="setTimeout('resetColour(\'free\')',200)" class="button">

編集より良いオプションがform.reset、代わりにリセットボタンの通常のボタンを使用し、最初の関数を呼び出すことで、

<input type="button" value="Reset Form" onClick="resetColour('free')';this.form.reset()" />

出典

2012-03-20 17:03:51 PraveenVenu

私のペンティアム90はペースに追いついて震える... –

ありがとう。私は実際にプログラムを試して解決するためにsetTimeoutを使用しましたが、私はちょうどタイミングを乱し、マシンに十分なクレジットを与えませんでした！ –

あなたの2番目の解決策は私が試したが動作しなかった別のものでした。一番上のものが完璧に動作し、私は5msまでの時間を得ました。 –

-2

私はあなたがjQueryのを使用することをお勧めして人工的なクリックを実行し、そのようになります。実際のリセットが起こる前に、それが機能を呼び出すため

$('#formSubmitButtonIDHere').trigger('click');

出典

2012-03-20 17:03:34 LenPopLilly

投票の理由は？ – LenPopLilly

私はdownvoteしませんでしたが、実際には問題を解決していない厄介なハッキングを実行するために、実際にはそれを使用しないページのための大規模なライブラリをロードすることを提案しています（イベントが発生しているという事実チェックボックスの値が変更される前）。また、慎重でなくても、無限のクリックのループを簡単に入力できます。 –

ポスターがjQueryを使用していません。また、問題を解決しているだけでは正しく機能していないようです。 – zgood

問題はonclickイベントハンドラが起動されていることですの前にブラウザが実行するアクションが実行されます（return falseを実行してイベントをキャンセルできますが、通常は便利です）。イベントはありませんが、代替方法があります。

テーブルセルの色を変更するロジックにリセットボタンがあるのではなく、onchangeイベントでチェックボックス自体にチェックボックスを入れます。

ループをforループでプログラムで登録することができ、の値の後にそのコールバックがと呼び出されます。

出典

2012-03-20 17:15:29

ここで私はそれをやるでしょう。

は、私がonclickにsetTimeoutまたはreturn falseを置くことは、このついて行くには間違った方法だと思い次に

function resetColour(objName){ 
     var arr = document.getElementsByName(objName); 
     var arrLen = arr.length; 

     for(var i = 0; i < arrLen; i++){ 
      var checkbox = arr[i]; 
      if(checkbox.hasAttribute('checked')){ 
       checkbox.checked = true; 
       checkbox.parentNode.style.backgroundColor = "#F26C4F"; 
      } 
      else{ 
       checkbox.parentNode.style.backgroundColor = "#FAF4E3"; 
      } 
     } 
    }

出典

2012-03-20 17:29:12

を通常のボタン

<input type="button" value="Reset Form" onClick="resetColour('free')" />

を使用してください。

formのonresetイベントを代わりに使用します。

非常に簡単な例は次のようになります。

<!DOCTYPE html> 
<html> 
<head> 
    <title>sfs</title> 

<style type="text/css"> 

form { 
    width: 400px; 
    height: 400px; 
    border: solid black 1px;  
} 


</style> 

<script language="javascript" type="text/javascript"> 

function hello(form) { 
    form.style.backgroundColor = "#F26C4F";   
} 


</script> 

</head> 

<body> 

<form onreset="hello(this)"> 

<input type="input" value="blah" /> 

<input type="reset" value="Reset" /> 

</form> 

</body> 

</html>

けれども、もう少し高度な主題。、それはonresetイベントが発生したときに、フォームの状態を持っていることを、注目する価値があるの直前にも

<!DOCTYPE html> 
<html> 
<head> 
    <title>sfs</title> 

<style type="text/css"> 

form { 
    width: 400px; 
    height: 400px; 
    border: solid black 1px;  
} 


</style> 

<script language="javascript" type="text/javascript"> 

window.onload = function() { 
    document.forms["myForm"].onreset = function() { 
     this.style.backgroundColor = "#F26C4F";   
    } 
} 

</script> 

</head> 

<body> 

<form name="myForm"> 

<input type="input" value="blah" /> 

<input type="reset" value="Reset" /> 

</form> 

</body> 

</html>

：私はあなたがもはやインラインonresetイベントにフックしない機能を作ることによって、それを改善しますフィールドはデフォルトにリセットされます。したがって、リセットする前に既存の値で何かをする必要がある場合は、問題ではありません。

出典

2012-03-20 18:21:04 user17753

Javascript onClickは2回クリックしない限り実行されません

答えて

関連する問題