I need each of the first sentences from these JavaScript arrays to display correctly with the day of the week properly included within them

user_10376078 0
Viewed 51

I have these javascripts to randomly get 2 different sentences, each one from a different set of arrays, to get a different message each new time I click on its printed text (to avoid spam) when notifying our members about our comments on each of our lectures.

I want to include the weekday on the first sentence, but after trying dozens of ways, I can not get it working as I need.

So far I have to get the weekday apart, cut it (ctrl+X), and then paste it on its proper place which I marked here as «weekday» to show you where I need it to be.

The result I expect is something like these:
2 Saturday comments on both your lectures. Take care.
or
Done 2 Saturday comments on each of your lectures. Talk to you later.


This is my HTML: 
<div style="cursor: pointer;" onClick="setAleatoryNtfctnLines(); setAleatoryFarewell();">
    <div><span id="AleatoryNotification"></span> <span id="AleatoryFarewell"></span></div>
    <div><span id="weekday"></span></div>
</div>

And these are my javascripts: 
<script>
const FirstTextLines = [
"2 «weekday» comments done, for your 2 lectures",
"2 «weekday» comments done, on both your lectures",
"2 «weekday» comments for both your lectures",
"2 «weekday» comments for each of your lectures",
"2 «weekday» comments for your two lectures",
"2 «weekday» comments on both your lectures",
"2 «weekday» comments on each of your lectures",
"Already done 2 «weekday» comments x 2",
"Done 2 «weekday» comments on both your lectures",
"Done 2 «weekday» comments on each of your lectures",
"Done 2 «weekday» comments x 2",
"I just posted 2 «weekday» comments x 2",
"Just posted 2 «weekday» comments x 2"
];

const getAleatoryLines = max => Math.floor(Math.random() * max); 

const getAleatoryNtfctnLines = () => `${FirstTextLines[getAleatoryLines(FirstTextLines.length)]}`;

const setAleatoryNtfctnLines = () => {
  document.getElementById('AleatoryNotification').innerText = getAleatoryNtfctnLines();
};

document.getElementById('GenerateFirstSetOfLines').
addEventListener('click', setAleatoryNtfctnLines);

setAleatoryNtfctnLines();
</script>

<script>
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("weekday").innerHTML = days[d.getDay()];
</script>

<script>
const SecondTextLines = [
"Bye bye!",
"Bye for now.",
"Catch you later.",
"Have a good one.",
"Have a nice day.",
"Peace out.",
"Soon with more.",
"Take care.",
"Talk to you later.",
"Until next time."
];

const getAleatoryFarewellLines = max => Math.floor(Math.random() * max);

const getAleatoryFarewell = () => `${SecondTextLines[getAleatoryFarewellLines(SecondTextLines.length)]}`;

const setAleatoryFarewell = () => {
  document.getElementById('AleatoryFarewell').innerText = getAleatoryFarewell();
};

document.getElementById('GenerateSecondSetOfLines').
addEventListener('click', setAleatoryFarewell);

setAleatoryFarewell();
</script>

I know I have a couple of errors after too many tries I've done, but fixing those errors is not what I'm asking for.

What I want is to include the weekday on the first sentence as shown on my examples before.

It is ok if you suggest me a totally different approach.
I'm open to any suggestion if I cant get the results I need.

Here is a jsfiddle I made before to show you what I mean.

Thank you in advance.

html jquery javascript
2 Answers

Try using variable substitution with template literals.

const date = new Date();
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const day = days[date.getDay()];

const FirstTextLines = [
  `2 ${day} comments done, for your 2 lectures`,
  `2 ${day} comments done, on both your lectures`,
  `2 ${day} comments for both your lectures`,
  `2 ${day} comments for each of your lectures`,
  `2 ${day} comments for your two lectures`,
  `2 ${day} comments on both your lectures`,
  `2 ${day} comments on each of your lectures`,
  `Already done 2 ${day} comments x 2`,
  `Done 2 ${day} comments on both your lectures`,
  `Done 2 ${day} comments on each of your lectures`,
  `Done 2 ${day} comments x 2`,
  `I just posted 2 ${day} comments x 2`,
  `Just posted 2 ${day} comments x 2`
];

console.log(FirstTextLines);

user_8788770

You can achieve what you want to do by using the String replace method to replace «weekday» with what's calculated.

Right below your firstTextLines array, move the code that calculates the day to this same area, this puts it in the global scope with the other array.

var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

Then in getAleatoryNtfctnLines, use String's replace method to replace «weekday» with the day of the week, like so:

const getAleatoryNtfctnLines = () => 
 `${FirstTextLines[getAleatoryLines(FirstTextLines.length)]}`
   .replace('«weekday»', days[d.getDay()]);

I updated your jsfiddle to demonstrate the weekday placed in the desired position.

user_5527920
Related