1

ここにいるのは単なるアマチュア/愛好家です-これが行うことになっているのは、私が友達と遊ぶボードゲームのツールになることです. ゲームで使用するプラスチック製のスライダーは緩すぎて信頼できないため、その機能をスマートフォンでプレイしながら使用する Web ページとして再現したいと考えました。

（別のページの）フォームからキャラクターの名前を取得し、それを下のフォームに提供します。名前に基づいて、switch ステートメントから適切な属性セットを選択し (簡単にするために 2 つを除いてすべて削除しました)、for ループを実行して属性をリストに表示し、「現在の」値を次のように強調表示します。緑。2 つのボタンは、配列カウンター (「速度」) を増加または減少させ、新しい強調表示された値で配列を描画する関数を再実行することになっています。innerHTML は、新しい結果で div (「speeddiv」) を再描画するためのものです。

Chrome の JavaScript コンソールは、speedcounter() と文字が定義されていないことを教えてくれます。これは、使用している関数と変数のスコープが innerhtml で失われていることに関係していると思われます。私がやりたいのは、統計カウンターを簡単に再描画/置換する方法を見つけて、div 内で + または - ボタンを押すと、強調表示された数字が上下に移動するように見えることだけです。以下の「速度」属性にのみ取り組んでいるので、最初にそれを機能させることができます。

<!DOCTYPE html>
<html>
<body>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; }
#dossier {height: 10%; text-align: center; background: #808080}
#container {height: 90%; width: 100%; background: #000000; overflow: hidden; float: left}
#stats {height: 100%; width: 100%; float: left; position: relative}
#speeddiv, #mightdiv, #sanitydiv, #knowledgediv {width: 25%; height: 100%; text-align: center; float: left; position: relative; overflow: hidden}
#speeddiv {background: #0000FF}
#mightdiv {background: #FF0000}
#sanitydiv {background: #FFFF00}
#knowledgediv {background: #00FF00}
</style>

<?php $character = $_GET["character"]; ?>

<script type="text/javascript">

 var character = "<?php echo $character ?>";
 var sp;
 var speed;

 function speedcounter() {
  var spx;
  document.write('   <h2>Speed</h2></br>');
  document.write('<input type="button" onclick="addspeed();" value="+"><br />');   

  for (spx=8; spx>=0; spx--) {
   if (spx == speed) { 
   document.write('<font color=#00FF00>');
   }
   document.write(sp[spx]); 
   document.write('<font color=#000000><br />');
  }
  document.write ('<input type="button" onclick="remspeed();" value="-">'); 
 }

function addspeed() {
 if (speed < 8) {
  speed++;
  document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
 }
}

function remspeed() {
 if (speed > 0) {
  speed--;
  document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
 }
}

switch (character) {
 case "brandon":

 sp=["0","3","4","4","4","5","6","7","8"];
 mt=["0","2","3","3","4","5","6","6","7"];
 sn=["0","3","3","3","4","5","6","7","8"];
 kn=["0","1","3","3","5","5","6","6","7"];

 speed=3;
 might=4;
 sanity=4;
 knowledge=3;

 break;

 case "flash":

 sp=["0","4","4","4","5","6","7","7","8"];
 mt=["0","2","3","3","4","5","6","6","7"];
 sn=["0","1","2","3","4","5","5","5","7"];
 kn=["0","2","3","3","4","5","5","5","7"];

 speed=5;
 might=3;
 sanity=3;
 knowledge=3;

 break;
 }

</script>

<div id="dossier">
 <script type="text/javascript">
  document.write(character);
 </script>
</div>
<div id="container">
 <div id="stats">
  <div id="speeddiv">
   <script type="text/javascript">
    speedcounter();
   </script>
  </div>
  <div id="mightdiv">
   <h2>Might</h2></br></br>
  </div>
  <div id="sanitydiv">
   <h2>Sanity</h2></br></br>
  </div>
  <div id="knowledgediv">
   <h2>Knowledge</h2></br></br>
  </div>
 </div>
</div>

</script>

</body>
</html>
4

1 に答える 1

1

あなたが投稿したコードから jsfiddle を作成しましたhttp://jsfiddle.net/amelvin/bwwce/ - そこでインタラクティブに作業すると役立つ場合があります。

あなたの問題は、document.write; で何が起こっているかだと思います。document.write のセクションでは、document.write が行うことはあまり予測できないと説明しています。

jquery のような JavaScript ライブラリを使用して、document.write ではなく Web ページに要素を挿入します。jqueryの html() メソッド(特に) を使用すると、ボタンの押下、追加または削除などのイベントに基づいて、ページのあらゆる側面を動的かつ予測どおりに操作できます。ボタンまたは div。

于 2012-06-07T22:52:40.900 に答える