Multiple JavaScript Buttons (Variables)

Question

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>

ajax333221 · Accepted Answer · 2012-04-12 02:41:59Z

1

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

edited Apr 12, 2012 at 2:41

answered Apr 12, 2012 at 2:36

ajax333221

11.9k16 gold badges64 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1327904 Over a year ago

Yeah that's exactly what I meant. Thanks!

ajax333221 Over a year ago

@KeybordPiano459 you welcome. If you think this helped you, consider marking this answer as the accepted one

Daniel J. Pritchett · Accepted Answer · 2012-04-12 02:31:34Z

0

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.

edited Apr 12, 2012 at 2:31

answered Apr 12, 2012 at 2:27

Daniel J. Pritchett

1,05111 silver badges18 bronze badges

2 Comments

user1327904 Over a year ago

This doesn't really work. Is there a way to put in another button that follows the first button's format? I need both buttons to be prompts where you enter in a name, and when I tried function alert_'name'() it didn't work.

Daniel J. Pritchett Over a year ago

Sure. function hey_you() { var user_name = prompt("Hi there! What's your name?"); alert("Hello, " user_name); };

ahruss · Accepted Answer · 2012-04-12 02:29:48Z

0

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>

answered Apr 12, 2012 at 2:29

ahruss

2,16017 silver badges21 bronze badges

Comments

rlemon · Accepted Answer · 2012-04-12 02:33:52Z

0

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" />

answered Apr 12, 2012 at 2:33

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

Collectives™ on Stack Overflow

Multiple JavaScript Buttons (Variables)

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related