CODEWITHSUNDEEP
javascripthtml
user1327904
user1327904

Reputation:

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>

Upvotes: 1

Views: 19528

Answers (4)

ajax333221
ajax333221

Reputation: 11764

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

Upvotes: 1

rlemon
rlemon

Reputation: 17666

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

Upvotes: 0

Daniel J. Pritchett
Daniel J. Pritchett

Reputation: 1051

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.

Upvotes: 0

ahruss
ahruss

Reputation: 2130

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>

Upvotes: 0

Related Questions