主页 / 问题 / 1062916
Accepted
Роман
Asked:2020-12-25 15:47:02 +0800 CST2020-12-25 15:47:02 +0800 CST

启用和禁用按钮，直到事件发生

  • 772

本质是这样，在用户按下“计算”按钮之前，使剩余的按钮处于非活动状态（即使它们被按下，但不执行任何逻辑操作）。为了解决这个问题，我添加了getButton()函数，并把它挂在“开始计算”按钮的点击事件上（不执行它的功能），你把它拿出来调用，结果很奇怪，最初是按钮不活跃（一切都应该如此），但点击后它们仍然不活跃，我不明白为什么？

let startBtn = document.getElementById("start"),
budgetValue = document.querySelector(".budget-value"),
dayBudgetValue = document.getElementsByClassName('daybudget-value')[0],
lavelValue = document.getElementsByClassName('level-value')[0],
expensesValue = document.getElementsByClassName('expenses-value')[0],
optionalExpensesValue = document.getElementsByClassName('optionalexpenses-value')[0],
incomeValue = document.getElementsByClassName('income-value')[0],
monthSavingsValue = document.getElementsByClassName("monthsavings-value")[0],
yearSavingsValue = document.getElementsByClassName("yearsavings-value")[0],

expensesItem = document.getElementsByClassName("expenses-item"),
expensesBtn = document.getElementsByTagName('button')[0]/* это кнопка складывает обязатльенве расходы */ ,
optionalExpensesBtn = document.getElementsByTagName("button")[1]/*передает не обязателоные траты */,
countBtn = document.getElementsByTagName('button')[2]/*расчет дневного бюджета */,
optionalExpensesItem = document.querySelectorAll(".optionalexpenses-item"),
chooseIncome = document.querySelector(".choose-income"),
checkSavings = document.querySelector(".checksavings"),
sumValue = document.querySelector('.choose-sum'),
percentValue = document.querySelector (".choose-percent" ),
yearValue = document.querySelector(".year-value"),
monthValue = document.querySelector(".month-value"),
dayValue = document.querySelector(".day-value");


let money, time;


function getButton(){ 
    if (startBtn.onclick == true){ 
        expensesBtn.disabled = false; 
        optionalExpensesBtn.disabled = false; 
        countBtn.disabled = false; 
    } else { 
        expensesBtn.disabled = true; 
        optionalExpensesBtn.disabled = true; 
        countBtn.disabled = true; 
    }  
}; 
getButton();

startBtn.addEventListener('click', function() {

    time = prompt(' Введите дату в формате YYYY-MM-DD', '');
    money = +prompt(' Ваш бюджет в мясяц?', '');



    while (isNaN(money) || money == '' || money == null){
        money = prompt(' Ваш бюджет?', '');
    }
    appData.budget = money;
    appData.timeData = time;
    budgetValue.textContent = money.toFixed();
    yearValue.value = new Date(Date.parse(time)).getFullYear();
    monthValue.value = new Date(Date.parse(time)).getMonth() + 1;
    dayValue.value = new Date(Date.parse(time)).getDate();

});
javascript

1 个回答

  1. Best Answer

    将所需按钮的启用放在事件函数中：

    expensesBtn.disabled = true;
optionalExpensesBtn.disabled = true;
countBtn.disabled = true;

startBtn.addEventListener('click', function() {

// Вот сюда

expensesBtn.disabled = false;
optionalExpensesBtn.disabled = false;
countBtn.disabled = false;
}

    UPD：一般来说，您的脚本在逻辑上是正确的。您声明了getButton()函数，然后立即调用它。她立即​​检查了你的所有条件并满足了一切。她完成了她的使命。但是在页面加载后不会立即单击按钮，而是使用它的结果。您的getButton()函数会在页面加载后立即调用。

    这就是为什么我建议在处理startBtn上的“ click ”事件时推动启用/禁用按钮。

    • 1

相关问题