Two events on the same button with two click - javascript

I need to create a button that works like this :
var i = true
first click --> var i = false
second click --> var i = true
....
HTML
<input type="button" value="test" onclick="stop(); start();" />
How can i specify theese functions in my JS document ?

you can toggle a boolean by doing this :
var b = true;
b = !b
in your case use :
<input type="button" value="test" onclick="b = !b;" />
it's better to doing this with a function
var b = true;
function toggle () { b = !b; console.log(b) }
and in your html
<input type="button" value="test" onclick="toggle();" />

You can do it like this
<input type="button" value="test" />
And the javascript code.
var btn = document.getElementsByTagName('input')[0];
var i = true;
btn.addEventListener('click', function() {
if (i == true)
i = false;
else
i = true;
});

make a counter for clicks
var countClick= 0
if (countClick== 1) {
//do the first click code
}
if (countClick== 2) {
//do the second click code
}

You can simply associate a function call on onclick event and then toggle the boolean value:
var i = true;
function clicked () {
//toggle the value
i = !i;
console.log(i);
}
<input type="button" value="test" onclick="clicked();" />

Here is a snippet that does what you want. You can have it toggle forever or just the one time like your example.
var buttonClicks = 0;
var boolValue = true;
var boolValueOutput = document.getElementById("boolValue")
boolValueOutput.innerHTML = boolValue;
function onButtonClick()
{
buttonClicks++;
// If you want it to only work once uncomment this
//if (buttonClicks > 2)
// return;
boolValue = !boolValue;
boolValueOutput.innerHTML = boolValue;
}
<input type="button" value="test" onclick="onButtonClick();" />
<p id="boolValue"></p>

Related

How do you use one button to switch upper case and lower case by using javascript

We need one button to switch upper case and lower case of 26 alphabet by using JavaScript, just like android input method did. The code of using two button is as below. In order to save space, we just gave 3 alphabet button.
Any help is appreciated!
<input type="button" id="myBtn_q" onclick="myFunctionTest(this.value)" value="q">
<input type="button" id="myBtn_w" onclick="myFunctionTest(this.value)" value="w">
<input type="button" id="myBtn_e" onclick="myFunctionTest(this.value)" value="e">
<input type="button" id="myBtn_upperCase" onclick="myFunctionupperCase()" value="upperCase">
<input type="button" id="myBtn_lowerCase" onclick="myFunctionlowerCase()" value="lowerCase">
function myFunctionupperCase() {
if(document.getElementById("myBtn_a").value=="a"){
alert(document.getElementById("myBtn_a").value);
var controller=97;
for (controller=97; controller < 123; controller++) {
var id_code="myBtn_"+String.fromCharCode(controller);
//alert(id_code);
document.getElementById(id_code).value=String.fromCharCode(controller-32);
}
}
}
function myFunctionlowerCase() {
if(document.getElementById("myBtn_a").value=="A"){
alert(document.getElementById("myBtn_a").value);
var controller=65;
for (controller=65; controller < 91; controller++) {
var id_code="myBtn_"+String.fromCharCode(controller).toLowerCase();
//alert(id_code);
document.getElementById(id_code).value=String.fromCharCode(controller+32);
}
}
}
We attempt to combine two button's code into one button. However, it did not works. The code is as below.
<input type="button" id="myBtn_caseChange" onclick="myFunctioncaseChange()" value="caseChange">
function myFunctioncaseChange() {
if(document.getElementById("myBtn_a").value=="a"){
document.getElementById("myBtn_caseChange").value=="Lower Case"
alert(document.getElementById("myBtn_a").value);
var controller=97;
for (controller=97; controller < 123; controller++) {
var id_code="myBtn_"+String.fromCharCode(controller);
document.getElementById(id_code).value=String.fromCharCode(controller-32);
}
}
if(document.getElementById("myBtn_a").value=="A"){
document.getElementById("myBtn_caseChange").value=="Upper Case"
alert(document.getElementById("myBtn_a").value);
var controller=65;
for (controller=65; controller < 91; controller++) {
var id_code="myBtn_"+String.fromCharCode(controller).toLowerCase();
document.getElementById(id_code).value=String.fromCharCode(controller+32);
}
}
}
This should do it:
(function() { // closure to encapsulate the toggle state
// choose the initial case
var is_upper = true;
// get the toggle button's ID
var toggle = document.getElementById('myBtn_toggle');
// helper function that sets the buttons how you want
function update() {
toggle.value = is_upper ? '\u21E9' : '\u21E7';
for (var c = 1; c <= 26; ++c) {
var lc = String.fromCharCode(96 + c);
var uc = String.fromCharCode(64 + c);
var el = document.getElementById('myBtn_' + lc);
if (!el) continue;
el.value = is_upper ? uc : lc;
}
}
// add an event handler _properly_, without inline handlers
toggle.addEventListener('click', function() {
is_upper = !is_upper; // flip the case
update(); // update the buttons
});
update(); // make sure the page starts how you want
})(); // execute the above closure immediately
Demo at https://jsfiddle.net/alnitak/1c5x76uf/

Make Javascript instantly/immediately be interchangeable depending on user input

In a js code, i created 3 buttons --- button 1...button 2...button 3
and 3 input fields --- input field 1...input field 2...input field 3
From the beginning of the script all buttons are disabled
button 1 will only be activated (you can click on it) when input field 1 and 2 have numerated values
button 2 will only be activated when input field 1 and 3 have numerated values
button 3 will only be activated when input field 2 and 3 have numerated values.
My problem is when i entered a numerated value for input field 1 and 2, button 1 will not activate (in-clickable) even though it was suppose to
And lets say i redid my code and got my whole code backwards so, at the beginning of my script all the buttons were not disabled (you could click on them). Then i made a simple conditional statement like so
input field 1 = if1
input field 2 - if2
if (if1.length = 0 || isNaN(if1) && if2.length = 0 || isNaN(if2) ) {
document.getElementById("button 1").disable = true;
}
Button 1 will not immediately disable until the user clicks on the button. And if the user were to re-enter the appropriate value type in input field 1, button 1 will not activate (be-clickable) because apparently its permanently disabled.
So down to summary, I'm asking if there is a way to make JavaScript be instantly interactive. Such as a web browser search bar. The moment you type something, you immediately get a list of possible questions and when you don't type anything in them the list disappears and the browser regains its original state.
Any Advice/help shall be greatly appreciated
Due to Life and its problems my code some how got deleted. Thus the lack of code and bunch of words. Sorry.
Generic solution (using attributes)
You can check the answer below which is using oninput event and the attributes to handle your situation effectively.
I have added a data-target attribute to link the elements together to fit with your requirement.
For an instance, to match the rule button 1 will only be activated (you can click on it) when input field 1 and 2 have numerated values, data-target of button1 is id of textbox 1 & 2.
Working snippet:
function checkInput() {
var dataTarget = 'data-target';
var elm = event.target;
var targetAttrs = getAttr(elm, dataTarget);
if(targetAttrs) {
var targetButtons = targetAttrs.split(',');
for(var i = 0; i < targetButtons.length; i++) {
var button = document.getElementById(targetButtons[i]);
targetAttrs = getAttr(button, dataTarget);
if(targetAttrs) {
var targetTextBoxes = targetAttrs.split(',');
var valid = true;
for(var j = 0; j < targetTextBoxes.length; j++) {
var textBox = document.getElementById(targetTextBoxes[j]);
if(textBox) {
valid = isValidNumber(textBox.value);
}
if(!valid) {
break;
}
}
button.disabled = !valid;
}
}
}
}
function isValidNumber(val) {
return (val && val.length > 0 && !isNaN(val));
}
function getAttr(elm, name){
var val;
if(elm) {
var attrs = elm.attributes;
for(var i = 0; i < attrs.length; i++) {
if(attrs[i].name === name) {
val = attrs[i].value;
break;
}
}
}
return val;
}
<div>
<input type="text" id="textBox1" oninput="checkInput()" data-target="button1,button2" />
</div>
<br/>
<div>
<input type="text" id="textBox2" oninput="checkInput()" data-target="button1,button3" />
</div>
<br/>
<div>
<input type="text" id="textBox3" oninput="checkInput()" data-target="button2,button3" />
</div>
<br/>
<input type="button" id="button1" value="Submit" data-target="textBox1,textBox2" disabled />
<input type="button" id="button2" value="Submit" data-target="textBox1,textBox3" disabled />
<input type="button" id="button3" value="Submit" data-target="textBox2,textBox3" disabled />
Note: With this code, when you add more elements, you don't need to change/add any Javascript code. Just add the elements and attributes
var field1 = document.getElementById('if1');
var field2 = document.getElementById('if2');
var field3 = document.getElementById('if3');
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var button3 = document.getElementById('button3');
field1.addEventListener('input', function(){
if(this.value!= '' && field2.value!='')
button1.disabled = false;
else
button1.disabled = true;
if(this.value!= '' && field3.value!='')
button2.disabled = false;
else
button2.disabled = true;
});
field2.addEventListener('input', function(){
if(this.value!= '' && field1.value!='')
button1.disabled = false;
else
button1.disabled = true;
if(this.value!= '' && field3.value!='')
button3.disabled = false;
else
button3.disabled = true;
});
field3.addEventListener('input', function(){
if(this.value!= '' && field1.value!='')
button2.disabled = false;
else
button2.disabled = true;
if(this.value!= '' && field2.value!='')
button3.disabled = false;
else
button3.disabled = true;
});
<input type="text" id="if1">
<input type="text" id="if2">
<input type="text" id="if3">
<br>
<button type="button" id="button1" disabled="true">Button1</button>
<button type="button" id="button2" disabled="true">Button2</button>
<button type="button" id="button3" disabled="true">Button3</button>
Here is how you do it
Disabling a html button
document.getElementById("Button").disabled = true;
Enabling a html button
document.getElementById("Button").disabled = false;
Demo Here
Edited
Try this...
You apply addEventListener to that DOM object:
document.getElementById("IDTeam").addEventListener("change", function() {//call function here});
For IE
document.getElementById("IDTeam").attachEvent("onchange", function() {//call function here} );

create photo gallery with controlled time interval by user

I have read that lesson:
http://html.net/tutorials/javascript/lesson17.php
which contains an example:
http://html.net/tutorials/javascript/lesson17_ex1.html
but I need to create a photo gallery with possibility to choose time between photos by user, so I want to modified that line of code:
galleryStarter = setTimeout("startGallery()", 2000);
to be as user want, so I add:
<input type="text" name="name" id="name"><br>
<input type="button" id="btnSub" value="User gallery"/>
<input type="button" id="btnSub" value="User gallery"/>
also:
var btnStart = document.getElementById("btnStart");
var btnStop = document.getElementById("btnStop");
var btnSub = document.getElementById("btnSub");
btnStart.onclick = startGallery;
btnStop.onclick = stopGallery;
btnSub.onclick = userGallery;
and:
function userGallery()
{
curImage.src = preloadedImgs[counter].src;
counter ++;
if (counter == preloadedImgs.length)
{
counter = 0;
}
var c=document.getElementById("name").value;
galleryStarter = setTimeout("userGallery()", c);
window.alert(c);
isGalleryOn = true;
}
but id didn't work.. what is the reason?
It is because you didn't clear previous timer.
clearTimeout(galleryStarter);
isGalleryOn = false;
Inside function userGallery() will solved your issue.
Check Fiddle Here.

Check if two elements have been clicked, and a value has been entered in a textbox in Javascript

Here's a demo of what I'm talking about - http://jsfiddle.net/MatthewKosloski/qLpT9/
I want to execute code if "Foo" has been clicked, and a number has been entered in the input.. and if "send" has been clicked.
<h1>Foo</h1>
<input type="text" id="amount" placeholder="Enter in a number."/>
<button id="send">Send</button>
I'm pretty sure I'm overthinking this, I'd appreciate the help on such a concise question.
try this one: jfiddle link
var send = document.getElementById("send");
var h1 = document.getElementsByTagName("h1");
var foo_clicked = 0;
h1[0].onclick = function(){foo_clicked += 1; };
send.onclick = function(){
if(document.getElementById("amount").value !='' && foo_clicked >0 )
alert ('poor rating');
};
As per your statement & taking some assumptions, try this way:
(This executes function twice - When there is a change of text or a click of the button).
HTML:
<h1 id="">Foo</h1>
<input type="text" id="amount" placeholder="Enter in a number."/>
<button id="sendBtn">send</button>
JS:
document.getElementById("amount").addEventListener("change",poorRatingCalculation);
document.getElementById("sendBtn").addEventListener("click",poorRatingCalculation);
function poorRatingCalculation() {
var rating = document.getElementById("amount").value;
if(rating=="poor") alert("Poor Service");
}
DEMO: http://jsfiddle.net/wTqEv/
A better, self contained example:
http://jsfiddle.net/qLpT9/7/
(function()
{
var clicked = false;
var header = document.getElementById("header");
var amount = document.getElementById("amount");
var send = document.getElementById("send");
header.addEventListener("click", function()
{
clicked = true;
});
send.addEventListener("click", function()
{
if(!clicked)
{
return
}
// Foo has been clicked
var value = amount.value;
console.log(value;)
});
})();
Is this what you were looking for?
http://jsfiddle.net/qLpT9/5/
function poorRatingCalculation(){
if(myInput.value) {
alert(myInput.value);
}
}
var foo = document.getElementById("foo"),
myInput = document.getElementById("amount");
foo.addEventListener("click", poorRatingCalculation, false)

disabling form element

I want a button to be disabled when it is clicked. Here is my code:
var disable = function(form_name,btn_name) {
document.form_name.btn_name.disabled = true;
}
This is how disable() is called:
<form name = 'form1'>
<input name = 'btn1' type = 'button' disabled = false onclick = 'disable("form1","btn1")' />
</form>
This code does not work. Does anyone know why?
Because
document.form_name.btn_name.disabled = true;
is the same as doing
document['form_name']['btn_name'].disabled = true;
You need to do
document[form_name][btn_name].disabled = true;
You can't use the dot notation with variable name, You should use the array notation:
var disable = function(form_name,btn_name) {
document[form_name][btn_name]["disabled"] = true;
}
How about just:
onclick = 'this.disabled = true;'
You can just do
<form name='form1'>
<input name='btn1' type='button' disabled='false' onclick='this.disabled = true' />
</form>

Categories