Javascript to change button text - javascript

i need a javascript function to be called on certain button click, upon that click the button name will change.
ie,
<input type=button id = button1 value=boy onclick=function(boy,girl)>
i need the javascript function to take 2 parameters and check if the value of the button is the first paramter, then the value will become the 2nd and vice versa.
so if i press the button and it says BOY, it will become Girl
and if i press the button and it says Girl it will become boy!
using javascript please thx.

var foo = function(a,b,c){
if(a.value==b){
a.value=c;
}
else{
a.value=b;
}
};
and for the button
<input type="button" id="button1" value="boy" onclick="foo(this,"boy","girl")">

see here: http://jsfiddle.net/w9ed8/
or:
<input type=button id = button1 value=boy onclick="changeMe(this)">
<script>
function changeMe(obj){
if(obj.value == "boy"){
obj.value = "girl"
}else{
obj.value = "boy"
}
}
</script>
Or
<input type=button id = button1 value=boy onclick="changeMe(this, 'boy' , 'girl')">
<script>
function changeMe(obj , param1 , param2){
if(obj.value == param1 ){
obj.value = param2
}else{
obj.value = param1
}
}
</script>

There are many ways to do this, but by getById function showed below you will have a portable function to access to DOM elements by id :
<html>
<script type="text/javascript">
function getById(a) {
if (document.getElementById && document.getElementById(a)) {
return document.getElementById(a)
} else {
if (document.all && document.all(a)) {
return document.all(a)
} else {
if (document.layers && document.layers[a]) {
return document.layers[a]
} else {
return false
}
}
}
}
function myfunc()
{
getById("button1").value =(getById("button1").value=="boy")?"girl":"boy";
}
</script>
<head>
</head>
<input type="button" value="boy" id="button1" onclick="myfunc();" />
</html>

<input type=button id=button1 value=boy onclick='test(this,boy,girl)'>
<script>
function test(Sender,boy,girl){
Sender.value = Sender.value == boy ? girl : boy;
}
</script>

function change()
{
if((document.getElementById("button1").value)=="Boy")
{
document.getElementById("button1").value="Girl"
}
else
{
document.getElementById("button1").value="Boy"
}
}

Related

How do I manipulate a boolean in a function?

I'm trying to change inputX[0] from false to true, then get an alert if it worked. Unfortunately I don't get the message that inputX[0] was set to true. Do you have any ideas?
<body>
<div>
<button id="S1" onclick="btnManager(this);"></button>
</div>
<script>
var inputX = new Array();
definedInputs();
btnManager();
question();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == (id = "S1")) {
inputX[0] = true;
}
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>
try with this:
<body>
<div>
<button id="S1" onclick="btnManager(this);"></button>
</div>
<script>
var inputX = new Array();
inputX[0] = false;
function btnManager(pressedBtn) {
inputX[0] = !inputX[0];
alert(inputX[0]);
}
</script>
</body>
With this, every you push the button the value will be set by the negation of the current value, hope it helps.
It is important that you understand the Js lifecycle.
First javascript objects and functions are built and
then the code is executed, in this case it happens as follows:
The array "inputX" is created
Using the function "definedInputs()" defines "inputX[0] = false"
"btnManager()" is executed but since it is not assigned a parameter, the value of "pressedBtn.id" is "undefined" so the state of "inputX[0]" does not change
The status of "inputX[0]" is queried using "question()", but since "inputX[0]" is still false, no alert is fired.
All of this happens before you can press the button.
Pressing the button executes "btnManager(this)" and since the id is equal to "S1" the state of "inputX[0]" changes to true.
But you can't see this change because the "question()" function has already been executed.
Try:
<!DOCTYPE html>
<html>
<body>
<div>
<button id="S1" onclick="btnManager(this);">Test</button>
</div>
<script>
var inputX = new Array();
definedInputs();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == "S1") {
inputX[0] = true;
}
question();
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>
</html>
Add some console logs to see what is happening. If you do, you'll see that all of your functions are executing immediately. When you click the button and enter the btnManager() function what happens next? As you'll see, your code is executing the btnManager() function but then what about checking for your alert?
If you call question() after your if statement, then you'll run your check again.
You could do this with less lines, but for the sake of keeping your exact code and making it work, this is how you would achieve your goal:
<body>
<div>
<button id="S1" onclick="btnManager(this);"></button>
</div>
<script>
var inputX = new Array();
// You could really remove these and do it like Lucretius's Answer
definedInputs();
btnManager();
question();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == (id = "S1")) {
inputX[0] = true;
}
question();
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>
You're comparing the value of pressedBtn.id which is a text string S1 to a true/false Boolean evaluation (id == "S1") which will always be false because text strings and boolean values are not the same. Since (id = "S1") is an assignment, and you can't compare an assignment, this is what I am guessing you're trying to do.
'S1' == true will always be false
'S1' == false will also always be false.
Instead of:
function btnManager(pressedBtn) {
if (pressedBtn.id == (id == "S1")) {
inputX[0] = true;
}
}
Just evaluate the id and then log it to console to make sure the input array is updated.
<body>
<div>
<button id="S1" onclick="btnManager(this);">Click</button>
</div>
<script>
var inputX = new Array();
definedInputs();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == "S1" ) { //fixed
console.log( pressedBtn.id == (id == "S1") ); // breaks, undefined
}
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>
Here is your code fixed.
You don't need to call btnManager(); or question(); immediately since these are called in a cascading fashion after the button click event is fired. The only "pre-work" your code needs to do on load is to defineInputs(); so those two lines were removed.
<body>
<div>
<button id="S1" onclick="btnManager(this);">Click</button>
</div>
<script>
var inputX = new Array();
definedInputs();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == "S1") {
inputX[0] = true;
console.log( "true" );
}
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>

JavaScript alert onclick onchange if statement

I am trying to display an onclick alert if the box is filled in with the world "hello", while a different alert should pop up in "hello" is not typed.
Not sure what I am doing wrong here:
The HTML:
<form>
<input id="box" placeholder="type hello" onchange="sayHello()" style="display: block;" />
<input type="button" onclick="sayHelloTwo()" value="Click me" />
<p id="hidden" style="display: none;">
HELLO
</p>
</form>
The JavaScript:
function sayHello() {
var answer = "hello";
if (answer) {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
}
}
function sayHelloTwo() {
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").style.color = "#909090";
document.getElementById("hidden").style.fontSize = "40px";
}
You need to check the actual value that the user entered in the box, and then compare it to the value you want (the value inside your answer variable).
There are several ways to do so, one of the is using
document.getElementById('box').value
(Where box is the id of your element).
Here is a working example:
function sayHello() {
var answer = "hello";
var text = document.getElementById('box').value;
if (text == answer) {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
}
}
function sayHelloTwo() {
document.getElementById("hidden").style.display = "block";
document.getElementById("hidden").style.color = "#909090";
document.getElementById("hidden").style.fontSize = "40px";
}
<form>
<input id="box" placeholder="type hello" onchange="sayHello()" style="display: block;" />
<input type="button" onclick="sayHelloTwo()" value="Click me" />
<p id="hidden" style="display: none;">
HELLO
</p>
</form>
To elaborate on Dekels answer some more, the click event also has an event property attached to it that you can use to get the value, like this.
function sayHello(e) {
if (e.currentTarget.value == "hello") {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
}
}
You have error in checking condition for answer
function sayHello() {
var answer = "hello";
if (answer == "hello") {
alert("Click for Hello!");
} else {
alert("you need to type hello!");
return false;
}
}
You can pass the element value directly as a parameter this.value in your html.
Notice that to make the code case insensitive you must convert the value to lowercase and than check the if statement value.toLowerCase() !== 'hello'
Code:
function sayHello(value) {
if (value.toLowerCase() !== 'hello') {
alert('You need to type hello!');
return false;
}
alert('Click for Hello!');
}
function sayHelloTwo() {
var hidden = document.getElementById('hidden')
hidden.style.display = 'block';
hidden.style.color = '#909090';
hidden.style.fontSize = '40px';
}
<form>
<input id="box" placeholder="type hello" onchange="sayHello(this.value)" style="display: block;" />
<input type="button" onclick="sayHelloTwo()" value="Click me" />
<p id="hidden" style="display: none;">
HELLO
</p>
</form>

checkbox javascript shows status

what is problem with this script? i just want to show checkbox status in innerHTML that show "yes" after click on button, if it is checked, otherwise it shown "no".
<html>
<body>
<p id="demo"></p>
<input id="chkbox" type="checkbox" name="Terms" value="agree" ><br>
<input type="button" value="button" onClick="myFunction()" >
<script>
function myFunction() {
var box = document.getElementById("chkbox");
if(checkbox.checked)
{
var checked.value = "yes";
var txt = checked.value;
document.getElementById("demo").innerHTML = txt;
}
else if(checkbox.unchecked)
{
var unchecked.value = "no";
var txt = unchecked.value;
document.getElementById("demo").innerHTML = txt;
}
}
</script>
</body>
function myFunction() {
var box = document.getElementById("chkbox");
if(box.checked)
{
document.getElementById("demo").innerHTML = 'yes'
}
else
{
document.getElementById("demo").innerHTML = 'no';
}
}
The problems in your code were:
You set the variable box, but then used checkbox.checked instead of box.checked.
You looked for checkbox.unchecked. There's no such property; if .checked isn't true, then the box is unchecked.
You tried to declare variables checked.value and unchecked.value. Variable names can't contain ., that's used for specifying object properties when accessing a variable whose value is an object.
There are multiple problems.
There is no variable with the name checkbox
The syntax var checked.value = "yes"; is invalid
Try
<input type="button" value="button" onClick="myFunction()">
then
function myFunction() {
var box = document.getElementById("chkbox");
box.value = box.checked ? "yes" : 'no';
document.getElementById("demo").innerHTML = box.value;
}
Demo: Fiddle
Since jQuery tag is used include jQuery library in the page then
<input type="button" value="button" id="button">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and
//dom ready handler
jQuery(function ($) {
//cache the elements for future use
var $chk = $('#chkbox'), // id-selector
$demo = $('#demo');
//click event handler
$('#button').click(function () {
//use is() and :checked-selector to check whether the checkbox is checked and use .text() to set the display text of the p element
$demo.text($chk.is(':checked') ? 'yes' : 'no')
})
})
Demo: Fiddle
try:
You assigned element to box not to checkbox
There is nothing like checkbox.unchecked
var name checked.value is not correct format.
Here is code:
function myFunction() {
var box = document.getElementById("chkbox");
if (box.checked) {
document.getElementById("demo").innerHTML = "yes";
} else {
document.getElementById("demo").innerHTML = "no";
}
}
Here is working Demo
Check this one
function myFunction() {
if(document.getElementById('chkbox').checked) {
alert("checked");
} else {
alert("not checked")
}
}
try something like this,Shorthand
function myFunction(){
var box = document.getElementById("chkbox").checked;
document.getElementById("demo").innerHTML = box ? 'yes' : 'no';
}

Getting the value of prompt box into another function

Please check out the code below. I want to get the value entered in the prompt box into function dis(). How can I do that?
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var z=prompt("enter your name...");
if(z!=null)
{
document.getElementById("demo").innerHTML="thankyou"+z+"..";
document.getElementById("case").style.display='block';
}
else
document.getElementById("demo").innerHTML="thankyou";
}
function dis()
{
var a=document.getElementById("aaa").value;
alert("your mark is"+a);
}
</script>
</head>
<body>
<p id="demo">click on the button.....</p>
<button type="button" onclick="display()">submit</button>
<div id="case" style="display:none">
<input type="text" id="aaa" name="myText" onDblClick="dis()">enter your mark
</div>
</body>
</html>
If you want to directly pass value to dis() function then change your script to
function display() {
var z = prompt("enter your name...");
if (z != null) {
document.getElementById("demo").innerHTML = "thankyou " + z + "..";
document.getElementById("case").style.display = 'block';
dis(z);
}
else
document.getElementById("demo").innerHTML = "thankyou";
}
function dis(arg) {
alert("your mark is" + arg);
}
If you want the value to be accessible from independent functions you'll need to store it in a global variable:
<script>
var userName = null;
function display() {
userName = prompt("enter your name...");
if (userName != null) {
document.getElementById("demo").innerHTML="thankyou "+userName +"..";
document.getElementById("case").style.display='block';
} else
document.getElementById("demo").innerHTML="thankyou";
}
function dis() {
var a=document.getElementById("aaa").value;
alert(userName + ", your mark is"+a);
}
</script>
Note that if the functions are completely independent they'll all need to test whether the variable has a value yet. In your case the dis() function is only called from a control that is made visible after a value has been set, but note that the user might click the button again and then cancel - in which case the name will be set back to null but the case element will still be visible.

How to disable input attribute after 10 clicks?

I am trying to remove the style or the background of a textbox to reveal the content after 10 clicks. How can I do that on Javascript?
here is my html:
<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000">
and here is my JS:
function check() {
var tries++;
if (tries == 10){
document.getElementById('firstN').disabled= true;
}
}
The problem is that tries is a local variable (local to the check function). Every time check is called, a new variable named tries is created and initialized to 0.
Try this instead:
var tries = 0;
function check() {
tries++;
if (tries == 10) {
document.getElementById('firstN').style.background = '#ffffff';
}
}
(I'm assuming that you already have some code to call check when the element is clicked. If not, you need to add a click handler to your element.)
You are instantiating a var "tries" everytime you go into this function. Move the variable up a level to where it will increment:
var btn = document.getElementById("btnclick");
btn.onclick = check;
var tries = 0;
function check() {
tries++;
if (tries == 10){
var ele = document.getElementById("firstN");
ele.value= "DISABLED";
ele.disabled = true;
}
}​
EDIT:
Working JSFiddle
store it in a cookie:
<script type="text/javascript">var clicks = 0;</script>
<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" value="Click" onclick="clicks++">
onclick="$.cookie('clicks', $.cookie('clicks') + 1);"
Here you go. Remove the alert lines when you see that it works.
<html>
<head>
<title>Test</title>
<script>
function check(){
var getClicks = parseInt(document.getElementById('firstN').getAttribute('clicks')); //Get Old value
document.getElementById('firstN').setAttribute("clicks", 1 + getClicks); //Add 1
if (getClicks === 10){ //Check
alert('Locked');
document.getElementById('firstN').disabled= true;
} else {
alert(getClicks); //Remove else statement when you see it works.
}
}
</script>
</head>
<body>
<form action="#">
Input Box: <input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" onclick="check();" clicks="0">
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>

Categories