How to change content using javascript

I'm new to Javascript. So I may not know all the details & features of Javascript. Sorry for that. Currently creating an advent calendar. Here are the codes;

HTML:

Day 1 Description of Day 1 Event

Click Here

Day 2 Description of Day 2 Event

Click Here

Day 3 Description of Day 3 Event

Click Here

(this goes on until day 31)

CSS:

.content__block {
    padding: 10vh 5vw;
}

.js .content__block {
    padding: 20vh 5vw;
    position: absolute;
    z-index: 100;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 85%;
    height: 100%;
    padding: 3em 0 6em 7vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
}

.content__title {
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
    font-size: 7vw;
    line-height: 0.85;
    margin: 0;
}

.content__description {
    font-size: 2.25vw;
    margin: 1em 0;
    padding: 0 0 0 5vw;
}

.content__meta {
    font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0 0 0 2vw;
}

.content__meta::before {
    content: '\2014';
}

.content__number {
    position: absolute;
}

.btn-back {
    font-size: 2em;
    line-height: 2;
    position: absolute;
    z-index: 100;
    right: 0;
    bottom: 0;
    width: 2em;
    margin: 0;
    margin: 1em;
    padding: 0;
    pointer-events: auto;
    color: currentColor;
    border: 0;
    border: 2px solid;
    background: none;
}

.btn-back:focus {
    outline: none;
}

.no-js .content__number,
.no-js .btn-back {
    display: none;
}

.js .content__block,
.js .content__description,
.js .content__meta,
.js .content__number,
.js .btn-back {
    opacity: 0;
}

.js .content__block--current {
    pointer-events: auto;
    opacity: 1;
}



/*
TODO:Change content

*/
.js .content__block--today {
    
    
    
}

.js .content__block--past {
    
    
}
.js .content__block--future {
    
    
}

JS:

Calendar.prototype._showContent = function(day) {
     
        // The content box for the clicked day.
        var content = contents[this.currentDayIdx],
            title = content.querySelector('.content__title'),
            description = content.querySelector('.content__description'),
            meta = content.querySelector('.content__meta');

     
      console.log('current day: '+this.currentDayIdx+' day number:'+day.number);
       /* if user selects day 1, current day is 0 and day number is 1*/
        
         var d = new Date();
         var todaysDate = d.getDate();
      

           if (todaysDate == day.number) {
             console.log('today');
             content.classList.add('content__block--today');
               
           }
           if (todaysDate < day.number) {
                     console.log('future');
                content.classList.add('content__block--future');
           }
           if (todaysDate >= day.number) {
                    console.log('past');
                content.classList.add('content__block--past');
           }
       
         
        content.classList.add('content__block--current');

        day.titlefx.hide();
        day.titlefx.show(day.titlefxSettings);  
        

        contentNumber.innerHTML = this.currentDayIdx + 1;
      
        
    };

structure to show each day preview (day + title + subtitle etc, when the user hovers one day). structure to content of each day is title + description + meta(event link)

There is a calendar which shows all 31 days of December and once you click on them, a content page opens, which contains title + description and meta data. I have added these informations in the html codes. However I want, if user selects a future day, I want to change description and write something like "sorry! you cant look early". Also I confirmed, with the " content.classList.add('content__block--future');" it activates content__block--future css. It works flawlessly. For example if I change background to red in the css codes, it changes. But I cannot change the text of 'description'. I tried to write innerHTML but failed. The website did not load at all. These codes are working fine right now but missing future date feature.
Can you please help me about that? Thank you so much!



Read more here: https://stackoverflow.com/questions/64591708/how-to-change-content-using-javascript

Content Attribution

This content was originally published by İzel Gençyılmaz at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: