Переключение текста при нажатии на кнопку

Question

При нажатии на кнопку "Без срока" в выплывающем при нажатии на кнопку "Перенести" меню, должна меняться дата по следующему принципу: если стоит какая-либо дата, то вместо неё написать "Без срока", а если стоит "Без срока", то надо написать дату, которая стояла до этого.

<div class="all-tasks">
                <div class="daytasks" id="daytasks">
                    <div class="daytasks-count">
                        <p class="daytasks-count-text">Просрочено</p>
                        <p id="resch-tasks-cnt" class="daytasks-count-num"></p>
                        <a id="resch-btn" class="daytasks-count-reschedule">
                            <p>Перенести</p>
                        </a>
                        <div id="resch-menu" class="daytasks-count-reschedule-menu daytasks-count-reschedule-menu-toggle">
                            <form method="get">
                                <p class="reschedule-date">Новый срок</p>
                                <input class="reschedule-input" type="datetime-local">
                                <div class="reschedule-line"></div>
                                <button id="resch-nodate" class="reschedule-nodate">Без даты</button>
                                <div class="reschedule-delete">Удалить все</div>
                            </form>
                        </div>
                    </div>
                    <div id="resch-tasks">
                        <div class="daytasks-task">
                            <form>
                                <label>
                                    <input type="checkbox" class="real-checkbox" id="real1" onclick="checkBoxLineThrough1()">
                                    <span class="custom-checkbox"></span>
                                    <div class="label-text" id="label-text1">1</div>
                                    <a>
                                        <div class="task-dots" id="dots"></div>
                                    </a>
                                </label>
                                <p id="task-date1" class="daytasks-task-date">31 дек. 2023</p>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="daytasks daytasks2">
                        <div class="daytasks-count">
                            <p class="daytasks-date">Сегодня ‧ 31 дек</p>
                            <p id="today-tasks-cnt" class="today-tasks-count"></p>
                        </div>
                        <div id="today-tasks">
                    </div>
                </div>
            </div>

body {
    background-color: #202020;
    overflow-y: hidden;
}

main {
    display: inline-block;
    position: absolute;
    padding: 70px 0 0 100px;
}

.all-tasks {
    display: flex;
}

.daytasks {
    width: 100%;
    height: auto;
    position: relative;
}

.daytasks-count {
    position: relative;
    margin-top: 30px;
    font-family: Inter;
    padding-bottom: 25px;
}

.daytasks-count-text {
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    color: #ff7c7c;
}

.daytasks-count-num {
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    color: rgba(179, 178, 178, 0.76);
    margin-left: 1%;
}

.daytasks-count-reschedule {
    position: relative;
    display: inline-block;
    font-family: Inter;
    font-size: 12px;
    font-weight: 550;
    color: #ffcb7c;
    margin-left: 30%;
    text-decoration: none;
    transition: all 0.1s;
    cursor: pointer;
}

.daytasks-count-reschedule:hover {
    color: #ffe5be;
}

.daytasks-count-reschedule-menu {
    width: 90%;
    height: auto;
    background-color: #1d1d1d;
    position: absolute;
    margin: 20px 0 0 105px;
    padding-bottom: 10px;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 0 10px 5px #181818;
    display: block;
}

.daytasks-count-reschedule-menu-toggle {
    display: none;
}
.reschedule-nodate {
    width: 95.5%;
    height:33px;
    background-color: transparent;
    display: flex;
    align-items: center;
    margin: 5px;
    padding: 6px 6px 6px 10px;
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #c4c4c4;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.reschedule-nodate::before {
    content: "";

    background-image: url(/project/css/imgs/nodate.png);
    background-size: cover;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 5px;
}

.reschedule-nodate:hover {
    background-color: #2b2b2b;
}

.daytasks-task {
    width: 250px;
    padding-bottom: 10px;
    font-family: Inter;
    font-size: 15px;
    font-weight: 500;
    color: rgb(179, 178, 178);
    border-radius: 14px;
    border: none;
    border: 1px solid #424242;
    margin-top: 10px;
    box-shadow: 0 0 10px 2px #1d1d1d;
}

.real-checkbox {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.custom-checkbox {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 1px solid #424242;
    border-radius: 10px;
    vertical-align: sub;
    margin-right: 5px;
    cursor: pointer;
}

.custom-checkbox::before {
    content: '';

    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('imgs/checkmark3.png');
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);

    transition: 0.2s;
}

.real-checkbox:checked + .custom-checkbox::before {
    transform: translate(-50%, -50%) scale(1);
}

.label-text {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 1% 0 0 1%;
}

.real-checkbox:checked + .label-text{
    text-decoration: line-through;
}

.daytasks-date {
    color: #ff7c7c;
    font-family: Inter;
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
}

.daytasks-task-date {
    color: #ffcb7c;
    font-size: 12px;
    padding-top: 15px;
    margin-left: 8%;
    cursor: pointer;
}

.today-tasks-count {
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    color: rgba(179, 178, 178, 0.76);
    margin-left: 25%;
}

@media screen and (max-width: 1780px) {
    
}

var rescheduleButton = document.getElementById("resch-btn")
var rescheduleMenu = document.getElementById("resch-menu")

rescheduleButton.addEventListener("click", () =>
{
    rescheduleMenu.classList.toggle("daytasks-count-reschedule-menu-toggle")
})




var reschNoDate = document.getElementById("resch-nodate");

reschNoDate.addEventListener("click", () =>
{
    var noDate = false;
    noDate = noDate == true ? false : true
    var oldDate = document.getElementById('task-date1').textContent;
    if (noDate)
        {
            document.getElementById('task-date1').innerText = "Без срока";
        }
    else
        {
            document.getElementById('task-date1').innerText = oldDate;
        }
})

Answer 1

Вам надо хранить предыдущее значение за пределами фукнции обработчика.

При клике, по вашему условию, записываете нужное значение и перезаписываете предыдущее.

const reschNoDate = document.getElementById("resch-nodate");

const taskDate1 = document.getElementById('task-date1');
let prevDate = 'Без срока';

reschNoDate.addEventListener("click", () => {
  if (prevDate === "Без срока") {
    prevDate = taskDate1.innerText;
    taskDate1.innerText = 'Без срока';
  } else {
    taskDate1.innerText = prevDate;
    prevDate = "Без срока";
  }
})

<p id='task-date1'>12.09.29</p>
<button id="resch-nodate">Без даты</button>

БЛОГ НА HUSL

Переключение текста при нажатии на кнопку

Ответы (1 шт):