Увеличить значение переменной по параметру функции - PullRequest
Новая
       0

Увеличить значение переменной по параметру функции

0 голосов
/ 28 февраля 2020

Я пытаюсь создать таймер в JavaScript, но я не знаю, как присвоить значение параметра функции глобальной переменной. Я могу сделать это без использования параметров, но я хочу уменьшить количество строк в моем исходном коде.

Вот мой код: 

const elemHoursIncreaseBtn = document.querySelector('.hours__increase__btn');
const elemHoursCount = document.querySelector('.hours__count');
let hours = 0;

function increaseCount(unit, number, elem){
    if(unit<number){
        unit++;
        if(String(unit).length<2){
            elem.textContent = "0" + unit;
        }else{
            elem.textContent = unit;
        }
    }else{
        unit=0;
        elem.textContent = "0" + unit;
    }
}

elemHoursIncreaseBtn.addEventListener('click', function(){
    increaseCount(hours, 23, elemHoursCount);
   });
.flex__center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timer__container{
    display: flex;
    flex-direction: row;
}

.increase__pick, .decrease__pick, .hours__count, .minutes__count, .seconds__count{
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Timer</title>
    <link rel="stylesheet" href="../css/timer.css">
</head>
<body>
    <div class="timer__container">
        <div class="hours__picker">
            <button class="increase__pick hours__increase__btn">/\</button>
            <p class="hours__count">00</p>
            <button class="decrease__pick hours__decrease__btn">\/</button>
        </div>
    </div>

    <script src="../js/timer.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 28 февраля 2020

Вы можете сохранить фактические значения на карте, передать ключ для карты, которую вы хотите настроить, и ссылаться на нее. 

const elemHoursIncreaseBtn = document.querySelector('.hours__increase__btn');
const elemHoursCount = document.querySelector('.hours__count');
const units = {
  hours: 0,
  minutes: 0,
  seconds: 0
};

function increaseCount(unitType, number, elem){
    if(units[unitType]<number){
        units[unitType]++;
        if(String(units[unitType]).length<2){
            elem.textContent = "0" + units[unitType];
        }else{
            elem.textContent = unit;
        }
    }else{
        units[unitType]=0;
        elem.textContent = "0" + unit;
    }
}

elemHoursIncreaseBtn.addEventListener('click', function(){
    increaseCount('hours', 23, elemHoursCount);
   });
.flex__center{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timer__container{
    display: flex;
    flex-direction: row;
}

.increase__pick, .decrease__pick, .hours__count, .minutes__count, .seconds__count{
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Timer</title>
    <link rel="stylesheet" href="../css/timer.css">
</head>
<body>
    <div class="timer__container">
        <div class="hours__picker">
            <button class="increase__pick hours__increase__btn">/\</button>
            <p class="hours__count">00</p>
            <button class="decrease__pick hours__decrease__btn">\/</button>
        </div>
    </div>

    <script src="../js/timer.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...