如何使用函数减少值

Question

嘿，实际上我做了一个 html 页面，其中有两个部分，当我点击第一部分时，数字会增加，当我点击第二部分时，第二部分的数字会增加。我为此使用了 javascript。现在我在每个页面的底部做了一个按钮。我想要当我点击那个按钮时数字应该减少我尝试了很多方法但是每次我失败当你运行 snipet 点击开始按钮你会看到我想要的减号按钮当我点击那个分数应该减少

     angular.module('scoreKeeper', []).

controller('score', ['$scope', function ($scope) {

  $scope.gameInfo = {

    gameStarted: false,

    servesSinceSwitch: 0,

    scoreSwitchMode: 0,

    numberOfPlayers: 2 };

  $scope.team1 = {

    name: "Team 1",

    score: 0,

    serving: false };

  $scope.team2 = {

    name: "Team 2",

    score: 0,

    serving: false };

  $scope.player1 = {

    name: "P1",

    serving: true };

  $scope.player2 = {

    name: "P2",

    serving: true };

  $scope.player3 = {

    name: null,

    serving: false };

  $scope.player4 = {

    name: null,

    serving: false };

  $scope.startGame = function () {$scope.gameInfo.gameStarted = true;};

  $scope.players = function (n) {

    $scope.gameInfo.numberOfPlayers = n;

    if (n == 2) {

      $scope.player3.name = null;

      $scope.player4.name = null;

    } else {

      $scope.player3.name = "P3";

      //$scope.player3.serving = true;

      $scope.player4.name = "P4";

    //$scope.player4.serving = true;

    }

  };

  $scope.addPoint = function (i) {

    // Start the game, give the Serving class to the person who won the rally

    if (!$scope.team1.serving && !$scope.team2.serving) {

      $scope['team' + i].serving = true;

      $scope.footer.message = "Game on!";

    } else {

      // Increment the player's score, how many serves since the last switch, and the highest current score

      $scope['team' + i].score++;

      $scope.gameInfo.servesSinceSwitch++;

      $scope.gameInfo.highestScore = Math.max($scope.team1.score, $scope.team2.score);

Answer 1

你可以通过这样做来修复它。在 HTML 中&nbsp;<header&nbsp; ng-click="addPoint(1, 1)" ng-class="{'serving__isServing':player1.serving,&nbsp;&nbsp;<h3&nbsp; &nbsp;ng-click="addPoint(2, -1)"&nbsp; &nbsp; type="button"&nbsp; id="subt1"&nbsp;在JS中&nbsp;$scope.addPoint = function (i, points_to_add)所以现在你必须点击标题来添加...见下面的代码。（运行代码段）angular.module('scoreKeeper', []).controller('score', ['$scope', function ($scope) {&nbsp; $scope.gameInfo = {&nbsp; &nbsp; gameStarted: false,&nbsp; &nbsp; servesSinceSwitch: 0,&nbsp; &nbsp; scoreSwitchMode: 0,&nbsp; &nbsp; numberOfPlayers: 2 };&nbsp; $scope.team1 = {&nbsp; &nbsp; name: "Team 1",&nbsp; &nbsp; score: 0,&nbsp; &nbsp; serving: false };&nbsp; $scope.team2 = {&nbsp; &nbsp; name: "Team 2",&nbsp; &nbsp; score: 0,&nbsp; &nbsp; serving: false };&nbsp; $scope.player1 = {&nbsp; &nbsp; name: "P1",&nbsp; &nbsp; serving: true };&nbsp; $scope.player2 = {&nbsp; &nbsp; name: "P2",&nbsp; &nbsp; serving: true };&nbsp; $scope.player3 = {&nbsp; &nbsp; name: null,&nbsp; &nbsp; serving: false };&nbsp; $scope.player4 = {&nbsp; &nbsp; name: null,&nbsp; &nbsp; serving: false };&nbsp; $scope.startGame = function () {$scope.gameInfo.gameStarted = true;};&nbsp; $scope.players = function (n) {&nbsp; &nbsp; $scope.gameInfo.numberOfPlayers = n;&nbsp; &nbsp; if (n == 2) {&nbsp; &nbsp; &nbsp; $scope.player3.name = null;&nbsp; &nbsp; &nbsp; $scope.player4.name = null;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $scope.player3.name = "P3";&nbsp; &nbsp; &nbsp; //$scope.player3.serving = true;&nbsp; &nbsp; &nbsp; $scope.player4.name = "P4";&nbsp; &nbsp; //$scope.player4.serving = true;&nbsp; &nbsp; }&nbsp; };&nbsp; $scope.addPoint = function (i, points_to_add) {&nbsp; &nbsp; // Start the game, give the Serving class to the person who won the rally&nbsp; &nbsp; if (!$scope.team1.serving && !$scope.team2.serving) {&nbsp; &nbsp; &nbsp; $scope['team' + i].serving = true;&nbsp; &nbsp; &nbsp; $scope.footer.message = "Game on!";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // Increment the player's score, how many serves since the last switch, and the highest current score&nbsp; &nbsp; &nbsp; $scope['team' + i].score+=points_to_add;&nbsp; &nbsp; &nbsp; if ($scope['team' + i].score== -1) {&nbsp; &nbsp; &nbsp; &nbsp; $scope['team' + i].score=0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $scope.gameInfo.servesSinceSwitch++;&nbsp; &nbsp; &nbsp; $scope.gameInfo.highestScore = Math.max($scope.team1.score, $scope.team2.score);&nbsp; &nbsp; &nbsp; // Echo who's in the lead or if it's tied&nbsp; &nbsp; &nbsp; if ($scope.team1.score > $scope.team2.score) {&nbsp; &nbsp; &nbsp; &nbsp; if ($scope.player3.name) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.gameInfo.teamWithHighScore = $scope.team1.name;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.gameInfo.teamWithHighScore = $scope.player1.name;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";&nbsp; &nbsp; &nbsp; } else if ($scope.team1.score < $scope.team2.score) {&nbsp; &nbsp; &nbsp; &nbsp; if ($scope.player3.name) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.gameInfo.teamWithHighScore = $scope.team2.name;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.gameInfo.teamWithHighScore = $scope.player2.name;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";&nbsp; &nbsp; &nbsp; } else if ($scope.team1.score == $scope.team2.score) {&nbsp; &nbsp; &nbsp; &nbsp; $scope.footer.message = "Game is tied";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if ($scope.team1.score == 10 && $scope.team2.score == 10) {&nbsp; &nbsp; &nbsp; &nbsp; $scope.gameInfo.scoreSwitchMode = 1;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // Figure out if serves are switching by 5&nbsp; &nbsp; &nbsp; if ($scope.gameInfo.servesSinceSwitch == 5 && $scope.gameInfo.scoreSwitchMode == 0) {&nbsp; &nbsp; &nbsp; &nbsp; $(".team").toggleClass("team__isServing");&nbsp; &nbsp; &nbsp; &nbsp; $scope.team1.serving = !$scope.team1.serving;&nbsp; &nbsp; &nbsp; &nbsp; $scope.team2.serving = !$scope.team2.serving;&nbsp; &nbsp; &nbsp; &nbsp; if ($scope.gameInfo.numberOfPlayers == 4) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($scope.team1.serving) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.player1.serving = !$scope.player1.serving;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.player3.serving = !$scope.player3.serving;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.player2.serving = !$scope.player2.serving;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.player4.serving = !$scope.player4.serving;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $scope.gameInfo.servesSinceSwitch = 0;&nbsp; &nbsp; &nbsp; &nbsp; // Or by 1&nbsp; &nbsp; &nbsp; } else if ($scope.gameInfo.scoreSwitchMode == 1) {&nbsp; &nbsp; &nbsp; &nbsp; $(".team").toggleClass("team__isServing");&nbsp; &nbsp; &nbsp; &nbsp; $scope.team1.serving = !$scope.team1.serving;&nbsp; &nbsp; &nbsp; &nbsp; $scope.team2.serving = !$scope.team2.serving;&nbsp; &nbsp; &nbsp; &nbsp; if ($scope.gameInfo.numberOfPlayers == 4) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($scope.team1.serving) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.player1.serving = !$scope.player1.serving;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.player3.serving = !$scope.player3.serving;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.player2.serving = !$scope.player2.serving;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.player4.serving = !$scope.player4.serving;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // Figure out if the game is over and who won&nbsp; &nbsp; &nbsp; if (Math.abs($scope.team1.score - $scope.team2.score) >= 2 && $scope.gameInfo.highestScore >= 21) {&nbsp; &nbsp; &nbsp; &nbsp; $(".scoreBoard").addClass("dimmed");&nbsp; &nbsp; &nbsp; &nbsp; $scope.footer.message = "Game over! " + $scope.gameInfo.teamWithHighScore + " wins!";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; };&nbsp; $scope.footer = {message: "Rally for serve" };}]);&nbsp; &nbsp; * {&nbsp; box-sizing: border-box;}body {&nbsp; padding: 0;&nbsp; margin: 0;&nbsp; height: 100vh;&nbsp; width: 100vw;&nbsp; font-family: sans-serif;&nbsp; background: #ECF0C9;}.score {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; flex: 1;&nbsp; position: fixed;&nbsp; height: 90vh;&nbsp; width: 100%;&nbsp; z-index: 999;&nbsp; color: #ECF0C9;&nbsp; font-size: 20vmax;&nbsp; pointer-events: none;}.score > span {&nbsp; flex: 1;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.screen {&nbsp; position: fixed;&nbsp; top: 0;&nbsp; left: 0;&nbsp; bottom: 0;&nbsp; right: 0;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; display: flex;&nbsp; flex-direction: column;}.scoreBoard {&nbsp; flex: 1;&nbsp; display: flex;&nbsp; justify-content: space-between;}.team {&nbsp; color: #ECF0C9;&nbsp; flex: 1;&nbsp; display: flex;&nbsp; flex-direction: column;}.team.team-1 {&nbsp; margin-right: 4px;}.team.team-1 .player-right {&nbsp; background: #45B29D;&nbsp; margin-top: 2px;}.team.team-1 .player-left {&nbsp; background: #DF5A49;}.team.team-1 .serving__isServing {&nbsp; order: 1;}.team.team-1 .serving__isNotServing {&nbsp; order: -1;}.team.team-2 {&nbsp; margin-left: 4px;}.team.team-2 .player-left {&nbsp; background: #E27A3F;&nbsp; margin-top: 2px;}.team.team-2 .player-right {&nbsp; background: #EFC94C;}.team.team-2 .serving__isServing {&nbsp; order: -1;}.team.team-2 .serving__isNotServing {&nbsp; order: 1;}.team.team__isServing .serving__isServing {&nbsp; color: #ECF0C9;&nbsp; animation: serving 1s infinite reverse;}.player {&nbsp; flex: 1;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.player input {&nbsp; width: 90%;&nbsp; height: 10vh;&nbsp; background: #334D5C;&nbsp; color: #ECF0C9;&nbsp; border: none;&nbsp; text-align: center;&nbsp; font-size: 8vh;}.player.player-alone {&nbsp; order: 3;}header, input.teamName {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; background: #334D5C;&nbsp; color: #6b7e7d;&nbsp; max-height: 10vh;&nbsp; font-size: 8vh;&nbsp; flex: 1;&nbsp; border: none;&nbsp; text-align: center;}@keyframes serving {&nbsp; 0% {&nbsp; &nbsp; opacity: 1;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: .5;&nbsp; }}footer {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; height: 10vh;&nbsp; font-size: 5vmin;&nbsp; color: #334D5C;}footer.menu {&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; padding: 0 2vw;}footer.menu div {&nbsp; display: flex;&nbsp; flex: 1;&nbsp; justify-content: space-around;}footer.menu button {&nbsp; background: #334D5C;&nbsp; color: #ECF0C9;&nbsp; border: none;&nbsp; height: 9vh;&nbsp; font-size: 7vh;&nbsp; padding: 0 2vw;}footer.menu button.notSelected {&nbsp; color: #909f93;}.dimmed {&nbsp; opacity: .5;&nbsp; pointer-events: none;}<!DOCTYPE html><html><head>&nbsp; <title></title><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>&nbsp;<body ng-app="scoreKeeper" ng-controller="score">&nbsp;&nbsp;&nbsp; <div class="screen screen-start" ng-if="!gameInfo.gameStarted">&nbsp; &nbsp; <div class="scoreBoard">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="team team-1">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="teamName" ng-model="team1.name" ng-if="gameInfo.numberOfPlayers == 4"></input>&nbsp; &nbsp; &nbsp; &nbsp; <div class="player player-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" ng-model="player1.name"></input>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="player player-right player-serveSpot" ng-if="gameInfo.numberOfPlayers == 4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" ng-model="player3.name"></input>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="team team-2">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="teamName" ng-model="team2.name" ng-if="gameInfo.numberOfPlayers == 4"></input>&nbsp; &nbsp; &nbsp; &nbsp; <div class="player player-right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" ng-model="player2.name"></input>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="player player-left" ng-if="gameInfo.numberOfPlayers == 4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" ng-model="player4.name"></input>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <footer class="menu">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button ng-click="players(2)" ng-class="{'notSelected':gameInfo.numberOfPlayers == 4}">2</button>&nbsp; &nbsp; &nbsp; &nbsp; <button ng-click="players(4)" ng-class="{'notSelected':gameInfo.numberOfPlayers == 2}">4</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button ng-click="startGame()">START</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </footer>&nbsp; </div>&nbsp;&nbsp;&nbsp; <div class="score" ng-if="team1.serving || team2.serving">&nbsp; &nbsp; <span>{{team1.score}}</span>&nbsp; &nbsp; <span>{{team2.score}}</span>&nbsp; </div>&nbsp;&nbsp;&nbsp; <div class="screen screen-game" ng-if="gameInfo.gameStarted">&nbsp; &nbsp; <div class="scoreBoard">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="team team-1" ng-class="{'team__isServing':team1.serving}">&nbsp; &nbsp; &nbsp; &nbsp; <header&nbsp; ng-click="addPoint(1, 1)"&nbsp; ng-class="{'serving__isServing':player1.serving, 'serving__isNotServing':!player1.serving}">{{player1.name}}</header>&nbsp; &nbsp; &nbsp; &nbsp; <div class="player player-left" ng-class="{'player-alone':!player3.name}" style="position:relative">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3&nbsp; &nbsp;ng-click="addPoint(2, -1)"&nbsp; &nbsp; type="button"&nbsp; id="subt1" style="position: absolute;bottom: 0;left: 10px;font-size: 50px;color: white;font-weight:bolder;&nbsp; &nbsp; margin: 0px !important;cursor: pointer;">-</h3></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="player player-right player-serveSpot" ng-if="player3.name"></div>&nbsp; &nbsp; &nbsp; &nbsp; <header ng-class="{'serving__isServing':player3.serving, 'serving__isNotServing':!player3.serving}" ng-if="player3.name">{{player3.name}}</header>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="team team-2" ng-class="{'team__isServing':team2.serving}">&nbsp; &nbsp; &nbsp; &nbsp; <header&nbsp; ng-click="addPoint(2, 1)"&nbsp; ng-class="{'serving__isServing':player2.serving, 'serving__isNotServing':!player2.serving}">{{player2.name}}</header>&nbsp; &nbsp; &nbsp; &nbsp; <div class="player player-right" ng-class="{'player-alone':!player3.name}"style="position:relative">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1&nbsp; ng-click="addPoint(2, -1)"&nbsp; &nbsp;type="button"&nbsp; id="subt2"style="position: absolute;bottom: 0;right: 10px;font-size: 50px;color: white;font-weight:bolder;&nbsp; &nbsp; margin: 0px !important;cursor: pointer;">-</h1></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="player player-left" ng-if="player4.name"></div>&nbsp; &nbsp; &nbsp; &nbsp; <header ng-class="{'serving__isServing':player4.serving, 'serving__isNotServing':!player4.serving}" ng-if="player4.name">{{player4.name}}</header>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <footer>{{footer.message}}</footer>&nbsp; </div>&nbsp;</body></html>

Answer 2

您的按钮没有附加任何功能.. 问题在这里：<div class="team team-1" ng-click="addPoint(1)" ....>&nbsp;<h3&nbsp; type="button"&nbsp; id="subt1" style="...">-</h3></div>&nbsp; &nbsp;&nbsp;</div>ng-click="addPoint(-1)"&nbsp;你会有类似的东西&nbsp;<h3&nbsp; type="button" ng-click="addPoint(-1)"&nbsp; id="subt1" style="...">-</h3></div>&nbsp; &nbsp;&nbsp;negative当他们单击按钮时，您需要添加一个。也更改<h3 type="button"为只是<button></button> 或<input type="submit">更新：问题就在这里！<div class="team team-1" ng-click="addPoint(1)" ....>&nbsp;<h3&nbsp; type="button"&nbsp; id="subt1" style="...">-</h3></div>&nbsp; &nbsp;&nbsp;</div>您h3在 addPoints 元素中有嵌套。如果不单击 addPoint 元素，则无法单击 h3 元素。因为 h3 是 addPoints 的孩子。您需要删除它，您仍然可以将它放置在同一个位置，但是当它没有嵌套时。&nbsp;<h3&nbsp; type="button" ng-click="addPoint(-1)"&nbsp; id="subt1" style="...">-</h3>然后添加适当的javascript逻辑。我会改变 addPoint() 到 addPoint(element_number, points_to_add)所以你做 addPoint(1, -1)实际上我会更改所有代码。