У меня есть веб-приложение для табло, которое будет отслеживать результаты для 2 команд. Как я могу сделать так, чтобы несколько пользователей могли использовать приложение одновременно, и обе команды могли видеть один и тот же счет? В настоящее время, если у меня есть 2 экземпляра приложения, открытого в браузере, они не будут отражать ту же оценку при увеличении одного.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("btn-sub-1").addEventListener("click", function() {
Counter('s1');
}, false);
document.getElementById("btn-add-1").addEventListener("click", function() {
Counter('a1');
}, false);
document.getElementById("btn-sub-2").addEventListener("click", function() {
Counter('s2');
}, false);
document.getElementById("btn-add-2").addEventListener("click", function() {
Counter('a2');
}, false);
});
function Counter(val) {
var score_1 = parseInt(document.getElementById("lbl-score-1").innerHTML);
var score_2 = parseInt(document.getElementById("lbl-score-2").innerHTML);
if (val=='s1' && score_1>0) {
score_1--;
document.getElementById("lbl-score-1").innerHTML = score_1;
} else if (val=='a1') {
score_1++;
document.getElementById("lbl-score-1").innerHTML = score_1;
} else if (val=='s2' && score_2>0) {
score_2--;
document.getElementById("lbl-score-2").innerHTML = score_2;
} else if (val=='a2') {
score_2++;
document.getElementById("lbl-score-2").innerHTML = score_2;
}
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<?!= include("8-general-css"); ?>
<?!= include("8-landscape-css"); ?>
<?!= include("8-portrait-css"); ?>
</head>
<body>
<div class="grid-container">
<div class="team-1-container">
<label class="lbl-team blk-text font-header" id="lbl-team-1">Team 1</label>
</div>
<div class="player-1-container">
<select class="browser-default player-select font-opt" id="player-opt-1">
<option value="" disabled selected>Player 1</option>
<?!= players;?>
</select>
</div>
<div class="stats-1-container">
<div class="lbl-elo-container">
<label class="lbl-elo blk-text font-stats" id="lbl-elo-1">ELO: </label>
<label class="lbl-elo-val blk-text font-stats" id="lbl-elo-val-1">-</label>
</div>
<div class="lbl-win-container">
<label class="lbl-win blk-text font-stats" id="lbl-win-1">Win Prob: </label>
<label class="lbl-win-val blk-text font-stats" id="lbl-win-val-1">-%</label>
</div>
</div>
<div class="player-3-container">
<select class="browser-default player-select font-opt" id="player-opt-3">
<option value="">Player 3</option>
<?!= players;?>
</select>
</div>
<div class="sub-1-container">
<button class="btn-sub font-btn" id="btn-sub-1"><span>-</span></button>
</div>
<div class="score-1-container">
<label class="lbl-score blk-text font-score" id="lbl-score-1">0</label>
</div>
<div class="add-1-container">
<button class="btn-add font-btn" id="btn-add-1">+</button>
</div>
<div class="reset-container">
<button class="btn-reset-submit font-reset-submit" id="btn-reset">Reset</button>
</div>
<div class="submit-container">
<button class="btn-reset-submit font-reset-submit" id="btn-submit">Submit</button>
</div>
<div class="sub-2-container">
<button class="btn-sub font-btn" id="btn-sub-2">-</button>
</div>
<div class="score-2-container">
<label class="lbl-score blk-text font-score" id="lbl-score-2">0</label>
</div>
<div class="add-2-container">
<button class="btn-add font-btn" id="btn-add-2">+</button>
</div>
<div class="player-2-container">
<select class="browser-default player-select font-opt" id="player-opt-2">
<option value="" disabled selected>Player 2</option>
<?!= players;?>
</select>
</div>
<div class="stats-2-container">
<div class="lbl-elo-container">
<label class="lbl-elo blk-text font-stats" id="lbl-elo-2">ELO: </label>
<label class="lbl-elo-val blk-text font-stats" id="lbl-elo-val-2">-</label>
</div>
<div class="lbl-win-container">
<label class="lbl-win blk-text font-stats" id="lbl-win-2">Win Prob: </label>
<label class="lbl-win-val blk-text font-stats" id="lbl-win-val-2">-%</label>
</div>
</div>
<div class="player-4-container">
<select class="browser-default player-select font-opt" id="player-opt-4">
<option value="">Player 4</option>
<?!= players;?>
</select>
</div>
<div class="team-2-container">
<label class="lbl-team blk-text font-header" id="lbl-team-2">Team 2</label>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include("8-ball-js"); ?>
<?!= include("8-ball-swipe-score"); ?>
</body>
</html>