We Keep Coding

Dom Modification to clear Radio Button Info with Reset Button

So I have made a form that I can clear with a reset button. On this form, I have four radio buttons (that code is towards the top). When a button is selected, info comes up using "displayText".
<script type="text/javascript">
function textToDisplay (radioValue) {
console.log("textToDisplay + " + radioValue);
var displayText = "";
if (radioValue == "S") {
displayText = "Shortboards are under 7 ft in length.";
}
else if (radioValue == "L") {
displayText = "Longboards are usually between 8 and 10 ft.";
}
if (radioValue == "A") {
displayText = "Alternative boards defy easy aesthetic description.";
}
if (radioValue == "M") {
displayText = "Mid-Length surfboards are between 7 and 8 ft.";
}
return (displayText)
}
//DOM modification
function modifyDom(radioInput) {
console.log(radioInput.name + " + " + radioInput.value);
var displayText = textToDisplay(radioInput.value);
console.log(node);
var insertnode = document.getElementById("radioButtons");
var infonode = document.getElementById("info")
if (infonode === null) {
console.log("infonode does not yet exist");
var node = document.createElement("DIV");
node.setAttribute("id", "info");
node.className = "form-text infoText";
var textnode = document.createTextNode(displayText);
node.appendChild(textnode);
console.log(node);
insertnode.appendChild(node);
}
else {
console.log("infonode already exists");
infonode.innerHTML = displayText;
}
}
function checkboxesSelected (checkboxes, errorString) {
console.log("checkboxesSelected function");
var cbSelected = 0;
for (i=0; i<checkboxes.length; i++) {
if (checkboxes[i].checked) {
cbSelected += 1;
}
}
if (cbSelected < 2) {
return (errorString);
} else {
return "";
}
}
function validate (form) {
console.log("validate form");
var fail = "";
fail += checkboxesSelected(form.extras, "At least TWO fin setup needs
to be selected.\n")
if (fail == "") return true
else { alert(fail); return false }
}
</script>
When I reset my page using the button,
<input type="reset" name="reset" value="Reset">
the buttons themselves are cleared but the information that appeared from selecting the button is still visible. How can I reset the page so the displayText information is not visible? Thanks!

You can use an event listener for the reset event generated by clicking the reset button to execute cleanup code.
Here's a cut down example of the technique:
"use strict";
let myForm = document.getElementById("myForm");
let infoNode = document.getElementById("infonode");
let infoText = {
"S": "small board's are good",
"L": "large board's are good too"
};
myForm.addEventListener("change", function (event) {
if(event.target.name == "size") {
infoNode.innerHTML = infoText[ event.target.value];
}
}, false);
myForm.addEventListener("reset", function (event) {
infoNode.innerHTML = "";
}, false);
<form id="myForm">
<label> <input name="size" type="radio" value = "S"> Short</label><br>
<label> <input name="size" type="radio" value = "L"> Long</label><br>
<input type="reset" value="reset">
</form>
<div id="infonode"></div>

would suggest to remove the dynamically attached div#info:
document.getElementById("info").remove();
or blank it:
document.getElementById("info").innerHTML = "";

how to make this javascript code shorter?

I created this small game while ago and now i'm trying it find a way to make it script short and simpler i was wondering if there is any another way . I have four pics of animals and blow the pic i have four names . what the game suppose to do is when the users click on right image and right name both the image and the name has to disappear. Any help really appreciate it
function image_select() {
var pic1 = document.getElementById("cow").value;
var text1 = document.getElementById("cow_t").value;
if (document.getElementById("cow").checked) {
if (pic1 == text1) {
var x = document.getElementById("cow_s");
x.play();
} else {
alert("wrong selection");
}
} else {
alert("no");
}
}
function image_select2() {
var pic2 = document.getElementById("dog").value;
var text2 = document.getElementById("dog_t").value;
if (document.getElementById("dog").checked) {
if (pic2 == text2) {
var x = document.getElementById("dog_s");
x.play();
} else {
alert("wrong selection");
}
} else {
alert("no");
}
}
function image_select3() {
var pic3 = document.getElementById("horse").value;
var text3 = document.getElementById("horse_t").value;
if (document.getElementById("horse").checked) {
if (pic3 == text3) {
var x = document.getElementById("horse_s");
x.play();
} else {
alert("wrong selection");
}
} else {
alert("no");
}
}
function image_select4() {
var pic4 = document.getElementById("pig").value;
var text4 = document.getElementById("pig_t").value;
if (document.getElementById("pig").checked) {
if (pic4 == text4) {
var x = document.getElementById("pig_s");
x.play();
} else {
alert("wrong selection");
}
} else {
alert("no");
}
}
<div style="margin-left:230px;">
<br>
<br>
<img onmousedown="dog.play()" height="142" width="142" src="image/cow.jpg" alt="Cow" data-value="cow" onclick="selectImage(event)" />
<img height="142" width="142" src="image/dog.jpg" alt="" data-value="dog" onclick="selectImage(event)"/>
<img height="142" width="142" src="image/horse.jpg" alt="" data-value="horse" onclick="selectImage(event)"/>
<img height="142" width="142" src="image/pig.jpg" data-value="pig" onclick="selectImage(event)"/>
</div>
<br>
<br>
<br>
<div style="margin-left:400px;">
<button type="button" onclick="selectName(event)" value="pig" id="pig_t">Cochon</button>
<button type="button" onclick="selectName(event)" value="cow" id="cow_t">Vache</button>
<button type="button" onclick="selectName(event)" value="horse" id="horse_t">Cheval</button>
<button type="button" onclick="selectName(event)" value="dog" id="dog_t">chien</button>
</div>

Just put the name of the animal to the function (in fact, you seem to already does so, since you pass the event to selectName, but I don't see this function in your code) :
function image_select_animal(prefix) {
var pic = document.getElementById(prefix).value;
var text = document.getElementById(prefix + "_t").value;
if (document.getElementById(prefix).checked) {
if (pic == text) {
var x = document.getElementById(prefix + "_s");
x.play();
} else {
alert("wrong selection");
}
} else {
alert("no");
}
}
and in onclick, call image_select_animal("pig") or equivalent for the other animals.

function image_select(name) {
var el = document.getElementById(name); // create this variable, as you use this element twice. Less DOM lookups.
var pic = el.value; // get the value of the `el` variable
var text = document.getElementById(name + '_t').value;
if (!el.checked) { // if not check
alert('no');
return; // return ends the function immediately, meaning the following lines are not read
}
if (pic != text) {
alert('wrong selection');
return; // return ends the function immediately, meaning the following lines are not read
}
document.getElementById(name + '_s').play(); // no need to store this in variable x, as you only use this element once.
}

how to Grey out and disable a button after its been pressed once?

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;
}

I 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");

Html field incrementer breaks if field is edited by user

Below I have code that is problematic to me. The purpose of it is to increment "input class=qty". This works great unless the user puts in their own number then decides they want to return to using the incremental buttons. My impression is that I can no longer reference the value once the field is edited, but I'm unsure as to what the cause is or a proper solution. Help would be appreciated.
<html>
<head>
<script>
function qtyPlus(fieldId){
var curVal = parseInt(document.getElementById(fieldId).value);
if(isNaN(curVal)) {
document.getElementById(fieldId).setAttribute('value', 0);
}
else {
document.getElementById(fieldId).setAttribute('value', curVal+1);
}
}
function qtyMinus(fieldId) {
var curVal = parseInt(document.getElementById(fieldId).value);
if(isNaN(curVal)) {
document.getElementById(fieldId).setAttribute('value', 0);
}
else {
if(curVal != 0) {
document.getElementById(fieldId).setAttribute('value', curVal-1);
}
}
}
</script>
</head>
<body>
<input type='button' value='-' onclick='qtyMinus("numOfAttendees")' class='qtyminus' >
<input type='text' value='0' class='qty' id='numOfAttendees' >
<input type='button' value='+' onclick='qtyPlus("numOfAttendees")' class='qtyplus' >
</body>
</html>

Change your js for:
function qtyPlus(fieldId){
var curVal = parseInt(document.getElementById(fieldId).value);
if(isNaN(curVal)) {
document.getElementById(fieldId).value = 0;
}
else {
document.getElementById(fieldId).value = curVal+1;
}
}
function qtyMinus(fieldId) {
var curVal = parseInt(document.getElementById(fieldId).value);
if(isNaN(curVal)) {
document.getElementById(fieldId).value = 0;
}
else {
if(curVal != 0) {
document.getElementById(fieldId).value = curVal-1;
}
}
}
Test: http://jsfiddle.net/7dhjT/

Add or Clear localStorage on button click and show the value in html

I have a code that uses localStorage and javascript. I tried to add more slots, like slot1, slot2, slot3 up to 5. I just copy and paste then change the variable names like like slot1, slot2, slot3 up to 5. But it won't work. Help will be appreciated so much.
Javascript:
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
document.getElementById("slot").innerText = slot;
function reduceSlot() {
if (slot >= 1) {
slot--;
localStorage.setItem("slot", slot);
if (slot > 0) {
document.getElementById('slot').innerText = slot;
} else {
document.getElementById('slot').innerText = "FULL";
document.getElementById("button1").style.display = "none";
}
}
}
document.getElementById("button1").onclick = reduceSlot;
function clearLocalStorage() {
localStorage.clear();
}
HTML:
<p id="slot">10</p>
Deduct
<button onclick="window.localStorage.clear();">Clear All</button>
Fiddle: http://jsfiddle.net/barmar/K8stQ/3/

not sure but. is this what you want to do?? working demo
i changed your code a bit.. you can change it into your liking later..
<span id="slot0">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(0)})()" ><br>
<span id="slot1">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(1)})()" ><br>
<span id="slot2">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(2)})()" ><br>
<span id="slot3">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(3)})()" ><br>
<span id="slot4">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(4)})()" ><br>
<p>
<button onclick="clearAll()">Clear All</button>
</p>
and for the js...
ls = localStorage.getItem("slots") ;
if(!ls) { localStorage.setItem("slots", "10,10,10,10,10");
}
var slots = localStorage.getItem("slots").split(',').map(Number);
window.onload = updateSlots;
function updateSlots() { for(var i=0;i<slots.length;i++) {
document.getElementById('slot' + i ).innerHTML = slots[i] ;
}}
var reduceSlot = function(slotId) {
console.log(slots[slotId]) ;
if(slots[slotId] >= 1) {
slots[slotId]--; localStorage.setItem("slots",slots);
document.getElementById('slot' + slotId).innerHTML = slots[slotId];
}
else { document.getElementById('slot'+slotId).innerText = "FULL";
}
};
function clearAll() {
window.localStorage.clear();
slots = [10,10,10,10,10];
updateSlots();
}

Try this,
Script
window.ready = function() {
checkStorage();
}
function checkStorage() {
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
document.getElementById("slot").innerHTML = slot;
}
function reduceSlot() {
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
if (slot >= 1) {
slot--;
localStorage.setItem("slot", slot);
if (slot > 0) {
document.getElementById('slot').innerHTML = slot;
} else {
document.getElementById('slot').innerHTML = "FULL";
document.getElementById("button1").style.display = "none";
}
}
}
document.getElementById("button1").onclick = reduceSlot;
document.getElementById("clear").onclick = clear_me;
function clear_me() {
localStorage.clear();
checkStorage();
}
HTML
<p id="slot">10</p>
Deduct
<button id="clear">Clear All</button>
Demo