CODEWITHSUNDEEP
javascriptjquery
Pants
Pants

Reputation: 28

Changing what function to call depending on which button is pressed

Okay So I what to have 3 buttons 

<div id="button1" onclick="choose1()">Button1</div>
<div id="button2" onclick="choose2()">Button2</div>
<div id="button3" onclick="choose3()">Button3</div>

And a start button

<div id="startButton" onclick="noFunction()">Start</div>

I want to make it so that pressing on of the 3 option buttons it changes what function will be called from the start button and the background image of the start button should change.

Is there a way to do this with just javascript or do I need jquery? It also doesn't seem possible to use onclick on div tags, jquery to do that aswell?

Upvotes: 0

Views: 215

Answers (5)

j_mcnally
j_mcnally

Reputation: 6968

If you give each selector button a class, you can use javascript to interate them and bind a click event. Then you can store in a data property a key which you can lookup in a json object start stores the related action handler and image. Finally in your click handler you can pull these properties and apply them to the start button by setting the onClick handler and background image of the start button.

<div class="startSelector" data-startdataid="1">Button1</div>
<div class="startSelector" data-startdataid="2">Button2</div>
<div class="startSelector" data-startdataid="3">Button3</div>

<div id="startButton">Start</div>

<script>

  var startData = {
  "1": {
    action: function() {
      alert("Button 1 was selected");
    },
    image: "/images/button1.jpg"
  },"2": {
    action: function() {
      alert("Button 2 was selected");
    },
    image: "/images/button2.jpg"
  },"3": {
    action: function() {
      alert("Button 3 was selected");
    },
    image: "/images/button3.jpg"
  }
}


var changeStartButton = function(e) {
  var startDataIndex = e.target.dataset.startdataid
  var data = startData[startDataIndex]
  document.getElementById("startButton").onclick = data.action
  document.getElementById("startButton").style.backgroundImage = data.image
}

items =  document.getElementsByClassName("startSelector")
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click", changeStartButton);
}
</script>

Example http://jsfiddle.net/Xk8rv/3/

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

jsFiddle

You can use onclick on <div> tags. But you shouldn't use onclick on any tags. Don't confuse your HTML layout and display with your JavaScript functionality. Bind your click handlers directly in the JS code (note that this solution is using jQuery):

HTML:

<div id="button1">Button1</div>
<div id="button2">Button2</div>
<div id="button3">Button3</div>

<div id="startButton">Start</div>

JS:

function choose1() {
    // ...
}
function choose2() {
    // ...   
}
function choose3() {
    // ...  
}
$(function() {
    $("#button1").click(choose1);
    $("#button2").click(choose2);
    $("#button3").click(choose3);    
});

Upvotes: 2

tjons
tjons

Reputation: 4769

jQuery IS javascript. It is just a library of functions/methods that you can call.

To solve your problem, you should write a function that changes the onclick property of your start button, and add the function you write to the onclick of the other buttons.

Like so:

function chooseOne(){
    document.getElementById('startButton').onclick="/\*whatever\*/";
}

A technology like what @nbrooks said in the comments that would do this very well is AngularJS

Upvotes: 0

Thayne
Thayne

Reputation: 6992

You can do it in javascript (anything possible with jQuery is possible with plain javascript, since jQuery is written in javascript).

Changing the click handler for the startButton from javascript is very straightforward:

document.getElementById("startButton").onclick = newFunction;

Changing the background image is also pretty simple:

document.getElementById("startButton").style.backgroundImage = "image.png";

Obviously, you should replace newFunction and "image.png" with the function and image you actually want to use respectively.

Upvotes: 1

j_mcnally
j_mcnally

Reputation: 6968

You can say

function choose1() {
document.getElementById('startButton').onclick = function() {
 alert("Button one was originally press");
}
}

Upvotes: 0

Related Questions