JavaScriptでonclickを使用して関数内のオブジェクトプロパティを変更する方法

Question

私はプログラミングには慣れていますが、私にとっては少し挑戦的なことをしようとしています。

私はチェスゲームを表示し、ユーザーがゲームを通過できるようにするウェブサイトでCanvas Chess PGN viewerを使用します。私は異なるゲームのチェス盤を1つだけ使用したいので、チェス盤スクリプトのソースプロパティ値を変更してスクリプトを再実行するonclickイベントを作成しようとしていますが、その方法を理解できません。

"pgn_uri"プロパティは、ボタンをクリックすることによって変更する必要があります。ユーザーが「Round2」をクリックすると「pgn_uri：secondGame」などに変わります。チェス盤が更新されるように、CHESS.PgnViewer（）関数のスクリプトも再度実行する必要があります。

<button type="button" name="button" id="round1">Round1</button> 
<button type="button" name="button" id="round2">Round2</button> 
<button type="button" name="button" id="round3">Round3</button> 

<script src="canvaschess\canvaschess-0.1.0.min.js"></script> 
<script src="canvaschess\pgnviewer-0.1.0.min.js"></script> 

<script type="text/javascript"> 
var firstGame = 'canvaschess/pgns/round1.pgn'; 
var secondGame = 'canvaschess/pgns/round2.pgn'; 
var thirdGame = 'canvaschess/pgns/round3.pgn'; 
</script> 

<script> 
var viewer = new CHESS.PgnViewer({ 
pgn_uri: firstGame, 
square_color_dark: '#000', 
square_color_light: '#fff', 
square_uri_dark: 'canvaschess/img/themes/wood/square_dark.jpg', 
square_uri_light: 'canvaschess/img/themes/wood/square_light.jpg', 
show_labels: false, 
show_tags: true 
}); 
</script> 

Answer 1

のonclickイベント 例えば

を追加してみてくださいは、変数を保持する "グローバル" としてchessGameを言うと、その値を変更するには、ボタン

$('#round2').onclick(function() 
{ 
chessGame ='secondGame'; 
}); 

のonclickのとでは代わりに "firstGame" の "chessGame" を渡します新しいCHESS.PgnViewer

Answer 2

各ボタンでクリックイベントを追加する可能性がありますので、おそらくこのコード

// Assume you have global variable name game 
$('#btn1, #btn2, #btn3').on('click', function(){ 
    var btn_clicked = $(this).attr('id'); // get id value 
    switch (btn_clicked) { 
     case 'btn1': 
      game = 'canvaschess/pgns/round1.pgn'; 
      break; 
     case 'btn2': 
      game = 'canvaschess/pgns/round2.pgn'; 
      break; 
     case 'btn3': 
      game = 'canvaschess/pgns/round3.pgn'; 
      break; 
    } 
}); 

これで、新しいCHESS.PgnViewer

ノートにグローバル変数を渡すことができます。私はこのコードをテストふふふdidntの！