Блог

Я провожу турниры в течение года, и цена растет с каждым днем. Код работает, но я не уверен, какие элементы нужно настроить, чтобы иметь возможность отображать несколько корректировок цен одновременно. Я попытался изменить «rate» на «rate1» и т.д., но этого было недостаточно… Поэтому я предполагаю, что переменные внутри также должны быть скорректированы. Любая помощь приветствуется. Страница, над которой я работаю, находится здесь: http://limitlesshoops.com/jamball.html — Приведенный ниже фрагмент — это то, на чем я сейчас сосредоточен. Спасибо.

     <div class="eventbox mlk activebox"><img src="https://fiftyallstars.com/Images/jammlk.gif" class="holidayback">
    <span class="eventlabel tourney">MLK DAY SHOWCASE</span><br><div class="numberfont eventdetails">
    January 17-18, 2022<br>
    Grades: 1st-8th<br>
    Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
    <script type="text/javascript">
        const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-01-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table> 
</div>



<div class="eventbox "><img src="https://fiftyallstars.com/Images/jamabe.png" class="holidayback">
    <span class="eventlabel">PREZ DAY CHALLENGE</span><br><div class="numberfont eventdetails">
    February 17-18, 2022<br>
    Grades: 1st-8th<br>
    Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
    <script type="text/javascript">
        const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-02-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table> 
</div>
 

Я думаю, вам следует использовать цикл для генерации этих HTML-элементов, поскольку они имеют одинаковую структуру. Это проще в обслуживании и намного меньше кода.

Ниже приведено мое решение:

 <div id="eventboxcontainer"></div>
<script type="text/javascript">
    var data = [
    {
        "title" : "MLK DAY SHOWCASE",
        "img" : "https://fiftyallstars.com/Images/jammlk.gif",
        "dateRange" : "January 17-18, 2022",
        "grades" : "1st-8th",
        "deadline" : "2022-01-10",
        "start" : "2021-10-01"
    },
    {
        "title" : "PREZ DAY CHALLENGE",
        "img" : "https://fiftyallstars.com/Images/jamabe.png",
        "dateRange" : "February 17-18, 2022",
        "grades" : "1st-8th",
        "deadline" : "2022-02-10",
        "start" : "2021-10-01"
    }
    ];

    

    var days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
    var TODAY = days(new Date());

    for (var i = 0; i < data.length; i  ) {

        var html = "";

        var DEADLINE = days(new Date(data[i].deadline));
        var START = days(new Date(data[i].start));

        var rate = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));

        html = '<div class="eventbox mlk activebox"><img src="'   data[i].img   '" class="holidayback">' 
               '<span class="eventlabel tourney">'   data[i].title   '</span><br><div class="numberfont eventdetails">' 
               data[i].dateRange   '<br>' 
               data[i].grades   '<br>' 
               'Current Price: <div class="rate" style="display: inline; font-weight:bold;">'   rate   '</div>' 
               '<br>' 
               '</div>' 
               '<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink">' 
               '<div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink">' 
               '<div class="eventbutton">Register</div></a></td></tr></table> </div>';

        // you need jQuery for this
        //$("#eventboxcontainer").append(html);

        // pure Javascript
        var element = document.querySelector("#eventboxcontainer");
        element.insertAdjacentHTML('beforeend', html);


    }

</script>