hi i am trying to grey out and disable a button (each button in the div) after its been pressed once. so that the user wont be able to press it again until he/she refresh the page. hope my question is the right way to ask.. and i hope you can understand me. this is my HTML page code:
<!DOCTYPE html>
<html xmlns="">
<head>
<!--this name will be visible on the tab-->
<title>Multiplayer</title>
<!--this is to link HTML and CSS together-->
<link rel="stylesheet" type="text/css" href="Hangman.css">
<script> var currentPlayingWord = "<?php echo $result["word"] ?>" </script>
<script src="jquery-1.11.3.js"></script>
<script src="JSforMultiPlayer.js"></script>
</head>
<body style="background-color:#00FFFF">
<!--this is the picture on the webpage-->
<img id="hangman-image" src="hangmanImage.png" alt="Hangman" style="width:660px;height:618px;" align="right">
<!--these are the buttons which use to input the words in-->
<div id="all-the-buttons">
<div id="first-row" class="row-button">
<button type="button">Q</button>
<button type="button">W</button>
<button type="button">E</button>
<button type="button">R</button>
<button type="button">T</button>
<button type="button">Y</button>
<button type="button">U</button>
<button type="button">I</button>
<button type="button">O</button>
<button type="button">P</button>
</div>
<div id="second-row" class="row-button" >
<button type="button">A</button>
<button type="button">S</button>
<button type="button">D</button>
<button type="button">F</button>
<button type="button">G</button>
<button type="button">H</button>
<button type="button">J</button>
<button type="button">K</button>
<button type="button">L</button>
</div>
<div id="third-row" class="row-button" style="padding-top: 4px;">
<button type="button">Z</button>
<button type="button">X</button>
<button type="button">C</button>
<button type="button">V</button>
<button type="button">B</button>
<button type="button">N</button>
<button type="button">M</button>
<button id="reset-button" type="button">RESET</button>
</div>
<p class="mylives" type="text"></p>
</div>
<form>
<input type="text" id="word-outcome"/>
</form>
<form>
<input type="text" id="wrong-guesses"/>
</form>
<form>
<input type="text" class="hint" style="display:none;" value="Hint: word is computer related." readonly></input>
</form>
<TABLE BORDER="5" WIDTH="20%" CELLPADDING="5" CELLSPACING="2" id="Score-Board">
<TR>
<caption id="table-title">Score Board</caption>
</TH>
</TR>
<TR ALIGN="CENTER">
<TH colspan="2" id="player1"></TH>
<TH colspan="2" id="player2"></TH>
</TR>
<TR ALIGN="CENTER">
<TH colspan="2" id="player1Score"></TH>
<TH colspan="2" id="player2Score"> </TH>
</TR>
</TABLE>
</body>
this is my JavaScript Code:
var wordbank = ['browser', 'binary', 'cache', 'cookie', 'CSS', 'HTML', 'javascript', 'gigabyte', 'google', 'download']
var underscores = "";
var guessCounter = 0;
var score = 1000;
var player1Name;
var player2Name;
$(document).ready(function () {
getPlayerNames();
underscores = wordloop(currentPlayingWord);
wordOutCome(underscores);
guessCounter = 10;
$('#all-the-buttons button').click(function () {
letterPress($(this));
});
});
var wordloop = function (word) {
var wordcount = 0
var underscores = "";
while (wordcount < word.length) {
underscores = underscores + "_";
wordcount++;
}
return underscores;
}
var randomNumber = function () {
var random = Math.floor((Math.random() * 9) + 0);
return random;
}
var wordOutCome = function (underscores) {
var wordoutcome = document.getElementById('word-outcome');
wordoutcome.value = underscores;
}
function letterPress(button) {
var text = button.text();
if ("RESET" === text) {
resetButton();
}
else {
var result = isLetterInWord(text, currentPlayingWord);
if (result == true) {
increaseScore();
replaceDashesForLetter(text);
var hasDashes = noMoreDashes();
if (hasDashes == true) {
navigateToWinnerPage();
}
}
else {
decreaseGuessCount();
decreaseScore();
noMoreGuesses();
addIncorrectGuessToWrongGuesses(text);
noMoreLives();
}
$('#word-outcome').val(underscores);
}
}
function isLetterInWord(guess, word) {
var uppercaseGuess = guess.toUpperCase();
var uppercaseWord = word.toUpperCase();
for (var i = 0; i < uppercaseWord.length; i++) {
console.log(i);
if (uppercaseWord[i] === uppercaseGuess) {
return true;
}
//get letter from word
//is letter from word the same as guess
//if letter from word is the same as guess return true
//return false if guess is not in the word
}
return false;
}
function replaceDashesForLetter(letter) {
for (var i = 0; i < currentPlayingWord.length; i++) {
console.log(currentPlayingWord);
var playingLetter = currentPlayingWord[i];
var upperCaseCurrentLetter = playingLetter.toUpperCase();
if (upperCaseCurrentLetter == letter) {
underscores = setCharAt(underscores, i, letter);
}
}
//for each letter in current word being played
//does letter guessed match the letter in the current word
//if letter guessed matches the letter in the current word - then replace the dash at the index (count in loop) with the letter guessed
//for each of the letters in the word being played there is a dash
//if the letter is at the index of a dash then replace that dash with the letter (which is the users guess)
}
function setCharAt(str, index, chr) {
//get first part of word up to character we want to replace
var first = str.substr(0, index);
//get second part of word ONE letter AFTER character we want to replace
var second = str.substr(index + 1);
//result is the first part plus the character to replace plus the second part
return first + chr + second;
}
var addIncorrectGuessToWrongGuesses = function (guess) {
var currentText = document.getElementById("wrong-guesses").value;
document.getElementById("wrong-guesses").value = currentText + guess;
//As the guess is wrong
//add the guess to the list of incorrect guesses displayed on the screen
}
var greyOutButton = function (button) {
//grey out the button
//make sure that the user cannot press the button anymore
}
function resetButton() {
location.href = "HangmanHomePage.php";
//Send user to the home page
}
var decreaseGuessCount = function () {
guessCounter = guessCounter - 1;
if (guessCounter === 3) {
showHint();
}
//guess count should be decreased by one
}
var noMoreGuesses = function () {
if (guessCounter === 0) {
location.href = "Looser Page.php";
}
//do something when no more guesses (navigate to loser page)
}
var noMoreDashes = function () {
var i = underscores.indexOf("_");
if (i > -1) {
return false;
}
return true;
//if index of '_' is not -1 then there are dashes
}
var navigateToWinnerPage = function () {
location.href = "Winner Page.php?score="+score;
}
var noMoreLives = function () {
var showLives = "You have " + guessCounter + " lives";
var test = document.getElementsByClassName("mylives");
test.textContent = showLives;
}
function showHint() {
document.getElementsByClassName('hint').style.display = "block";
}
function increaseScore(){
score = score + 100;
console.log(score);
var showScore = $("#player1Score");
showScore.text(score);
}
function decreaseScore(){
score = score - 100;
console.log(score);
var showScore = $("#player1Score");
showScore.text(score);
}
function navigateToDifficultyForMultiPlayer() {
//set player names in session
setPlayerNames();
//navigate to DifficultyForMultiPlayer page
location.href = "DifficultyForMultiPlayer.html";
}
function setPlayerNames() {
var firstPlayerName = document.getElementById("playerOneName").value;
var secondPlayerName = document.getElementById("playerTwoName").value;
console.log(firstPlayerName + " " + secondPlayerName);
sessionStorage.setItem("Player1Name", firstPlayerName);
sessionStorage.setItem("Player2Name", secondPlayerName);
}
function getPlayerNames(){
player1Name = sessionStorage.getItem("Player1Name");
player2Name = sessionStorage.getItem("Player2Name");
console.log(player1Name + " " + player2Name);
document.getElementById("player1").innerHTML = player1Name;
document.getElementById("player2").innerHTML = player2Name;
}
function displayScore () {
var playerOneScore = score;
}
hi i am trying to grey out and disable a button (each button in the div) after its been pressed once. so that the user wont be able to press it again until he/she refresh the page. hope my question is the right way to ask.. and i hope you can understand me. this is my HTML page code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<!--this name will be visible on the tab-->
<title>Multiplayer</title>
<!--this is to link HTML and CSS together-->
<link rel="stylesheet" type="text/css" href="Hangman.css">
<script> var currentPlayingWord = "<?php echo $result["word"] ?>" </script>
<script src="jquery-1.11.3.js"></script>
<script src="JSforMultiPlayer.js"></script>
</head>
<body style="background-color:#00FFFF">
<!--this is the picture on the webpage-->
<img id="hangman-image" src="hangmanImage.png" alt="Hangman" style="width:660px;height:618px;" align="right">
<!--these are the buttons which use to input the words in-->
<div id="all-the-buttons">
<div id="first-row" class="row-button">
<button type="button">Q</button>
<button type="button">W</button>
<button type="button">E</button>
<button type="button">R</button>
<button type="button">T</button>
<button type="button">Y</button>
<button type="button">U</button>
<button type="button">I</button>
<button type="button">O</button>
<button type="button">P</button>
</div>
<div id="second-row" class="row-button" >
<button type="button">A</button>
<button type="button">S</button>
<button type="button">D</button>
<button type="button">F</button>
<button type="button">G</button>
<button type="button">H</button>
<button type="button">J</button>
<button type="button">K</button>
<button type="button">L</button>
</div>
<div id="third-row" class="row-button" style="padding-top: 4px;">
<button type="button">Z</button>
<button type="button">X</button>
<button type="button">C</button>
<button type="button">V</button>
<button type="button">B</button>
<button type="button">N</button>
<button type="button">M</button>
<button id="reset-button" type="button">RESET</button>
</div>
<p class="mylives" type="text"></p>
</div>
<form>
<input type="text" id="word-outcome"/>
</form>
<form>
<input type="text" id="wrong-guesses"/>
</form>
<form>
<input type="text" class="hint" style="display:none;" value="Hint: word is computer related." readonly></input>
</form>
<TABLE BORDER="5" WIDTH="20%" CELLPADDING="5" CELLSPACING="2" id="Score-Board">
<TR>
<caption id="table-title">Score Board</caption>
</TH>
</TR>
<TR ALIGN="CENTER">
<TH colspan="2" id="player1"></TH>
<TH colspan="2" id="player2"></TH>
</TR>
<TR ALIGN="CENTER">
<TH colspan="2" id="player1Score"></TH>
<TH colspan="2" id="player2Score"> </TH>
</TR>
</TABLE>
</body>
this is my JavaScript Code:
var wordbank = ['browser', 'binary', 'cache', 'cookie', 'CSS', 'HTML', 'javascript', 'gigabyte', 'google', 'download']
var underscores = "";
var guessCounter = 0;
var score = 1000;
var player1Name;
var player2Name;
$(document).ready(function () {
getPlayerNames();
underscores = wordloop(currentPlayingWord);
wordOutCome(underscores);
guessCounter = 10;
$('#all-the-buttons button').click(function () {
letterPress($(this));
});
});
var wordloop = function (word) {
var wordcount = 0
var underscores = "";
while (wordcount < word.length) {
underscores = underscores + "_";
wordcount++;
}
return underscores;
}
var randomNumber = function () {
var random = Math.floor((Math.random() * 9) + 0);
return random;
}
var wordOutCome = function (underscores) {
var wordoutcome = document.getElementById('word-outcome');
wordoutcome.value = underscores;
}
function letterPress(button) {
var text = button.text();
if ("RESET" === text) {
resetButton();
}
else {
var result = isLetterInWord(text, currentPlayingWord);
if (result == true) {
increaseScore();
replaceDashesForLetter(text);
var hasDashes = noMoreDashes();
if (hasDashes == true) {
navigateToWinnerPage();
}
}
else {
decreaseGuessCount();
decreaseScore();
noMoreGuesses();
addIncorrectGuessToWrongGuesses(text);
noMoreLives();
}
$('#word-outcome').val(underscores);
}
}
function isLetterInWord(guess, word) {
var uppercaseGuess = guess.toUpperCase();
var uppercaseWord = word.toUpperCase();
for (var i = 0; i < uppercaseWord.length; i++) {
console.log(i);
if (uppercaseWord[i] === uppercaseGuess) {
return true;
}
//get letter from word
//is letter from word the same as guess
//if letter from word is the same as guess return true
//return false if guess is not in the word
}
return false;
}
function replaceDashesForLetter(letter) {
for (var i = 0; i < currentPlayingWord.length; i++) {
console.log(currentPlayingWord);
var playingLetter = currentPlayingWord[i];
var upperCaseCurrentLetter = playingLetter.toUpperCase();
if (upperCaseCurrentLetter == letter) {
underscores = setCharAt(underscores, i, letter);
}
}
//for each letter in current word being played
//does letter guessed match the letter in the current word
//if letter guessed matches the letter in the current word - then replace the dash at the index (count in loop) with the letter guessed
//for each of the letters in the word being played there is a dash
//if the letter is at the index of a dash then replace that dash with the letter (which is the users guess)
}
function setCharAt(str, index, chr) {
//get first part of word up to character we want to replace
var first = str.substr(0, index);
//get second part of word ONE letter AFTER character we want to replace
var second = str.substr(index + 1);
//result is the first part plus the character to replace plus the second part
return first + chr + second;
}
var addIncorrectGuessToWrongGuesses = function (guess) {
var currentText = document.getElementById("wrong-guesses").value;
document.getElementById("wrong-guesses").value = currentText + guess;
//As the guess is wrong
//add the guess to the list of incorrect guesses displayed on the screen
}
var greyOutButton = function (button) {
//grey out the button
//make sure that the user cannot press the button anymore
}
function resetButton() {
location.href = "HangmanHomePage.php";
//Send user to the home page
}
var decreaseGuessCount = function () {
guessCounter = guessCounter - 1;
if (guessCounter === 3) {
showHint();
}
//guess count should be decreased by one
}
var noMoreGuesses = function () {
if (guessCounter === 0) {
location.href = "Looser Page.php";
}
//do something when no more guesses (navigate to loser page)
}
var noMoreDashes = function () {
var i = underscores.indexOf("_");
if (i > -1) {
return false;
}
return true;
//if index of '_' is not -1 then there are dashes
}
var navigateToWinnerPage = function () {
location.href = "Winner Page.php?score="+score;
}
var noMoreLives = function () {
var showLives = "You have " + guessCounter + " lives";
var test = document.getElementsByClassName("mylives");
test.textContent = showLives;
}
function showHint() {
document.getElementsByClassName('hint').style.display = "block";
}
function increaseScore(){
score = score + 100;
console.log(score);
var showScore = $("#player1Score");
showScore.text(score);
}
function decreaseScore(){
score = score - 100;
console.log(score);
var showScore = $("#player1Score");
showScore.text(score);
}
function navigateToDifficultyForMultiPlayer() {
//set player names in session
setPlayerNames();
//navigate to DifficultyForMultiPlayer page
location.href = "DifficultyForMultiPlayer.html";
}
function setPlayerNames() {
var firstPlayerName = document.getElementById("playerOneName").value;
var secondPlayerName = document.getElementById("playerTwoName").value;
console.log(firstPlayerName + " " + secondPlayerName);
sessionStorage.setItem("Player1Name", firstPlayerName);
sessionStorage.setItem("Player2Name", secondPlayerName);
}
function getPlayerNames(){
player1Name = sessionStorage.getItem("Player1Name");
player2Name = sessionStorage.getItem("Player2Name");
console.log(player1Name + " " + player2Name);
document.getElementById("player1").innerHTML = player1Name;
document.getElementById("player2").innerHTML = player2Name;
}
function displayScore () {
var playerOneScore = score;
}
- Why downvoting? Nothing wrong with this question. – RiesvGeffen Commented Dec 7, 2015 at 14:36
- 2 Please see the help section on how to write a minimal reproducible example. – Gerald Schneider Commented Dec 7, 2015 at 14:36
- @Goldenowner to much irrelevant information was given – DarkBee Commented Dec 7, 2015 at 14:37
- sorry guys i thought you guys might need to see the whole code so you could help me – LPB Commented Dec 7, 2015 at 14:41
5 Answers
Reset to default 6I needed to do this recently. But what I did was, disable the button for only a few seconds so that it's long enough to prevent double clicking and short enough to still carry on if any validation errors etc.
<script type="text/javascript">
$(document).on('click', ':button', function (e) {
var btn = $(e.target);
btn.attr("disabled", "disabled"); // disable button
window.setTimeout(function () {
btn.removeAttr("disabled"); // enable button
}, 2000 /* 2 sec */);
});
</script>
If you want the button to stay disabled use this
<script type="text/javascript">
$(document).on('click', ':button', function (e) {
var btn = $(e.target);
btn.attr("disabled", "disabled"); // disable button
});
</script>
In the click function you can do this:
$("button").click(function() {
var buttonId = this.id;
document.getElementById("buttonId").disabled = true; //OR
document.getElementById("buttonId").readOnly= true;
});
You can make use of the disabled attribute :
$('#all-the-buttons button').click(function (e) {
if ($(this).is(':disabled')) e.preventDefault();
else letterPress($(this));
});
var greyOutButton = function (button) {
button.prop('disabled', true);
}
Target it with CSS to change the style :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
}
You should rethink some of your logic.
Try something like this (didn't test this)
JavaScript
$scope.letters = "qwertyuiopasdfghjklzxcvbnm";
$scope.lettersArray = [];
for (var i=0 ; i<$scope.letters.length ; i++) {
$scope.lettersArray.push($scope.letters[i];
}
$scope.disableMe = function(event) {
$(event.currentTarget).css('disabled', 'true');
}
HTML
<div ng-repeat="letter in lettersArray">
<button type="button" ng-click="disableMe($event)">{{letter}}</button>
</div>
Just add an attribute with jQuery (with adding css for cursor if you like)
$(document).ready(function () {
$("button").attr("disabled", "disabled").css("cursor", "not-allowed");
});
or simple javascript:
document.getElementsByTagName("button")[0].setAttribute("disabled", "disabled");