I want to print the word according to 15s timer and then afterwards I want to change that word.
For that I have take an array of words and then take a random number generator to pick up the random word from the array using random number as array index value.
And for timer I have use setInterval as time function but when I call the array i.e. words and try to print it on screen I m getting undefined as the result i.e. I m not able to access the array i.e. words inside my setInterval function
function startTimer(duration, display) {
var wordCount = 0;
var wordNo = Math.floor((Math.random() * (59 - wordCount)) + 1);
wordCount += 1;
word.innerHTML = "<b>" + wordCount + ". " + words[wordNo] + "</b>";
words = words - words[wordNo];
var timer = duration,
minutes, seconds;
setInterval(function() {
seconds = parseInt(timer % 60, 10);
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = seconds;
if (--timer < 0) {
timer = duration;
}
if (seconds == 5) {
display.style.color = 'red';
}
if (seconds > 5) {
display.style.color = 'unset';
}
if (seconds == 00) {
wordNo = Math.floor((Math.random() * (59 - wordCount)) + 1);
wordCount += 1;
word.innerHTML = "<b>" + wordCount + " . " + words[wordNo] + "</b>";
words = words - words[wordNo];
}
if (wordCount == 61) {
let wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = "<div class='text-center fs-3 mt-3 text-danger'>Test Ended</div>"
}
}, 1000);
}
var words = ["Scene", "Impossible", "Society", "Choose", "Unjust", "Image", "Exam", "Drive", "Internet", "Communication", "Keys", "Murder", "Commit", "Flee", "Practice", "Organize", "Phone", "New", "Agency", "Security", "Since", "Peace", "Fall", "Hi", "Run", "Chase", "Enter", "Industry", "Limit", "Development", "Coach", "Food", "Special", "Biomass", "Release", "Head", "Launch", "Medal", "Play", "Department", "Under", "Curb", "Cooperate", "HIke", "War", "Normal", "Challenge", "Serving", "Bane", "Rapid", "Actress", "obstacles", "Strict", "Forceful", "Citizens", "Team", "Anxious", "Knowledge", "Polite", "Integrity", "Serve", "Loyal", "Equality", "Justice", "Gratitude", "Rare", "Heavy", "Rude", "Explanation", "Pilot", "Pirate", "Ship", "Captain", "Camp", "Rights", "Ragging", "Rust", "Patriotism", "Primary", "Performance", "Pity", "Meeting", "Obedience", "Quick", "Quiet", "Quotes", "Question", "Try", "Unity", "Urge", "Friendship", "Close", "Migrate", "Decline", "Fly", "Highest", "Shall"]
var display = document.querySelector('#time');
var word = document.querySelector('#word');
var fiveMinutes = 15;
message = "1.60 words would be shown one by one.\r\n2.Each word will appear for only 15 seconds.\r\n3.The candidate has to read the word and write appropriate sentences at the same time.\r\n4.There will be no gap between two simultaneous words.\r\n5.The words can be positive or negative.\r\n6.The duration of WAT is 15 minutes."
alert(message)
startTimer(fiveMinutes, display);<script src="https://kit.fontawesome.com/bf341fb126.js" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="wrapper mt-5">
<header class="text-center pb-4 h1">
Word Association Test
</header>
<div class="text-center">
<i class="fa fa-clock-o fs-3" aria-hidden="true"></i>
</div>
<div id="time" class="text-center fs-3 mt-3"></div>
<div id="word" class="text-center fs-3 mt-3">
</div>
</div>
<script src="JavaScript/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>>Solution :
You need to shuffle your code around to have global vars outside the function
Also DRY, do not repeat yourself
Lastly use the length of the array as count
I use splice to remove the word from the array
var words = ["Scene", "Impossible", "Society", "Choose", "Unjust", "Image", "Exam", "Drive", "Internet", "Communication", "Keys", "Murder", "Commit", "Flee", "Practice", "Organize", "Phone", "New", "Agency", "Security", "Since", "Peace", "Fall", "Hi", "Run", "Chase", "Enter", "Industry", "Limit", "Development", "Coach", "Food", "Special", "Biomass", "Release", "Head", "Launch", "Medal", "Play", "Department", "Under", "Curb", "Cooperate", "HIke", "War", "Normal", "Challenge", "Serving", "Bane", "Rapid", "Actress", "obstacles", "Strict", "Forceful", "Citizens", "Team", "Anxious", "Knowledge", "Polite", "Integrity", "Serve", "Loyal", "Equality", "Justice", "Gratitude", "Rare", "Heavy", "Rude", "Explanation", "Pilot", "Pirate", "Ship", "Captain", "Camp", "Rights", "Ragging", "Rust", "Patriotism", "Primary", "Performance", "Pity", "Meeting", "Obedience", "Quick", "Quiet", "Quotes", "Question", "Try", "Unity", "Urge", "Friendship", "Close", "Migrate", "Decline", "Fly", "Highest", "Shall"]
var display = document.querySelector('#time');
var word = document.querySelector('#word');
var fiveMinutes = 15;
message = "1.60 words would be shown one by one.\r\n2.Each word will appear for only 15 seconds.\r\n3.The candidate has to read the word and write appropriate sentences at the same time.\r\n4.There will be no gap between two simultaneous words.\r\n5.The words can be positive or negative.\r\n6.The duration of WAT is 15 minutes."
let wordCount = 0
const getWord = () => {
var len = words.length;
var wordNo = Math.floor(Math.random() * wordCount);
wordCount += 1;
word.innerHTML = "<b>" + wordCount + ". " + words[wordNo] + "</b>";
words.splice(wordNo, 1);
};
let tId;
const wrapper = document.querySelector('.wrapper');
alert(message)
getWord()
startTimer(fiveMinutes, display);
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
tId = setInterval(function() {
if (words.length === 0) {
wrapper.innerHTML = "<div class='text-center fs-3 mt-3 text-danger'>Test Ended</div>"
clearInterval(tId);
return
}
seconds = parseInt(timer % 60, 10);
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = seconds;
if (--timer < 0) {
timer = duration;
}
if (seconds == 5) {
display.style.color = 'red';
}
if (seconds > 5) {
display.style.color = 'unset';
}
if (seconds == 00) {
getWord()
}
}, 1000);
}<script src="https://kit.fontawesome.com/bf341fb126.js" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="wrapper mt-5">
<header class="text-center pb-4 h1">
Word Association Test
</header>
<div class="text-center">
<i class="fa fa-clock-o fs-3" aria-hidden="true"></i>
</div>
<div id="time" class="text-center fs-3 mt-3"></div>
<div id="word" class="text-center fs-3 mt-3">
</div>
</div>
<script src="JavaScript/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>