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

Вот код:

let daysM = document.getElementById("mem-date");
let monthM = document.getElementById("mem-month");
let yearM = document.getElementById("mem-year");

let timeM = document.getElementById("mem-time");

const button = document.getElementById("calc-btn");

var today = new Date();

let d = today.getDate();
let m = today.getMonth() + 1;
let y = today.getFullYear();

let maxDays = 0;
let monthNum = 1;

button.addEventListener("click", (days, month, year) => {
    days = daysM.value;
    month = monthM.value;
    year = yearM.value;

    if (daysM.value == "" || monthM.value == "" || yearM.value == "") {
        return alert("Please enter the date properly");
    } 
    
    if (m == 1) { // Jan
        maxDays = 31;
        monthNum = 1;
    } 
    else if (m == 2) { // Feb
        maxDays = 28;
        monthNum = 2;
    } 
    else if (m == 3) { // Mar
        maxDays = 31;
        monthNum = 3;
    }
    else if (m == 4) { // Apr
        maxDays = 30;
        monthNum = 4;
    }
    else if (m == 5) { // May
        maxDays = 31;
        monthNum = 5;
    }
    else if (m == 6) { // Jun
        maxDays = 30;
        monthNum = 6;
    }
    else if (m == 7) { // Jul
        maxDays = 31;
        monthNum = 7;
    }
    else if (m == 8) { // Aug
        maxDays = 31;
        monthNum = 8;
    }
    else if (m == 9) { // Sep
        maxDays = 30;
        monthNum = 9;
    }
    else if (m == 10) { // Oct
        maxDays = 31;
        monthNum = 10;
    }
    else if (m == 11) { // Nov
        maxDays = 30;
        monthNum = 11;
    }
    else { // Dec
        maxDays = 31;
        monthNum = 12;
    }

    var memYears = y - year;

    if (m <= month) {
        m = m + 12;
    }

    var memMonths = m - month;

    var memDays = (maxDays - d) + parseInt(days);

    timeM.innerHTML = `You have been a member for ${memYears} y, ${memMonths} m and ${memDays} d`;

}) 
<h1 class="headings1">Memberships</h1>

<form>
    <label id="member" for="memberdate">Enter the date you became member</label>
    <input type="number" id="mem-date" class="mem-input" placeholder="date">
    <input type="number" id="mem-month" class="mem-input" placeholder="month">
    <input type="number" id="mem-year" class="mem-input" placeholder="year">

    <button id="calc-btn">Calculate</button>
</form>

<div id="timeSection">
    <p id="mem-time"></p>
</div> 

Заранее спасибо за помощь!!!

0
L3ly 9 Окт 2021 в 06:33

3 ответа

Лучший ответ

У вас есть форма, когда вы нажимаете кнопку, которую она отправляет, и страница повторно отображается. Так что либо добавьте onsubmit="return false;", чтобы предотвратить отправку формы, либо, что еще лучше, просто удалите тег формы, поскольку он вообще не требуется.

let daysM = document.getElementById("mem-date");
let monthM = document.getElementById("mem-month");
let yearM = document.getElementById("mem-year");

let timeM = document.getElementById("mem-time");

const button = document.getElementById("calc-btn");

var today = new Date();

let d = today.getDate();
let m = today.getMonth() + 1;
let y = today.getFullYear();

let maxDays = 0;
let monthNum = 1;

button.addEventListener("click", (days, month, year) => {
    days = daysM.value;
    month = monthM.value;
    year = yearM.value;

    if (daysM.value == "" || monthM.value == "" || yearM.value == "") {
        return alert("Please enter the date properly");
    } 
    
    if (m == 1) { // Jan
        maxDays = 31;
        monthNum = 1;
    } 
    else if (m == 2) { // Feb
        maxDays = 28;
        monthNum = 2;
    } 
    else if (m == 3) { // Mar
        maxDays = 31;
        monthNum = 3;
    }
    else if (m == 4) { // Apr
        maxDays = 30;
        monthNum = 4;
    }
    else if (m == 5) { // May
        maxDays = 31;
        monthNum = 5;
    }
    else if (m == 6) { // Jun
        maxDays = 30;
        monthNum = 6;
    }
    else if (m == 7) { // Jul
        maxDays = 31;
        monthNum = 7;
    }
    else if (m == 8) { // Aug
        maxDays = 31;
        monthNum = 8;
    }
    else if (m == 9) { // Sep
        maxDays = 30;
        monthNum = 9;
    }
    else if (m == 10) { // Oct
        maxDays = 31;
        monthNum = 10;
    }
    else if (m == 11) { // Nov
        maxDays = 30;
        monthNum = 11;
    }
    else { // Dec
        maxDays = 31;
        monthNum = 12;
    }

    var memYears = y - year;

    if (m <= month) {
        m = m + 12;
    }

    var memMonths = m - month;

    var memDays = (maxDays - d) + parseInt(days);

    timeM.innerHTML = `You have been a member for ${memYears} y, ${memMonths} m and ${memDays} d`;

}) 
<h1 class="headings1">Memberships</h1>

<form onsubmit="return false;">
    <label id="member" for="memberdate">Enter the date you became member</label>
    <input type="number" id="mem-date" class="mem-input" placeholder="date">
    <input type="number" id="mem-month" class="mem-input" placeholder="month">
    <input type="number" id="mem-year" class="mem-input" placeholder="year">

    <button id="calc-btn">Calculate</button>
</form>

<div id="timeSection">
    <p id="mem-time"></p>
</div> 
1
deepakchethan 9 Окт 2021 в 03:42

Это связано с тем, что ваш form будет отправлен и страница обновится, что является его поведением по умолчанию, вы должны предотвратить его поведение по умолчанию, вы можете сделать как

Прочтите документацию о preventDefault

button.addEventListener("click", (e) => {
  e.preventDefault();

Вы можете предотвратить его поведение, используя объект event, который передается в обратный вызов, который вы передали в addEventListener

let daysM = document.getElementById("mem-date");
let monthM = document.getElementById("mem-month");
let yearM = document.getElementById("mem-year");

let timeM = document.getElementById("mem-time");

const button = document.getElementById("calc-btn");

var today = new Date();

let d = today.getDate();
let m = today.getMonth() + 1;
let y = today.getFullYear();

let maxDays = 0;
let monthNum = 1;

button.addEventListener("click", (e) => {
  e.preventDefault();
  days = daysM.value;
  month = monthM.value;
  year = yearM.value;

  if (daysM.value == "" || monthM.value == "" || yearM.value == "") {
    return alert("Please enter the date properly");
  }

  if (m == 1) { // Jan
    maxDays = 31;
    monthNum = 1;
  } else if (m == 2) { // Feb
    maxDays = 28;
    monthNum = 2;
  } else if (m == 3) { // Mar
    maxDays = 31;
    monthNum = 3;
  } else if (m == 4) { // Apr
    maxDays = 30;
    monthNum = 4;
  } else if (m == 5) { // May
    maxDays = 31;
    monthNum = 5;
  } else if (m == 6) { // Jun
    maxDays = 30;
    monthNum = 6;
  } else if (m == 7) { // Jul
    maxDays = 31;
    monthNum = 7;
  } else if (m == 8) { // Aug
    maxDays = 31;
    monthNum = 8;
  } else if (m == 9) { // Sep
    maxDays = 30;
    monthNum = 9;
  } else if (m == 10) { // Oct
    maxDays = 31;
    monthNum = 10;
  } else if (m == 11) { // Nov
    maxDays = 30;
    monthNum = 11;
  } else { // Dec
    maxDays = 31;
    monthNum = 12;
  }

  var memYears = y - year;

  if (m <= month) {
    m = m + 12;
  }

  var memMonths = m - month;

  var memDays = (maxDays - d) + parseInt(days);

  timeM.innerHTML = `You have been a member for ${memYears} y, ${memMonths} m and ${memDays} d`;

})
<h1 class="headings1">Memberships</h1>

<form>
  <label id="member" for="memberdate">Enter the date you became member</label>
  <input type="number" id="mem-date" class="mem-input" placeholder="date">
  <input type="number" id="mem-month" class="mem-input" placeholder="month">
  <input type="number" id="mem-year" class="mem-input" placeholder="year">

  <button id="calc-btn">Calculate</button>
</form>

<div id="timeSection">
  <p id="mem-time"></p>
</div>
0
decpk 9 Окт 2021 в 03:42

Попробуйте добавить следующую строку: -

 <button type='submit' id="calc-btn">Calculate</button>

И в файле JavaScript попробуйте добавить событие в параметр, как показано ниже: -

button.addEventListener("click", (days, month, year, event)

И добавьте следующую строку в файл JavaScript: -

event.preventDefault();

Думаю, должно сработать.

0
Aditya kumar 9 Окт 2021 в 03:45