Develop Reference

Is there a way to keep a variable that a generate using Math.random when I run the function multiple times

I am trying to make a game when you have to guess a number that is generated by the Math.random() function in JavaScript. But I realized that when I do that I have to rerun the function if they get the number wrong. Then the number regenerates when it reruns the function. Is there a way that I can make the variable stay until I want to change it. I was going to change it using the const function but I realized it would do the same thing. Here is my full code:
var tries = 5;
var howMany = 0;
var wrong = 0;
var player1 = 0;
var player2 = 0;
var triesmulti = 10;
var turn = 'player 1';
var number;
function start() {
var min = document.getElementById('min').value;
var max = document.getElementById('max').value;
number = Math.floor(Math.random() * (+max - +min)) + +min;
if (tries < 1) {
alert('You \don\'t have any more tries left. The number was \n' + number);
tries = 5;
wrong += 1;
document.getElementById('wrong').innerHTML = 'You have got the number wrong ' + wrong + ' times';
} else {
var guess = prompt();
if (guess == number) {
alert('You got the number right!\n' + number);
howMany += 1;
tries = 5;
document.getElementById('howMany').innerHTML = 'You have guessed the number ' + howMany + ' times';
document.getElementById('tries').innerHTML = 'You have 5 tries left';
} else {
alert('You got the number wrong.');
tries -= 1;
document.getElementById('tries').innerHTML = 'You have ' + tries + ' tries left';
setTimeout(start, 1000);
}
}
}
function multiplayer() {
var min = document.getElementById('minm').value;
var max = document.getElementById('maxm').value;
number = Math.floor(Math.random() * (+max - +min)) + +min;
if (triesmulti < 1) {
alert('You \don\'t have any more tries left\n' + number);
triesmulti = 10;
document.getElementById('triesmulti').innerHTML = 'You have 5 tries for each player';
} else {
var guess = prompt(turn);
if (turn == 'player 1') {
if (guess == number) {
alert('You got the number right!\n' + number);
player1 += 1;
triesmulti = 10;
document.getElementById('triesmulti').innerHTML = 'You have 5 tries for each player';
} else {
alert('You got the number wrong!');
turn = 'player 2';
setTimeout(multiplayer, 1000);
}
} else if (turn == 'player 2') {
if (guess == number) {
alert('You got the number right!\n' + number);
player2 += 1;
triesmulti = 10;
document.getElementById('triesmulti').innerHTML = 'You have 5 tries for each player';
} else {
alert('You got the number wrong!');
turn = 'player1';
setTimeout(multiplayer, 1000);
}
}
}
}
If you see there, in the setTimeout() it reruns the function.

You can create a stateful random number generator quite easily with an object or closure:
const rndRng = (lo, hi) => ~~(Math.random() * (hi - lo) + lo);
const intRng = (lo, hi) => {
let n = rndRng(lo, hi);
return {
next: () => (n = rndRng(lo, hi)),
get: () => n
};
};
const rng = intRng(10, 20);
console.log(rng.get());
console.log(rng.get());
rng.next();
console.log(rng.get());
console.log(rng.get());
But having to do this shouldn't really be necessary for your application. Currently, the application uses non-idempotent functions that rely on global state, repeated/duplicate logic and deeply nested conditionals, so it's become too encumbered to easily work with.
I'd start by storing state in an object. A game like this can be modeled well by a finite state machine.
The below code is a naive implementation of this with plenty of room for improvement, but hopefully demonstrates the idea. It works for any number of players and it's fairly easy to add features to.
However, string messages are baked into business logic so the class is overburdened. A good next step would be creating a separate view class to abstract business logic from display. However, although the message strings are baked into the game logic, the DOM is decoupled. This makes it fairly easy for the caller to use the class in other UIs such as substituting the DOM for alert/prompt.
The below solution is far from the only way to approach this design problem.
class GuessingGame {
constructor(players=1, guesses=5, lo=0, hi=10) {
this.players = Array(players).fill().map(() => ({
guesses: guesses, score: 0
}));
this.guesses = guesses;
this.lowerBound = lo;
this.upperBound = hi;
this.state = this.initialize;
}
initialize() {
const {lowerBound: lo, upperBound: hi} = this;
this.players = this.players.map(({score}) => ({
guesses: this.guesses,
score: score
}));
this.target = ~~(Math.random() * (hi - lo) + lo);
this.currentPlayer = ~~(Math.random() * this.players.length);
this.state = this.guess;
this.message = `guess a number between ${lo} and ${hi - 1} ` +
`(inclusive), player ${this.currentPlayer}:`;
}
handleCorrectGuess() {
this.state = this.initialize;
this.players[this.currentPlayer].score++;
this.message = `player ${this.currentPlayer} guessed ` +
`${this.target} correctly! press 'enter' to continue.`;
}
handleNoGuessesLeft(guess) {
this.state = this.initialize;
this.players[this.currentPlayer].score--;
this.flash = `${guess} was not the number, player ` +
`${this.currentPlayer}.`;
this.message = `player ${this.currentPlayer} ran out of ` +
`guesses. the secret number was ${this.target}. press ` +
`'enter' to continue.`;
}
handleIncorrectGuess(guess) {
this.flash = `${guess} was not the number, player ` +
`${this.currentPlayer}.`;
this.currentPlayer = (this.currentPlayer + 1) % this.players.length;
const {lowerBound: lo, upperBound: hi} = this;
this.message = `guess a number between ${lo} and ${hi - 1} ` +
`(inclusive), player ${this.currentPlayer}:`;
}
guess(guess) {
if (String(+guess) !== String(guess)) {
this.flash = `sorry, ${guess || "that"} ` +
`isn't a valid number. try something else.`;
return;
}
if (this.target === +guess) {
this.handleCorrectGuess();
}
else if (!--this.players[this.currentPlayer].guesses) {
this.handleNoGuessesLeft(+guess);
}
else {
this.handleIncorrectGuess(+guess);
}
}
nextState(...args) {
this.flash = "";
return this.state(...args);
}
scoreBoard() {
return game.players.map((e, i) =>
`player ${i}: {score: ${e.score}, guesses remaining: ` +
`${e.guesses}} ${game.currentPlayer === i ? "<--" : ""}`
).join("\n");
}
}
const msgElem = document.getElementById("message");
const responseElem = document.getElementById("response");
const scoresElem = document.getElementById("scoreboard");
const game = new GuessingGame(3);
game.nextState();
msgElem.innerText = game.message;
scoresElem.innerText = game.scoreBoard();
let timeout;
responseElem.addEventListener("keydown", e => {
if (timeout || e.code !== "Enter") {
return;
}
game.nextState(e.target.value);
e.target.value = "";
e.target.disabled = true;
msgElem.innerText = game.flash;
clearTimeout(timeout);
timeout = setTimeout(() => {
msgElem.innerText = game.message;
scoresElem.innerText = game.scoreBoard();
timeout = null;
e.target.disabled = false;
e.target.focus();
}, game.flash ? 1300 : 0);
});
* {
background: white;
font-family: monospace;
font-size: 1.03em;
}
input {
margin-bottom: 1em;
margin-top: 1em;
}
<div id="message"></div>
<input id="response">
<div id="scoreboard"></div>

Well, your code is not organised, have lot of duplicates, you could devide it into functions anyway, you can add a boolean variable to check against when you should change the number, I don't know about your HTML code or css but I just added those elements according to you selectors, you can change the multiplayer function too.
var tries = 5;
var howMany = 0;
var wrong = 0;
var player1 = 0;
var player2 = 0;
var triesmulti = 10;
var turn = 'player 1';
var number;
var isAlreadyPlaying = false;
function start() {
var min = document.getElementById('min').value;
var max = document.getElementById('max').value;
if(!isAlreadyPlaying) {
isAlreadyPlaying = true;
number = Math.floor(Math.random() * (+max - +min)) + +min;
}
if (tries < 1) {
alert('You \don\'t have any more tries left. The number was \n' + number);
tries = 5;
wrong += 1;
document.getElementById('wrong').innerHTML = 'You have got the number wrong ' + wrong + ' times';
isAlreadyPlaying = false;
} else {
var guess = prompt();
if (guess == number) {
alert('You got the number right!\n' + number);
howMany += 1;
tries = 5;
document.getElementById('howMany').innerHTML = 'You have guessed the number ' + howMany + ' times';
document.getElementById('tries').innerHTML = 'You have 5 tries left';
isAlreadyPlaying = false;
} else {
alert('You got the number wrong.');
tries -= 1;
document.getElementById('tries').innerHTML = 'You have ' + tries + ' tries left';
setTimeout(start, 1000);
}
}
}
Min <input type="number" id="min" value="1"><br>
Max<input type="number" id="max" value="10"><br>
<button onclick="start()">Play</button>
<p id="wrong"></p>
<p id="howMany"></p>
<p id="tries"></p>

Trying to push a letter into an array to display on page

var secretWord = [];
var underScoreWord = [];
var wins = 0;
var guessesRemaining = 10;
var alreadyGuessed = [];
var wordLetter = true;
//Assign HTML elements to variables
var cityText = document.getElementById("city-text");
var winsNum = document.getElementById("wins-num");
var guessesNum = document.getElementById("guesses-num")
var lettersGuessed = document.getElementById("letters-guessed")
//Array of cities
var city = ["Paris", "Wellington", "Hanoi", "Perth", "Marseille", "London", "Ottawa", "Zurich", "Boston", "Tokyo", "Detroit"];
//console.log(city);
//Pick random word from the team array and push the result to an empty array.
function pickRandomCity() {
var randomCity = city[Math.floor(Math.random() * city.length)];
secretWord = randomCity.split('');
return randomCity;
}
var cityPicked = pickRandomCity();
//Get length of secretWord and push as underscores to am empty array
for (var i = 0; i < cityPicked.length; i++) {
underScoreWord.push("_");
}
console.log('secretWord : ' + secretWord);
// console.log('underScoreWord : ' + underScoreWord);
// console.log('------------------');
// console.log('cityPicked : ' + cityPicked);
//Check for letters
//Listen for key press and check to see if its a match
document.onkeyup = function letterCheck(event) {
var userGuess = event.key;
for (var j = 0; j < secretWord.length; j++) {
if (userGuess.toUpperCase() === secretWord[j].toUpperCase()) {
wordLetter = true;
underScoreWord[j] = userGuess;
guessesRemaining--;
}
else if (!wordLetter) {
alreadyGuessed.push();
// guessesRemaining--;
}
}
console.log("Already guessed: " + alreadyGuessed);
lettersGuessed.textContent = ("Letters already guessed: " + alreadyGuessed);
// Write to page
cityText.textContent = underScoreWord.join(" ");
winsNum.textContent = ("Wins: " + wins);
guessesNum.textContent = ("Guesses Remaining: " + guessesRemaining);
console.log(underScoreWord);
}
Does anybody know how can I push userGuess to an empty array and then display? As you can see I managed to push the userGuess to the alreadyGuessed array but it only displays one character at a time on the page.
The end goal is for the alreadyGuessed array to display like this - Letters alreadyGuessed: a g r h e t

You can store what keys have been pressed with an object, and at the beginning of each keyup event, check if user has pressed it.
I also switched the for loop to map
var guessedLetters = {};
document.onkeyup = function letterCheck(event) {
var userGuess = event.key;
if (!guessedLetters[userGuess.toUpperCase()]) { // check if user pressed this key
alreadyGuessed.push(userGuess.toUpperCase());
guessedLetters[userGuess.toUpperCase()] = true;
guessesRemaining--;
} else { // this key has been pressed before, dont do anything
return;
}
secretWord.map((n, i) => {
if (userGuess.toUpperCase() === n.toUpperCase()) {
underScoreWord[i] = n;
}
})
console.log("Already guessed: " + alreadyGuessed);
lettersGuessed.textContent = ("Letters already guessed: " + alreadyGuessed);
// Write to page
cityText.textContent = underScoreWord.join(" ");
winsNum.textContent = ("Wins: " + wins);
guessesNum.textContent = ("Guesses Remaining: " + guessesRemaining);
console.log(underScoreWord);
}

Looks like wordLetter is a global variable initialized to true. Also looks like it is never set to false so your call to alreadyGuessed.push(userGuess); will never be reached since !wordLetter is always false.

Try alreadyGuessed.push(userGuess); inside your event listener's elseif statement.
EDIT:
As per the suggestion from #foxinatardis, the way you modify and check for wordLetter inside your loop needs to be changed:
if (userGuess.toUpperCase() === secretWord[j].toUpperCase()) {
wordLetter = true;
underScoreWord[j] = userGuess;
guessesRemaining--;
} else {
wordLetter = false;
alreadyGuessed.push(userGuess);
// guessesRemaining--;
}
You actually don't need the wordLetter variable anymore with this change, unless you're using it elsewhere for something else.

HangMan Game-Replacing blanks w/ Letters

At this current moment I've been trying to work through an issue I've had with my Hangman JS game. I've spent the last week attempting to replace "underscores", which I have as placeholders for the current secret word. My idea was to loop through the correctLettersOUT, and wherever that particular letter exists in the placeholder would replace it with said letter. This small part of my code below is where the issue is I believe, but I have also created a function in my whole code if a new function necessary.
Any advice is appreciated.
function startGame() {
var testWord = document.getElementById("randTest").innerHTML = secretWord;
var correctLettersOUT = "";
document.getElementById("currentGuess").innerHTML = secretBlanks(secretWord)
function secretBlanks(secretWord) {
for (var i = 0; i < secretWord.length; i++) {
correctLettersOUT += ("_ ");
}
return correctLettersOUT;
}
}
The snippet of my JS is below, it may be large but all of it is necessary. If you wish to view the whole code in it's entirety, the link is CodePen Link.
var guessWords = ["school", "test", "quiz", "pencil", "ruler", "protractor", "teacher", "homework", "science", "math", "english", "history", "language", "elective", "bully", "grades", "recess", ];
var secretWord = guessWords[Math.floor(Math.random() * guessWords.length)];
var wrongLetters = [];
var correctLetters = [];
var repeatLetters = [];
var guesses = Math.round((secretWord.length) + (.5 * secretWord.length));
var correctLettersOUT = "";
function startGame() {
var testWord = document.getElementById("randTest").innerHTML = secretWord;
var correctLettersOUT = "";
document.getElementById("currentGuess").innerHTML = secretBlanks(secretWord)
function secretBlanks(secretWord) {
for (var i = 0; i < secretWord.length; i++) {
correctLettersOUT += ("_ ");
}
return correctLettersOUT;
}
}
function correctWord() {
var guessLetter = document.getElementById("guessLetter").value;
document.getElementById("letter").innerHTML = guessLetter;
for (var i = 0; i < secretWord.length; i++) {
if (correctLetters.indexOf(guessLetter) === -1)
{
if (guessLetter === secretWord[i]) {
console.log(guessLetter === secretWord[i]);
correctLettersOUT[i] = guessLetter;
correctLetters.push(guessLetter);
break;
}}
}
if (wrongLetters.indexOf(guessLetter) === -1 && correctLetters.indexOf(guessLetter) === -1) {
wrongLetters.push(guessLetter);
}
console.log(correctLetters); //Used to see if the letters were added to the correct array**
console.log(wrongLetters);
wordGuess();
}
function wordGuess() {
if (guessLetter.value === '') {
alert("You didn't guess anything.");
} else if (guesses > 1) {
// Counts down.
guesses--;
console.log('Guesses Left: ' + guesses);
// Resets the input to a blank value.
let guessLetter = document.getElementById('guessLetter');
guessLetter.value = '';
} else {
console.log('Game Over');
}
//console.log(guesses)
}
function replWord() { }

One solution to see if the word has been guessed completely and create the partially guessed display with the same info, is to keep a Set with the not yet guessed letters, initialized at game start unGuessed = new Set(secretWord);
Since the Set's delete method returns true if the letter was actually removed (and thus existed), it can be used as a check if a correct letter was entered.
Subsequently, the display can be altered in a single place (on startup and after guessing), by mapping the letters of the word and checking if the letter is already guessed:
function alterDisplay(){
document.getElementById("currentGuess").innerHTML =
[...secretWord].map(c=>unGuessed.has(c) ? '_' : c).join(' ');
}
Some mockup code:
let guessWords = ["school", "test", "quiz", "pencil", "ruler", "protractor", "teacher", "homework", "science", "math", "english", "history", "language", "elective", "bully", "grades", "recess", ],
secretWord, unGuessed, guesses;
function startGame() {
secretWord = guessWords[Math.floor(Math.random() * guessWords.length)];
guesses = Math.round(1.5 * secretWord.length);
unGuessed = new Set(secretWord);
setStatus('');
alterDisplay();
}
function alterDisplay(){
document.getElementById("currentGuess").innerHTML = [...secretWord].map(c=>unGuessed.has(c) ? '_' : c).join(' ');
}
function setStatus(txt){
document.getElementById("status").innerHTML = txt;
}
function correctWord() {
let c= guessLetter.value[0];
guessLetter.value = '';
if (!c) {
setStatus("You didn't guess anything.");
}
else if(unGuessed.delete(c)){
alterDisplay();
if(!unGuessed.size) //if there are no unguessed letters left: the word is complete
setStatus('Yep, you guessed it');
}
else if(--guesses < 1){
setStatus('Game Over!');
}
else
setStatus('Guesses Left: ' + guesses);
}
startGame();
let gl = document.getElementById("guessLetter");
gl.onkeyup= correctWord; //for testing: bind to keyup
gl.value = secretWord[1];correctWord(); //for testing: try the 2nd letter on startup
<div id=currentGuess></div>
<input id=guessLetter><span id=letter></span>
<div id='status'></div>

After 30min inactivity initiall lag on IE due to window.onfocus

first post here. I have always found good answers on this site but this is the first time that I could not help myself after extensive research on my very specific problem. I attached a function to "onfocus" of the window/tab which calculates what color and other specific variables are shown on an Statuslight I had to implement in the ERPs own Navigational bar. Therefore on every focus it asks if the Information has changed and if it did, it reloads the page. Everything works fine but after about 30 minutes of inactivity in IE(The company only works with IE so I do not have to keep cross browser compability in mind)...after 30min of inactivity it "lags" ca.5 seconds when the window is focused again.(by lag I mean it simply stops doing anything, not tab change, nothing) I think it might be something about a timeout with the application server or something like that but I just don't have enough insight for this. Hope you guys can help me with this.
Here is the relevant Javascript code:
function addAnpStatusLight() {
if ((window.location.pathname.toLowerCase().indexOf("dlg") < 0) && (window.location.pathname.toLowerCase().indexOf("tab.asp") < 0)) {
//Element initialisieren
var lAmpelB = document.createElement("img");
lAmpelB.id = "AnpStatusLight";
lAmpelB.title = "Browser Terminal";
lAmpelB.src = absoluteUrl("~/Style/system/blank.gif");
lAmpelB.onclick = function () {
window.open(location.href.split("/").slice(0, 4).join("/") + "/time/BrowserTerminal.aspx?_nonav=1");
}
var Ampelcolor;
var BAuftrag = "";
var Position = "";
var PositionN = "";
var Projekt = "";
var ProjektN = "";
AmpelColor = fw.getAmpelC();
currentAmpel = AmpelColor; //für neuladen bei umstempeln benötigt
if (AmpelColor.indexOf(",") != -1) {
var ArAm = AmpelColor.split(",");
if (ArAm.length == 6) {
AmpelColor = ArAm.slice(0, 1);
BAuftrag = ArAm.slice(1, 2);
Position = ArAm.slice(2, 3);
PositionN = ArAm.slice(3, 4);
Projekt = ArAm.slice(4, 5);
ProjektN = ArAm.slice(5, 6);
lAmpelB.title = "Projekt: " + Projekt + ", " + ProjektN + "\nBAuftrag: " + BAuftrag + "\nPosition: " + Position + ", " + PositionN;
} else if (ArAm.length == 4) {
AmpelColor = ArAm.slice(0, 1);
BAuftrag = ArAm.slice(1, 2);
Position = ArAm.slice(2, 3);
PositionN = ArAm.slice(3, 4);
lAmpelB.title = "BAuftrag: " + BAuftrag + "\nPosition: " + Position + ", " + PositionN;
}
}
//Farbe setzen
switch (AmpelColor){
case "G":
fw.addClass(lAmpelB, "Green");
break;
case "Y":
fw.addClass(lAmpelB, "Yellow");
break;
case "R":
fw.addClass(lAmpelB, "Red");
break;
}
//Element anfügen
if (AmpelColor != "NC" && AmpelColor != null) {
this.element.appendChild(lAmpelB);
}
}
}
window.attachEvent("onfocus", updateAmpel); //bis IE 10
//lädt die Seite neu falls umgestempelt wurde, an onfocus angehängt
function updateAmpel() {
if (currentAmpel != getCurrentAmpel()) {
var search = window.location.search;
if (search != "" && search != null) {
var queryHash = getQueryStringAsHash(search);
window.location.href = appendQueryHashToUrl(window.location.pathname, queryHash);
} else {
window.location.href = window.location.href
}
}
}
//berechnet den Ampelstring neu und gibt ihn zurück
function getCurrentAmpel() {
var ret;
ret = fw.getAmpelC();
return ret;
}
Hope this is enough information to understand my problem. If there are further questions please feel free.

Comparing array elements to character

I'm trying to write a simple javascript program to check if a letter is a vowel. The problem is the output is incorrect and should say that " a is a vowel."
Javascript:
function findvowel(letter1, vowels) {
var count = vowels.length;
for (var i = 0; i < count; i++) {
if (vowels[i] === letter1) {
var message1 = " is a vowel";
document.getElementById('exercise3').innerHTML = letter1 + message1;
} else {
var message2 = " is a consonant";
document.getElementById('exercise3').innerHTML = letter1 + message2;
}
}
}
HTML:
<script>
$(document).ready(function() {
findvowel("a",["a","e","i","o","u"]);
});
</script>
Output:
a is a consonant

Add break to your loop so it doesn't keep going.
function findvowel(letter1, vowels) {
var count = vowels.length;
for (var i = 0; i < count; i++) {
if (vowels[i] === letter1) {
var message1 = " is a vowel";
document.getElementById('exercise3').innerHTML = letter1 + message1;
break;
} else {
var message2 = " is a consonant";
document.getElementById('exercise3').innerHTML = letter1 + message2;
}
}
}
You can actually use return false; to stop your function right away when a vowel is matched, however in normal cases break will be used because there might be other codes going on after the loop.
BTW:
function findvowel(letter){
//thanks p.s.w.g for reminding me []
return letter+" is a "+(/[aeiou]/i.test(letter)?"vowel":"constant");
}

You're testing the vowel in the for-loop and updating the output every time. So the output will only display if the last vowel that was tested matched the input. Instead, you should break out of the for-loop if a vowel is found, and only display a failure (" is a consonant") after you've tested all the vowels and you weren't able to find a match:
var count = vowels.length;
for (var i = 0; i < count; i++) {
if (vowels[i] === letter1) {
var message1 = " is a vowel";
document.getElementById('exercise3').innerHTML = letter1 + message1;
return;
}
}
var message2 = " is a consonant";
document.getElementById('exercise3').innerHTML = letter1 + message2;
But this method could be simplified to:
function findvowel(letter1) {
var isVowel = "aeiou".indexOf(letter1) > -1;
var message = letter1 + " is a " + (isVowel ? "vowel" : "consonant");
document.getElementById('exercise3').innerHTML = message;
}

This is what I would do, using native functions:
var letter = "a";
var isVowel = ["a","e","i","o","u"].some(function(vowel){
return vowel === letter;
});
Rergarding your message, I would try something like:
var message = letter + (isVowel ? " is a vowel" : " is a consonant");

I would pass in an object instead of an array and take advantage of the constant time lookup using the 'in' keyword. No need for a loop.
function findvowel(letter1, vowels) {
if (letter1 in vowels) {
var message1 = " is a vowel";
document.getElementById('exercise3').innerHTML = letter1 + message1;
} else {
var message2 = " is a consonant";
document.getElementById('exercise3').innerHTML = letter1 + message2;
}
}
then
var obj = {'a': true, 'e': true, 'i': true, 'o': true, 'u': true}
then call it
findvowel('a', obj)

Since you're already using jQuery, which offers $.inArray(), why don't you do this?
var vowels = ["a", "e", "i", "o", "u"];
$(document).ready(function() {
var letter = 'u';
var found = $.inArray(letter, vowels) > -1;
if(found) {
console.log(letter + ' is a vowel');
} else {
console.log(letter + ' is a consonant');
}
});