We Keep Coding

Switch to different button on click

I want code to switch the buttons. If I pressed button1 first time, it must show button2 and vice versa.
<input type="submit" value="asc" name="button1" id="but1">
<input type="submit" value="desc" name="button2" id="but3">

One solution without the need for JQuery would be this one:
<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.display='';this.style.display='none';">
<input type="button" value="desc" name="button2" id="but3" style="display:none;" onClick="document.getElementById('but1').style.display='';this.style.display='none';">
You can also do it this way if you want to use the visibility:
<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.visibility='visible';this.style.visibility='hidden';">
<input type="button" value="desc" name="button2" id="but3" style="visibility:hidden;" onClick="document.getElementById('but1').style.visibility='visible';this.style.visibility='hidden';">
Using visibility preserves the buttons position. I changed the type from submit to button just out of demonstration reasons.
You can look at both JSFIDDLE demos of these solutions here and here.

Not sure what you're trying to achieve, but you can use:
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});
Fiddle Demo

Simply Use .toggle() in jQuery
$('input[type="submit"]').click(function() {
$('input[type="submit"]').toggle();
});
Fiddle

I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch
$(this).find('.radio-switch-slider')

document.getElementById('but1').addEventListener('click', function() {
document.getElementById('but1').style.visibility = 'hidden';
document.getElementById('but3').style.visibility = 'visible'; }, false);
document.getElementById('but3').addEventListener('click', function() {
document.getElementById('but3').style.visibility = 'hidden';
document.getElementById('but1').style.visibility = 'visible'; }, false);
If you want to hide button and its placeholder completely, use style.display = 'none' and style.display = 'block'. If you put both buttons in div container with default static positioning, then both buttons will appear at the same position in container.

By default when page will load put following code so that your second button will be hide.
$(document).ready(function(e){
$('#but3').hide();
});
After that Put code that were
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});

Try using the following functions:
$(element)click(callback) will handle the click of the element
$(element).show() will show the element
$(element).hide() will hide the element
so a semple code is:
//first hidden the second button
$('#but3').css('display','none')
// handle click of first button
$('#but1').click(function(){
$(this).hide()
$('#but3').show()
});
// handle click of second button
$('#but3').click(function(){
$(this).hide()
$('#but1').show()
});
Here is an example: http://jsfiddle.net/L7zux/1/

You can try the code below:
$('input[type="submit"]').click(function(){
var valueOfButton = $(this).val();
if(valueOfButton == 'asc')
{
$('input[value="asc"]').show();
$('input[value="desc"]').hide();
}
else
{
$('input[value="desc"]').show();
$('input[value="asc"]').hide();
}
});

I need to make all buttons disappear when one is clicked

Im writing a game of sorts that presents you with multiple options. Once you choose your option, all buttons, including your selection, should disappear and you move on to the next round. I have a script that allows this to be done, however for each round of buttons I would have to rewrite it to adhere to the new set of buttons. To save from having to repeat myself each time, I'm trying to get a universal script that will accomplish this
HTML
<input type="button" class="btn" id="getUp" name="answer" value="get up" onclick="this.style.display='none'; hideSleepIn(); " />
<input type="button" class="btn" id="sleepIn" name="answer" value="sleep in" onclick="this.style.display='none'; hideGetUp();" />
JavaScript
var hidden = false;
var click = onClick;
function hideSleepIn()
{
hidden = !hidden;
if(getUp === click)
{
document.getElementById('getUp').style.visibility = 'visible';
}
else
{
document.getElementById('sleepIn').style.visibility = 'hidden';
}
}

Try replacing
document.getElementById('getUp').style.visibility = 'visible';
with this
document.getElementById("getUp").style.display = 'none';

I worked the current script I was using to hide the divs, to also hide/ show the buttons on the page
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
<input type="button" class="unhidden" id="firstPath" value="get up" onclick="unhide('getUpText'); unhide('firstPath2'); unhide('firstPath');" />
text
<input type="button" class="unhidden" id="firstPath2" value="sleep in" onclick="unhide('sleepInText'); unhide('firstPath'); unhide('firstPath2');" />
text

how to find the last dynamic button clicked

I have created a dynamic buttons each button is the same:
<input type="button" id="editBtn" value="Edit" style="float: right" />//each button has its id ofcourse
When one button is pressed it shows a table.
I am looking for a way to 'click last button'/'hide the table' if an other button on page is clicked.
Using Jquery, is it possible ? or is there a better way to do it?

If u want to display content using button(hide/show)
You can accomplish this using jquery toogle function
$(document).ready(function()
{
$("#button").click(function()
{
$("#table").toggle();
});
});
link to fiddle

Simply hide all siblings of the selected table...
So for example, if you have (Pseudo code)
<input type="button" id="editBtn1" value="Edit" onclick="showTable(1)" />
<input type="button" id="editBtn2" value="Edit" onclick="showTable(2)" />
<input type="button" id="editBtn3" value="Edit" onclick="showTable(3)" />
<table id="table1">...</table>
<table id="table2">...</table>
<table id="table3">...</table>
JS would be :
function showTable(tableid) {
$("#table" + tableid).show().siblings().hide();
}
But of course, this is all very hard coded & hence an avoidable practice.
Or as discussed in comments :
function showTable() {
var tableId = $(this).index();
$("table").hide().eq(tableId).show();
}

I think this is what you want: http://jsfiddle.net/BY27P/9/
This will remember the tables you have viewed and let you view all previous ones using basic JavaScript array push/pop.
Here is the JavaScript (view fiddle for full code):
var viewedTableHistory = [];
hideAllTables=function(){
$('table[id^="table"]').hide(); //hide all tables
}
loadTable=function(id){
viewedTableHistory.push(id);
$('#history').text(viewedTableHistory);
hideAllTables();
showCurrentTable();
};
hideCurrentTable=function()
{
$('#table'+viewedTableHistory[viewedTableHistory.length-1]).hide();
};
showCurrentTable=function()
{
$('#table'+viewedTableHistory[viewedTableHistory.length-1]).show();
};
viewPrevTable=function()
{
hideAllTables();
viewedTableHistory.pop();
$('#history').text(viewedTableHistory);
if(viewedTableHistory.length===0) alert('You are back to the beginning.');
showCurrentTable();
};

I think I solved your problem try this fiddle ...
See output on below fiddle
Js fiddle
Style:
.tbl{
display:none;
}
Jquery:
$(".btn").click(function(){
var $this = $(this).next("table");
$( this ).next("table").removeClass("tbl");
$(".btn").next("table").not($this).addClass("tbl");
});
Html:
<div class="tble">
<input type="button" value="Button1" class="btn"/>
<table class="tbl"><tr><td>test1</td></tr></table>
</div>
<div class="tble">
<input type="button" value="Button2" class="btn" />
<table class="tbl"><tr><td>test2</td></tr></table>
</div>

Execute javascript function in chain of button clicks

On my original post I wasn't for sure on the amount of depth I should go to. Here is what I have been working on since the jQuery answer was posted:
I am attempting to execute a task which requires the user to choose and click one html button out of a series of buttons and then be required to choose another html button out of a series of buttons.
Essentially I would like the value of the first button selection to be passed as a parameter to a function that will run when the user clicks the second button. I'm just learning javascript and I'm lost.
Thank you
HTML:
<form id="scoreboard">
<div>
<input type="text" name="homeTeam" value="00" size="2" "readonly" id="homeTeamScore"/>
<input type="button" value="+1" name="add1" id="homeAdd1" class="homeScore" onClick="calcScore(1)"/>
<input type="button" value="-1" name="neg1" id="homeNeg1" class="homeScore" onClick="calcScore(4)"/>
</div>
<div>
<input type="button" name="homeP1" id="homeP1" class="player" value="24" style="text-align:center;"/>
<input type="text" name="homeP1Score" value="0" size="2" style="text-align:center;"/>
</div>
<div>
<input type="button" name="homeP2" id="homeP2" class="player" value="44" style="text-align:center;"/>
<input type="text" name="homeP2Score" value="0" size="2" style="text-align:center;"/>
</div>
</form>
Javascript:
function calcScore(amount) {
if(amount==1) {scoreboard.homeP1Score.value++;scoreboard.homeTeam.value++;}
else if(amount==4) {scoreboard.homeP1Score.value--;scoreboard.homeTeam.value--;}
}
$('.player').click(function() {
//initialize the second button listener
var data = $(this).attr('data');
$('.homeScore').click(function() {
function addHomeScore(data)
});
});

Using jQuery:
$('#buttonId').click(function() {
//initialize the second button listener
var data = $(this).attr('data');
$('#button2Id').click(function() {
yourFunction(data);
});
});
This method is better because it uses JavaScript scoping to avoid globals. Since JavaScript (especially with jQuery) sometimes has multiple threads/functions executing at the same time, it's very easy to run into problems with globals. They're also very hard to test and unsafe.

In raw JavaScript:
HTML:
<button class="button1" onclick="saveValue()" />
<button class="button2" onclick="callMethod()" />
JavaScript:
myGlobalVariable = null;
function saveValue(){
myGlobalVariable = "Value That Was Selected";
}
function callMethod(){
alert(myGlobalVariable + "I HAZ ACCESS TO GLOBALS!!!!");
}
In jQuery:
HTML:
<button class="button1" />
<button class="button2" />
JavaScript:
myGlobalVariable = null;
$('button.button1').click(function(){
myGlobalVariable = "Value That Was Selected";
});
$('button.button2').click(function(){
alert(myGlobalVariable + "I HAZ ACCESS TO GLOBALS!!!!");
});

setup some global variable in js. then on each button setup some onClick events that go and change the global var. then the next button click can check to see the value in the global var
<button onclick="myFunction()">Click me</button>

Multiple JavaScript Buttons (Variables)

I'm just beginning JavaScript, and I was wondering how to make different buttons do different things. So far, I can make one button do one thing, but how do I make a second button do a different thing? Here's the coding:
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Your Name");
if (name!=null && name!="")
{
alert("Thanks for clicking " + name + "!");
window.top.location.replace("http://www.google.com");
}
}
</script>
</head>
<body>
<ul>
<li>
<input type="button" onclick="show_prompt()" value="Button One" />
</ul>
</body>
</html>

I will guess you meant like doing different things with different buttons but from the same function:
JavaScript:
function myFunction(str) {
if(str.length > 3){
alert("big");
}else{
alert("small");
}
}
HTML:
<input type="button" onclick="myFunction('test');" value="Button 1" />
<input type="button" onclick="myFunction('hi');" value="Button 2" />
In case my assumption is wrong, just create different functions and replace the button's onclick with their respective function

Define another function and bind the second button to it!
function alert_hi() {
alert("Hi!");
}
<input type="button" onclick="alert_hi()" value="Button Two" />
If that catches your interest I highly recommend Eloquent Javascript.

Making the second button do something is basically identical to making the first do something. It'd just be two functions and two buttons. I think this is what you're asking about.
<html>
<head>
<script type="text/javascript">
function doSomething()
{
// Do something when button one is clicked
}
function doSomethingElse()
{
// Do something else when button two is clicked
}
</script>
</head>
<body>
<input type="button" onclick="doSomething()" value="Button One" />
<input type="button" onclick="doSomethingElse()" value="Button Two" />
</body>
</html>

If you're serious about learning.. you can read up about Event Registration models.
in the case of your example.
js
var btn1 = document.getElementById('btn1'),
btn2 = document.getElementById('btn2');
btn1.addEventListener('click', show_me, false); // i am not IE friendly
btn2.addEventListener('click', show_me, false); // you can replace show_me with any function you would like.
function show_me() {
alert(this.value + ' was clicked'); // this references the element which the click event was invoked on.
}
html
<input type="button" id="btn1" value="Button One" />
<input type="button" id="btn2" value="Button Two" />