すべて</p> <p>動的

Question

良い一日のページの内容を更新するために、バニラJSを使用したので、私は基本的にチャットルームをオフに実行し、古い学校のペン&紙のRPGであるプロジェクトに取り組んでいます。しかし、キャラクターのスキルや統計は属性に基づいているため、初期値が設定されている間に、これらの属性を調整するときに統計とスキルを動的に更新する方法を見つける必要があります。私はこれがAngularのためにおそらくシンチであることを知っていますが、動きの少ない部品は失敗する可能性は低いと思います。

基本的に目標は、属性が更新されるときにスキルと統計が更新されるようにJSを設定することです。ここでは、コードの属性について、これまでです：

<td colspan="2">MEMORY</td> 
    <td colspan="2">  
    <button onclick="decMem();" class="modButton" type="button">-</button> 
    <input type="text" id="MEM" class="trait" readonly /><script>document.getElementById("MEM").setAttribute('value', Mem);</script> 
    <button onclick="incMem();" class="modButton" type="button">+</button> 
    </td> 

function incMem(){ 
if (traitPts > 0 && Mem < 20){ 
traitMod += 1; 
Mem += 1; 
traitPts -= 1; 
document.getElementById("MEM").setAttribute('value', Mem); 
document.getElementById("traitPts").setAttribute('value', traitPts); 
} else { alert("CAN'T INCREASE FURTHER");}} 

function decMem(){ 
if (traitMod > 0 && Mem > mem){ 
traitMod -= 1; 
Mem -= 1; 
traitPts += 1; 
document.getElementById("MEM").setAttribute('value', Mem); 
document.getElementById("traitPts").setAttribute('value', traitPts); 
} else { alert("CAN'T REDUCE FURTHER");}} 

そして、統計情報やスキルのそれぞれがそうのような変数によって決定されます。

//COMBAT STATS 
var seq = Math.floor((Per + Spd)/2); 
var act = Math.floor(Spd/2); 
var block = Math.floor((Dex + Spd)/2); 
var dodge = Math.floor((Dex + Spd)/4); 

//UNIVERSAL SKILLS 
var stealth = (Per * 3) + Dex; 
var climb =  (Dex * 3) + Str; 
var negot =  Cha * 4; 
var navig =  (Log * 2) + Per + Mem; 

と、次のようにページに送信：

<td>STEALTH</td> 
    <td><input type="text" id="stealth" readonly/><script>document.getElementById("stealth").setAttribute('value', stealth);</script></td> 
    <td>CLIMBING</td> 
    <td><input type="text" id="climb" readonly /><script>document.getElementById("climb").setAttribute('value', climb);</script></td> 

私がページをリロードすると、すべての属性が設定されてサイコロをシミュレートするように変更されますので、私はここで紛失しています。しかし、これはPHPのページなので、一時的にデータを保存する方法がありますか？助けてください！

Answer 1

Javascriptでやり直し、変数を更新して維持するためのオプションがいくつかあります。閲覧セッションの終了時に情報を消去したい場合はsessionStorageを使用できますが、アプリケーションに無期限に利用したい場合はlocalStorageを使用できます。ドキュメントについては、MDNを参照してください。

基本的には、ブラウザでデータを「保存」するためにやるものです：

localStorage.setItem('myCat', 'Tom'); 
// or 
sessionStorage.setItem('myCat', 'Tom'); 

が次に出て、後でデータを取得するために、あなたは

var cat = localStorage.getItem('myCat'); 

を使用しますどの、中この場合、値を返す'Tom'