4 columns that displays different content each day of the week

Question

I'm very new to coding. I'm trying to create a page with 4 columns that will display different title and description each day of the week.

For example, on Monday display 4 titles and descriptions and on Tuesday display other values... and so on.

I have searched the web for an approximately a week now but I can't figure out what code to write to get the change for each day.

I think I have some clue of what to use in script, but I am not sure

var today = new Date();

if (today.getDay() == 1) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 2) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 3) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 4) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 5) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 6) document.getElementById("text").innerHTML = ;
else if (today.getDay() == 0) document.getElementById("text").innerHTML = ;

* {
  box-sizing: border-box;
}

body {
  color: white
}

h2 {
  color: white
}

.column {
  float: left;
  width: 15.00%;
  padding: 10px;
  margin: 1px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="row">
      <div class="column" style="background-color:#333;">
    <h2>Titel</h2>
    <p> Description</p>
  </div>
  <div class="column" style="background-color:#333;">
    <h2>Titel</h2>
    <p> Description</p>
  </div>
  <div class="column" style="background-color:#333;">
    <h2>Titel</h2>
    <p> Description</p>
  </div>
    <div class="column" style="background-color:#333;">
        <h2>Titel</h2>
        <p> Description</p>
    </div>
</div>

Hopefully someone can help or at least tell me what to search up to get it working. Thanks

Answer 1

I left your HTML and CSS code unchanged. Here is the JS code:

var settings = [
    {title: "a1", description: "a2", something: "a3", somethingelse: "a4"},
    {title: "b1", description: "b2", something: "b3", somethingelse: "b4"},
    {title: "c1", description: "c2", something: "c3", somethingelse: "c4"},
    {title: "d1", description: "d2", something: "d3", somethingelse: "d4"},
    {title: "e1", description: "e2", something: "e3", somethingelse: "e4"},
    {title: "f1", description: "f2", something: "f3", somethingelse: "f4"},
    {title: "g1", description: "g2", something: "g3", somethingelse: "g4"},
];
var keys = ["title", "description", "something", "somethingelse"];
var today = (new Date()).getDay();
var index = 0;
for (let c of document.querySelectorAll(".column")) c.innerText = settings[today][keys[index++]];

Explanation:

• settings is an array of objects, that it, an array which has 7 objects (for each day)
• each object in the settings array has the same fields
• keys is the array of fields, later we will need this array to properly set the values
• today should be the current day and not the current date as you have originally written, it is important that the name of a variable should really describe what the variable is for
• index is a number that will increment for each column so we set the correct values
• document.querySelectorAll(".column") gets an array-like-object of the tags matching the selector, which is defined to be having the column class. Alternatively one can use document.getElementsByClassName, as you have tried, and pass column, without the dot
• the for (...) part is an iteration, we go through all the results (tags having the column class) and do something (after the parantheses) and we name the element of each iteration c for convenience, so c represents each tag sequentially as we traverse them
• index++ gets the value of index and after that increments it
• keys[index] is the name of the setting that we intend to use as a value for the current column
• settings[today] represents the object of settings for the current day
• settings[today][keys][index++]] represents the value of the setting for the current day. We need this value, hence we assign it to c.innerText

You can test it here: https://jsfiddle.net/bmpw9joc/

Answer 2

Here's one approach.

It creates an array of objects, each of which includes display info for a given day:

[
  {
    title: 'This is the day 0 title',
    text: 'This is day 0 text',
    description: 'This is day 0 description',
  },
  {
    title: 'This is the day 1 title',
    text: 'This is day 1 text',
    description: 'This is day 1 description',
  },
  // etc.
]

Then looks up the object in the array according to the day's index:

// get the day of the week (0 is Sunday, 6 is Saturday)
const dayIndex = date.getDay();

// get the entry for this day of the week from the array
const info = contentsByDay[dayIndex];

The info variable now represents object for the day, e.g.:

{
  title: 'This is the day 1 title',
  text: 'This is day 1 text',
  description: 'This is day 1 description',
}

We then iterate over the properties of the object using a for...of loop.

for (const prop in info) {
  // runs once for each property name ('title', 'text', 'description')
}

Inside the loop we look for a dom element (a div in this case) with a class that corresponds to the property name:

// the equivalent of elem.querySelector('.title') when prop === 'title'
const div = elem.querySelector(`.${prop}`);

If we find an element (div), we set its innerHTML to the value from the object:

if (div) {
  // info[prop] is the equivalent of info.title when prop === 'title'
  div.innerHTML = info[prop];
}

Finally, add a little css to lay it out horizontally:

.day {
  display: flex;
}

.day > * {
  /* expecting 3 fields, so each gets 1/3 of the space */
  flex: 1 1 33.3%;
}

// Convenience/shorthand to generate an array containing an object for each day in the interest of brevity.
// Each of the 7 entries in the array will have title, text, and description fields.
const contentsByDay = Array.from({length: 7}, (_, i) => ({
  title: `This is the day ${i} title`,
  text: `This is day ${i} text`,
  description: `This is day ${i} description`,
}));


// function to update the dom with info for the given date.
// If date is not provided it defaults to today.
function showDayInfo(date = new Date()) {

  // get the day index.
  const dayIndex = date.getDay();
  
  // get the corresponding day info object from the array
  const info = contentsByDay[dayIndex];
  
  // find the "day" container element in the dom
  const elem = document.querySelector('.day');
  
  // iterate over the properties in the day info object
  for (const prop in info) {
    // look for an element that has a class that corresponds to the current property name
    const div = elem.querySelector(`.${prop}`);
    
    // if the element exsits…
    if (div) {
      // set its contents to the object value for the property.
      div.innerHTML = info[prop];
    }
  }
}

// run it.
showDayInfo();

.day {
  display: flex;
}

.day > * {
  flex: 1 1 33.3%;
}

<div class="day">
  <div class="title"></div>
  <div class="text"></div>
  <div class="description"></div>
</div>

Answer 3

to get element by class and id there different in fact the class return in array means there can be many classes with the same name of class so to get it you have to use this getElementsByClassName not getElementByclass

<script>
      var today = new Date();

      if(today.getDay() == 1) document.getElementsByClassName("text").innerHTML = ;
      else if(today.getDay() == 2) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 3) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 4) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 5) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 6) document.getElementById("text").innerHTML = ;
      else if(today.getDay() == 0) document.getElementsByClassName("text").innerHTML =      
</script>