Member Avatar for jonsan32

I'm hosting tounaments throughout the year, and have the price increasing each day. Code works, but I'mnot cure which elements to adjust to be able to display multiple prices adjusting simultaneously. I tried changing "rate" to "rate1" etc, but that wasn't enough... So I'm guessing variables within should be adjusted as well. Any help is appreciated. The page I'm working on is here: -- The sinppet below is what I'm currently focused on. Thanks.

<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>
  • 2 Contributors
  • 1 Reply
  • 189 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dani
adajames commented: As I read this post, I found it to be very helpful. Thank you for posting it. I enjoyed reading it. +0

Dani AI

Generated

Two things are happening here: (1) redeclaring top-level constants across multiple inline <script> tags will throw a SyntaxError and stop later scripts from running, and (2) document.querySelector('.rate') only returns the first matching element so the other counters never get updated. is right that using const repeatedly is the root danger — either scope each script so const stays local or use a single shared updater.

Prefer this pattern: give each event container data attributes (start, deadline, min/max price), put one script after the markup, and update every .rate inside its own .eventbox. That keeps markup simple and the logic reusable and testable.

Example HTML snippet (one event):

<div class="eventbox" data-start="2021-10-01" data-deadline="2022-01-10" data-min="100" data-max="400">
  Current Price: <span class="rate"></span>
</div>

Example single updater script (place once, after all eventboxes):

(function(){
  const MS_PER_DAY = 24*60*60*1000;
  function toUTCms(ymd){ const [y,m,d]=ymd.split('-').map(Number); return Date.UTC(y,m-1,d); }
  function dayIndex(ms){ return Math.floor(ms / MS_PER_DAY); }

  document.querySelectorAll('.eventbox').forEach(box=>{
    const s = box.dataset.start, e = box.dataset.deadline;
    if(!s || !e) return;
    const startDay = dayIndex(toUTCms(s));
    const endDay = dayIndex(toUTCms(e));
    const todayDay = dayIndex(Date.now());
    const total = Math.max(1, endDay - startDay);
    const t = Math.min(1, Math.max(0, (todayDay - startDay) / total));
    const min = Number(box.dataset.min||100), max = Number(box.dataset.max||400);
    const price = Math.round(min + (max - min) * t);
    const el = box.querySelector('.rate');
    if(el) el.textContent = '$' + price;
  });
})();

If you prefer inline scripts per event, wrap each in an IIFE and use document.currentScript to scope updates to that block so you do not redeclare globals. Always check the browser console for "Identifier 'X' has already been declared" and ensure scripts run after the DOM (place them at the end of <body> or use DOMContentLoaded). Use textContent to write numbers (safer than inserting HTML), and clamp the computed price so it never goes below min or above max.

Member Avatar for Dani

The Javascript code executes sequentially. On line 7 you set the constant days. A constant is meant to never change. However, you set it again on line 28? I'm not sure why.

Same problem with the const DEADLINE. It's a constant, and yet you're trying to set it to two different values, on line 8 and then again on line 29. You can't do that. If you need the value to change, you need to make it not a constant. The constants START and TODAY just need to be set once as well.

commented: Thank you +4
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.