Develop Reference

How to best define multiple variables?

First off I would like to say that I programmed a LONG time ago at school but I had alot of trouble getting into programming cause of ADD, so now I'm just 'trying' stuff at my own tempo with no pressure so I can pace it reall slow, but that does mean I'm a complete beginner, I know only snippets of some languages.
Now onto the problem, what I want to do eventually is change text color through a button click, so if I click a button with the label blue I want the text to turn blue and same with red etc.
So what I have is 2 buttons,
<button type="button" id="redButton" onclick="changeText()" value="red">Red</button>
<button type="button" id="blueButton" onclick="changeText()" value="blue">Blue</button>
Now in my javascript file I have the following:
var rButton = document.getElementById("redButton");
var bButton = document.getElementById("blueButton");
And I can alert both var with their value and it shows the value.
What I can't seem to figure is how to perhaps put rButton & bButton in a new var like
var cButton = [rButton, bButton];
Or something along those lines. Cause I can put cButton into an if statement right now and say this like:
if(cButton = document.getElementById("redButton"))
{
alert("Hello!");
}
else if(cButton = document.getElementById("blueButton"))
{
alert("Hello hello");
}
else
{
alert("Error!");
}
But that will only show Hello! and not Hello Hello even though I do press my blue button.
It's probably something realy stupid but I can't figure it out, and I haven't found much on google that I tried that worked.
Also yes changeText() is the function name which is where all this stuff is in.

If checking the colour is what you want to do, you can do it easily by simply passing the colour to the function as a parameter like this.
<button type="button" id="redButton" onclick="changeText('red')" value="red">Red</button>
<button type="button" id="blueButton" onclick="changeText('blue')" value="blue">Blue</button>
And then in in your javascript change your function to something like this.
function changeText(col){
if(col == "red")
{
alert("Hello!");
}
else if(col == "blue")
{
alert("Hello hello");
}
else
{
alert("Error!");
}
}
Also when you want to compare two values use == (comparison), when you use = (assignment) it will assign the value.

No need to get a reference to two different buttons. Instead, you can pass the color in the function call itself.
var textRef = document.getElementById("text");
function changeText(newColor){
console.log(textRef)
textRef.style.color = newColor;
}
<button type="button" onclick="changeText('red')" value="red">Red</button>
<button type="button" onclick="changeText('blue')" value="blue">Blue</button>
<p id="text">I am the text!!</p>

Try this
let cButton = document.querySelectorAll('.btn');
cButton.forEach(element => {
if (element.id === 'redButton') {
alert('Hello');
} else if (element.id === 'blueButton') {
alert('Hello Hello');
} else {
alert('Error');
}
})
Concerning what you said here
But that will only show Hello! and not Hello Hello even though I do press my blue button.
You can add an event listener like this :
cButton.forEach(element => {
element.addEventListener('click', (e) => {
if (e.target.id === 'redButton') {
alert('Hello');
} else if (e.target.id === 'blueButton') {
alert('Hello Hello');
} else {
alert('Error');
}
})
})
Note: That you have to add class="btn" in each button

Switch value for clicked button from group of buttons in jquery

I'm trying to make a website using asp.net mvc 4 & jQuery 1.9.1 where I want to insert boolean values (Y or N) in textbox for the corresponding button pressed. It works for a single button, but it's not working for group of buttons. Here are my codes,
$(document).ready(function () {
var isClicked = 0;
$('.btn').click(function () {
if (isClicked == 0) {
isClicked = 1;
$(this).toggleClass('color-blue color-green');
$(this).next('.assignCheck').val('Y');
} else if (isClicked == 1) {
isClicked = 0;
$(this).toggleClass('color-green color-blue');
$(this).next('.assignCheck').val('N');
}
});
});
JSFiddle Demo
How can I make the buttons work individually? Need this help badly. Thanks.

uYou can use data- attributes with button to store if its click value is 1 or zero and use that value to update the respective textbox
Live Demo
Html
<button class="btn color-blue" data-clicked="0">ONE</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">TWO</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">THREE</button>
<input type="text" class="assignCheck" />
JQuery
$(document).ready(function () {
$('.btn').click(function () {
var isClicked = $(this).data("clicked");
if (isClicked == 0) {
isClicked = 1;
$(this).toggleClass('color-blue color-green');
$(this).next('.assignCheck').val('Y');
} else if (isClicked == 1) {
isClicked = 0;
$(this).toggleClass('color-green color-blue');
$(this).next('.assignCheck').val('N');
}
$(this).data("clicked", isClicked);
});
})

How to output message when 2 buttons have been pressed consecutively

Hi im new to javascript and messing about with it.
How can i (if possible) show an output when 2 buttons have been pressed one after the other?
Example: click button 1, click button 2, message shows "button 1 and 2 has been clicked"

use an && operator in an if statement.
Javascript:
var button1 = false;
var button2 = false;
var b1_id = document.getElementById('button1');
var b2_id = document.getElementById('button2');
b1_id.addEventListener('click',click1,false);
function click1() {
alert("Button1 clicked");
button1 = true;
check();
}
b2_id.addEventListener('click',click2,false);
function click2() {
alert("Button2 clicked");
if (button1 !== false) button2 = true; //this is to make sure they are clicked consecutivley
check();
}
function check() {
if (button1 === true && button2 === true) {
alert("Button1 and Button2 clicked consecutively");
}
}
HTML:
<input type='button' id='button1' value='button1' />
<input type='button' id='button2' value='button2' />
​jsFiddle

<p id="status"></p>
<button id="btn1" onclick="clickfun(this);">button 1</button>
<button id="btn2" onclick="clickfun(this);">button 2</button>
<script>
clickfun(elm){
var currenthtml = document.getElementById('status').innerHTML;
document.getElementById('status').innerHTML = currenthtml += this.id+' clicked !';
}
</script>

I actually just wrote a library devoted to the mouse object. One thing it does it tracking what buttons are pressed, and follows DOM3 spec mostly.
https://github.com/Benvie/Mouse
Boiled down to minimum, you must continually track the muse to now if the browser does not provide the "buttons" property, which only Firefox 15 does so far. Specially, mousedown to start, then click and contextmenu to end.
The key bits for tracking buttons are
var buttons = 0;
function down(e){ buttons |= 1 << e.button; }
function up(e){ buttons &= ~(1 << e.button); }
window.addEventListener('click', up);
window.addEventListener('contextmenu', up);
window.addEventListener('mousedown', down);

javascript button show/hide on text changed

I want to show and hide a button by using java script.
My problem is that the button should be hide on page load and when I changed the text in text box then button should be show.
thanks.....

pls, Check this page and tell if this is what you wanted.
Basically, you need to use onchange event to do whatever you want to do.
<html>
<head>
<script>
window.onload=function(){
document.getElementById("button").style.display='none';
}
function showButton(){
document.getElementById("button").style.display='block';
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
Change the text in Input Box. Then Button will be show<br/><br/>
<input type="text" id="userText" value="Change the text" onchange="showButton()"/>
</body>
</html>

Try with jQuery:
$("#yourInput").bind("change", function() {
var value = $(this).val();
if (value && value.length > 0) {
// Exist text in your input
$("#yourButton").show();
} else {
$("#yourButton").hide();
}
});
For non-jQuery:
function onchangeInput() {
var value = this.value;
if (value && value.length > 0) {
// Exist text in your input
document.getElementById("yourButton").style.visibility = "visible";
} else {
document.getElementById("yourButton").style.visibility = "hidden";
}
}
window.onload = function() {
document.getElementById("yourButton").style.visibility = "hidden";
var el = document.getElementById("yourInput");
if (el.addEventListener) {
el.addEventListener("change", onchangeInput, false);
} else {
el.attachEvent('onchange', onchangeInput);
}
}
Again, don't show/hide a button, just disable it, that make the best user experience.

You could style the css to visibilty:hidden then in javascript add an event listner like this:
<script type="text/javascript">
var box = document.getElementById('box');
var textbox = document.getElementById('textbox');
textbox.addEventListener("focus",showbox,false);
function showbox() {
box.style.visibility = 'visible';
}
That would make it appear on focus but if you wanted to take it a step further you could add another event listener for a keystroke when the textbox is focused on. That would probably work.

This is to hide/show a div based on text changed in text box.
With JQuery
<script type="text/javascript">
window.onload = function () {
document.getElementById("submitdiv").style.display = 'none';
}
$(function () {
$('.Name').on('keyup change', function () {
if (this.value.length > 0) {
$('#submitdiv').show();
} else {
$('#submitdiv').hide();
}
});
});
</script>
HTML
<%:Html.TextBoxFor(m => m.FirstName, new { #class ="Name"}) %>
<div id="submitdiv">
<button type="submit" value="Submit" class="btn btn-primary pull-right value-set" id="btnLogin">Submit</button>
</div>

Try this:
<script>
function
changeButton() {
document.getElementById("changeButton").innerHTML = "Insert text for button";
document.getElementById("changeButton").removeAttribute("hidden");
}
</script>
<button hidden id="changeButton"></button>

Lock tab key with javascript?

How to lock or disable and again the tab key with javascript?

$(document).keydown(function(objEvent) {
if (objEvent.keyCode == 9) { //tab pressed
objEvent.preventDefault(); // stops its action
}
})

You can do it like this:
$(":input, a").attr("tabindex", "-1");
That will disable getting focus with tab in all links and form elements.
Hope this helps

Expanding on Naftali aka Neal's answer, here's how you'd do it with vanilla JS and both start and stop Tab behavior buttons:
let stopTabFunction = function(e) {
if (e.keyCode == 9) {
e.preventDefault();
}
};
document.getElementById('stopTabButton').onclick = function() {
document.addEventListener('keydown', stopTabFunction);
};
document.getElementById('resumeTabButton').onclick = function() {
document.removeEventListener('keydown', stopTabFunction);
};
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<br/><br/>
<input type="button" id="stopTabButton" value="Stop Tab!"/>
<input type="button" id="resumeTabButton" value="Resume Tab!"/>
Note that this also works for Shift + Tab (reverse direction).
JSFiddle
However, in my case, I wanted slightly different behavior: I wanted to basically lock down Tab focus to a single div. To do this, I placed a div before and after it, gave them both tabindex="0" (document-defined tab order on the div's themselves), to make the outer edges of the div focusable, like so:
<div id="beforeMyDiv"></div>
<div id="myDiv">
<!-- Only want Tab indexing to occur in here! -->
</div>
<div id="afterMyDiv"></div>
Then, I changed the function from earlier to this:
//Get the div's into variables etc.
//...
let forceTabFocusFunction = function (e) {
if (e.keyCode == 9) {
//Force focus onto the div.
if (!myDiv.contains(document.activeElement)) {
if (e.shiftKey) {
afterMyDiv.focus();
} else {
beforeMyDiv.focus();
}
}
}
};
That did the trick nicely.

On Neal answer, I'd only add:
if (objEvent.keyCode == 9) { //tab pressed
return;
}
Because when you finish typing CPF and press TAB, it counts as a character and changes to CNPJ mask.
Complete code:
<script type="text/javascript">
$(document).ready(function() {
$("#cpfcnpj").keydown(function(objEvent){
if (objEvent.keyCode == 9) { //tab pressed
return;
}
try {
$("#cpfcnpj").unmask();
} catch (e) {}
var size= $("#cpfcnpj").val().length;
if(size < 11){
$("#cpfcnpj").mask("999.999.999-99");
} else {
$("#cpfcnpj").mask("99.999.999/9999-99");
}
});
});
</script>