I am trying to create a touchscreen calculator like where the button value will be placed on the textbox after i set it on a focus by clicking but it appears on all the textboxes.I tried to use the code
if ($(impo).is(":focus")) {
but it doesnt work. Please see my snippet
Thanks in advance!
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
document.getElementById('tess').onclick = function() {
document.getElementById('tess_text').focus();
}
document.getElementById('imp').onclick = function() {
document.getElementById('imp_text').focus();
}
function NumPressed(Num) {
if (impo) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.ReadOut.value == " ")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
if (tess) {
if (FlagNewNum) {
FKeyPad.readtess.value = Num;
FlagNewNum = false;
} else {
if (FKeyPad.readtess.value == " ")
FKeyPad.readtess.value = Num;
else
FKeyPad.readtess.value += Num;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=" "> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value=" ">
<br>
<input type="button" value=" 1" onclick="NumPressed(1)" />
<input type="button" value=" 2" onclick="NumPressed(2)" />
<input type="button" value=" 3" onclick="NumPressed(3)" /> <br>
</form>
</body>
</html>
if (impo) and if (tess) just tests whether the element exists, which they do, so the value gets written to both of them because they both exist. In a desktop environment, you can't do what you're asking - you can give a textbox the focus, but once the user clicks on one of the buttons in order to select that number, the textbox no longer has the focus (because the button has it).
You need a separate way to maintain which textbox is currently selected, something like the snippet below. It will update the currently "selected" element both on the click of the Imp/Tes buttons and whenever either of the textbox gains focus (e.g. by mouse click or touch).
var impo = document.getElementById("imp_text");
var tess = document.getElementById("tess_text");
var current_input = impo;
impo.onfocus = function() {
current_input = impo;
}
tess.onfocus = function() {
current_input = tess;
}
document.getElementById('tess').onclick = function() {
current_input = tess;
tess.focus();
}
document.getElementById('imp').onclick = function() {
current_input = impo;
impo.focus();
}
function NumPressed(Num) {
current_input.value += Num;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
<head>
</head>
<body>
<form name="Keypad" action="">
<input type="button" value="Imp" id="imp" /> Importo :
<input name="ReadOut" id="imp_text" type="Text" value=""> <br>
<input type="button" value="Tes" id="tess" /> Card Tess :
<input name="readtess" id="tess_text" type="Text" value="">
<br>
<br>
<input type="button" value="1" onclick="NumPressed(this.value)" />
<input type="button" value="2" onclick="NumPressed(this.value)" />
<input type="button" value="3" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="4" onclick="NumPressed(this.value)" />
<input type="button" value="5" onclick="NumPressed(this.value)" />
<input type="button" value="6" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="7" onclick="NumPressed(this.value)" />
<input type="button" value="8" onclick="NumPressed(this.value)" />
<input type="button" value="9" onclick="NumPressed(this.value)" /> <br>
<input type="button" value="0" onclick="NumPressed(this.value)" /> <br>
</form>
</body>
</html>
I have three buttons. I would like them to change colour when pressed, and back to no colour when pressed again.
I found this code on stackoverflow that allows me to almost do it however, it only works on one button, the other two are not affected.Also, when I pressed one of the other two buttons, the first button changes colour. I tried changing ID's on the buttons, adding another script with different getElementById() ID's but nothing works.
Do I need more than one function to achieve what I want?
The code I am using is below.
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF";
count = 1;
} else {
property.style.backgroundColor = "#E68352";
count = 0;
}
}
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
<input type="button" id="button" value = "A-D" style= "color:black" onclick="setColor('button', '#101010')";/>
<input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
<input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
</body>
Usually, when you write inline event handler you may take advantage of:
this: current element: When code is called from an in–line on-event handler, its this is set to the DOM element on which the listener is placed:
event: event element object
Therefore, change:
onclick="setColor('button', '#101010')"
with:
onclick="setColor(this, event, '#101010')"
So your code can be rewritten as:
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? 'rgb(' +
parseInt(result[1], 16) + ', ' +
parseInt(result[2], 16) + ', ' +
parseInt(result[3], 16) + ')'
: null;
}
function setColor(btnEle, evt, color) {
if (btnEle.style.backgroundColor == hexToRgb("#E68352")) {
btnEle.style.backgroundColor = "#FFFFFF"
}
else {
btnEle.style.backgroundColor = "#E68352"
}
}
<input type="button" id="button1" value = "A-D" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button2" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button3" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
You should have uniques ID
You can use classList.toggle("yourClass") instead of using a count
var buttons = document.getElementsByClassName("button");
for (let i = 0, l = buttons.length; i < l; i++) {
buttons[i].addEventListener('click', function() {
buttons[i].classList.toggle('active');
})
}
.active {
background-color: #E68352 !important;
}
.button {
background-color: #FFFFFF;
}
<input type="button" id="button1" class="button" value="A-D" />
<input type="button" id="button2" class="button" value="E-H" />
<input type="button" id="button3" class="button" value="E-H" />
Set a class on the buttons, and then loop through the buttons and add an event listener to each of them:
EDIT: I see you are using an onclick handler, which I didn't notice at first; so this answer might not be as useful as I thought. You should definitely use different IDs though if you use that approach.
<button class="button" ... >
var buttons = document.getElementsByClassName('button')
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
// Do your button things.
})
}
IDs should be unique inside the document. Like this:
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
<-- here ^ here ^ -->
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
<-- here ^ here ^ -->
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>
<-- here ^ here ^ -->
<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF"
count = 1;
} else {
property.style.backgroundColor = "#E68352"
count = 0;
}
}
</script>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>
</body>
</html>
IDs need to be unique but you do not need them here
Give the buttons a class and use toggle the classList
window.onload=function() {
var buts = document.querySelectorAll(".but");
for (var i=0;i<buts.length;i++) {
buts[i].onclick=function() {
this.classList.toggle("clicked");
}
}
}
.but {background-color:black}
.clicked { background-color:#E68352; }
<input type="button" value="A-D" class="but" />
<input type="button" value="E-F" class="but" />
<input type="button" value="G-H" class="but" />
dont use numbers, use this instead
http://codepen.io/animhotep/pen/qRwjeX?editors=0010
var count = 1;
function setColor(btn, color) {
if (count == 0) {
btn.style.backgroundColor = "#FFFFFF"
count = 1;
}
else {
btn.style.backgroundColor = "#E68352"
count = 0;
}
}
Roberto, as Ibrahim correctly pointed out, the problem is that you are using the same ID for all buttons. When javascript executes this code:
var property = document.getElementById(btw);
it will always return the first element with the ID specified. One solution is choosing a different ID for each button and updating the corresponding onclick code. Another solution could be the one below, in which you do not need to specify IDs at all and the function setColor could be used for any element.
<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function setColor(element, color) {
if (count == 0) {
el.style.backgroundColor = "#FFFFFF"
count = 1;
}
else {
el.style.backgroundColor = "#E68352"
count = 0;
}
}
</script>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
<input type="button" value = "A-D" style= "color:black" onclick="setColor(this, '#101010')";/>
<input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
<input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
</body>
</html>
Note the use of the this variable as the first argument for setColor. In each of the buttons, the corresponding this will point to the element where it is defined.
Hope it helps.
You just need little bit of modification.
See the working code.
function setColor(btn, color) {
var elem = document.getElementById(btn);
if (elem.hasAttribute("style")) {
if (elem.getAttribute("style").indexOf("background-color:") == -1) {
elem.style.backgroundColor = color;
} else {
elem.style.backgroundColor = "";
}
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#E68352')" ;/>
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#E68352')" ;/>
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#E68352')" ;/>
</body>
</html>
HTML code :
<input type="button" id="btn1" class="textboxclass" onclick="input(this.id)" />
<input type="button" id="btn2" class="textboxclass" onclick="input(this.id)" />
<input type="button" id="btn3" class="textboxclass" onclick="input(this.id)" />
<input type="button" id="btn4" class="textboxclass" onclick="input(this.id)" />
and Javascript code :
function input(e) {
e = e.charAt(3);
$(".textboxclass").each(function(index, value) {
if ($(this).is(':focus')) {
$(this).val($(this).val() + e);
$(this).focus();
}
});
}
and
$(this).is(':focus')
line is not working but when i set alert($(this)) it works after that alert
Thank you
I guess you want to append the last character of the ID to the value of the clicked input field. Then Why don't you just do,
$(function(){
$(".textboxclass").click(function(){
var num = this.id.charAt(3);
$(this).val($(this).val() + e);
});
});
I've been working on a hangman game using an HTML template and javascript for a project for a class.
I am currently stuck with a few issues.
1. I am using an array to call the pictures for wrong guesses to add parts to the body in the gallows. only picture #4 shows up when 4 incorrect guesses have occurred.
2. I also have the issue that only for certain words do the buttons decide to actually work and the letter "o" never works
Any help would be greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<title>Hangman</title>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript">
var NumberOfChances;
var theWord = "",oldString="";
var currentGuessed = "";
var value="";
var words = new Array();
words[0]="No strings attached";
words[1]="Never look back";
words[2]="Happy birthday";
words[3]="Against all odds";
words[4]="Break a leg";
words[5]="Off the beaten path";
words[6]="Good old days";
words[7]="Gold rush";
words[8]="Happy camper";
words[9]="Grin from ear to ear";
words[10]="Live long and prosper";
words[11]="Quartz watch";
words[12]="Jumping jacks";
words[13]="Income tax";
var image = new Array();
image[0] = '<img src="image0.jpg" align ="left" width="415" height="496">';
image[1] = "<img src='image1.jpg' align ='left' width='415' height='496'>";
image[2] = '<img src="image2.jpg" align ="left" width="415" height="496">';
image[3] = '<img src="image3.jpg" align ="left" width="415" height="496">';
image[4] = '<img src="image4.jpg" align ="left" width="415" height="496">';
image[5] = '<img src="image5.jpg" align ="left" width="415" height="496">';
image[6] = '<img src="image6.jpg" align ="left" width="415" height="496">';
NumberOfChances = image.length;
function swap(image)
{
document.getElementById("images").src =image+".gif";
}
var usedLetters = new Array();
function secretWord()
{
debugger
theWord = words[Math.floor(Math.random()*51)];
for (i=0; i<theWord.length; i++)
{
currentGuessed = currentGuessed + "*";
}
document.getElementById("secretWord").value = currentGuessed;
debugger
}
function gameProcess()
{
currentGuessed ="";
secretWord();
NumberOfChances=0;
document.getElementById("lives").value = NumberOfChances;
startImage = image[0];
}
function turn(letterGuessed)
{
debugger
value = oldString = "";
var correctGuess = false;
for (i=0; i<theWord.length; i++)
{
if (theWord.charAt(i) == letterGuessed)
{
value = value + letterGuessed;
currentGuessed = currentGuessed.replace(oldString + "*",value);
oldString = value;
correctGuess=true;
}
else
{
if(currentGuessed.charAt(i) == "*")
{
value = value + '*';
oldString = oldString + "*";
}
else
{
value = value + currentGuessed.charAt(i);
oldString = oldString + currentGuessed.charAt(i);
}
}
}
if (!correctGuess)
{
NumberOfChances++;
swap("image" + NumberOfChances );
if (NumberOfChances==6)
{
alert("You Lost!");
document.getElementById("secretWord").value = theWord;
theWord = "";
currentGuessed = "";
}
document.getElementById("lives").value = NumberOfChances;
if(correctGuess != 0)
{
takeChance();
}
}
win();
}
function win()
{
var winCount = 0;
for(var i = 0;i<theWord.length;i++)
{
if(currentGuessed.charAt(i) == "*")
{
winCount++;
}
document.getElementById("secretWord").value = currentGuessed;
}
if(winCount == 0 && currentGuessed != "")
{
alert("yay, you win!");
}
}
</script>
</head>
<body>
<H1>Lets play Hangman</H1>
<form name="userGuessForm" id="form1">
<div id="Image"><img src="image0.gif" align ="left" width="415" height="496" id="images"/></div>
<div id="wordDisplay"></div>
This is the Secret Word<br /><input id="secretWord" type="text" value="currentGuessed" />
<br />
<input id="letters" type="button" name="a" value="a" onClick="turn('a');">
<input id="Button1" type="button" name="b" value="b" onClick="turn('b');">
<input id="Button2" type="button" name="c" value="c" onClick="turn('c');">
<input id="Button3" type="button" name="d" value="d" onClick="turn('d');">
<input id="Button4" type="button" name="e" value="e" onClick="turn('e');">
<input id="Button5" type="button" name="f" value="f" onClick="turn('f');">
<input id="Button6" type="button" name="g" value="g" onClick="turn('g');">
<input id="Button7" type="button" name="h" value="h" onClick="turn('h');">
<input id="Button8" type="button" name="i" value="i" onClick="turn('i');">
<input id="Button9" type="button" name="j" value="j" onClick="turn('j');">
<input id="Button10" type="button" name="k" value="k" onClick="turn('k');">
<input id="Button11" type="button" name="l" value="l" onClick="turn('l');">
<input id="Button12" type="button" name="m" value="m" onClick="turn('m');">
<input id="Button13" type="button" name="n" value="n" onClick="turn('n');">
<input id="Button14" type="button" name="o" value="o" onClick="turn('o');">
<input id="Button15" type="button" name="p" value="p" onClick="turn('p');">
<input id="Button16" type="button" name="q" value="q" onClick="turn('q');">
<input id="Button17" type="button" name="r" value="r" onClick="turn('r');">
<input id="Button18" type="button" name="s" value="s" onClick="turn('s');">
<input id="Button19" type="button" name="t" value="t" onClick="turn('t');">
<input id="Button20" type="button" name="u" value="u" onClick="turn('u');">
<input id="Button21" type="button" name="v" value="v" onClick="turn('v');">
<input id="Button22" type="button" name="w" value="w" onClick="turn('w');">
<input id="Button23" type="button" name="x" value="x" onClick="turn('x');">
<input id="Button24" type="button" name="y" value="y" onClick="turn('y');">
<input id="Button25" type="button" name="z" value="z" onClick="turn('Z');"><br />
Number of Tries (6): <input id="lives" type="text" value="0" onfocus="lives.blur();" SIZE=2>
<input type="button" name="submit" value=" Start Over " onClick="gameProcess()">
<input type="button" name="end" value=" END " onClick="gameEnd()"><br />
</form>
</body>
</html>
Your images aren't working correctly because you're using an array as a string.
document.getElementById("images").src =image+".gif";
should be
document.getElementById("images").src ="image"+NumberOfChances+".gif";
otherwise, what you're doing is taking the html of all the images and setting it as the src attribute for your image.
<img src="<img src="image0.jpg" align ="left" width="415" height="496">, <img src="image1.jpg" align ="left" width="415" height="496">, <img src="image2.jpg" align ="left" width="415" height="496">..." id="images"> This isn't what you want!
And also, I think you've got your jpgs and gifs mixed up. Check your file extensions.
Also, do you have 50 words that you aren't showing here? Your array contains 13, but later you write
theWord = words[Math.floor(Math.random()*51)];
And that seems to suggest you have one less than 51, or 50, words.
In your letterGuessed function, I don't think you're quite grasping the concept of for loops. What you seem to be thinking is that a new iteration happens each time you call the function, but that isn't the case. Rather, the for loop goes through the entire word each time you call the function with the one letter you guessed. So unless every single letter in the word is o, if you guess the letter o, you'll get one point for every o in the word, and -1 chance for every character that isn't o, which isn't what you want. Ditch the for loop and just use i++ for each time the function runs.
function swap(image)
{
document.getElementById("images").src =image+".gif";
}
Try changing gif to jpg
if (!correctGuess)
{
NumberOfChances++;
swap(image[NumberOfChances]);
I have hundreds of counter buttons and i found out how to do simple one in javascript.
But doing this function over and over again really boring, is there any way more easier than this?
Here is my code.
Javascript:
var cnt = 0;
function add() {cnt++;set();}
function sub() {cnt--;set();}
function set() {myform.shesha.value = cnt;}
function price() {myform.shesha1.value = cnt*.500;};
var cnt1 = 0;
function add1() {cnt1++;set1();}
function sub1() {cnt1--;set1();}
function set1() {myform.shesha01.value = cnt1;}
function price1() {myform.shesha11.value = cnt1*.750;};
HTML:
0<input type="button" value="shesha" onclick="add()" />
<input type="input" value="0" size="3" name="shesha" onblur="set();" />
<input type="button" value=" - " onclick="sub()" />
<input type="input" value="0" size="3" name="shesha1" onblur="price();" /></br>
1<input type="button" value="anab " onclick="add1()" />
<input type="input" value="0" size="3" name="shesha01" onblur="set1();" />
<input type="button" value=" + " onclick="sub1()" />
<input type="input" value="0" size="3" name="shesha11" onblur="price1();" /></br>`
There are a number of ways to do this, Here is one:
cnt = []
Here, instead of having a bunch of variables, have an array and change the values in the array corresponding with your position.
. . .
onclick="add(1)"
. . .
function add(pos) {
cnt[pos]++
}
HTML:
<div class="calc">
<input type="button" class="add" value="add" />
<input type="input" class="addVal" />
<input type="button" class="sub" value="add" />
<input type="input" class="subVal" />
</div>
JS: (presumes jQuery)
$('.add').click(function (e) {
var add = $(this).parent().find('.addVal');
add.val(add.val()++);
});
$('.sub').click(function (e) {
var add = $(this).parent().find('.subVal');
add.val(add.val()--);
});