Using Javascript to execute 2 functions on button click

Question

I have asked a few questions related to this, and all were answered very well, so im hoping to get some more good answers related.

I have 9 buttons on a page, with text inputs. When a user clicks the one of the buttons, the text that they put into the text input field, is transferred to another text box on that page, but I also want that button to change colors.

So what I have for my html, is this:

<input id="fbvalbox" type="text" placeholder="Your personal message" />
<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />

That is one text box, and a button. So, here is my other box, that I want the message that is entered in that box, to this one.

<input id="design_choice" type="text" value="" />

Now for my javascript, this is my script that transfers the message, to my design choice text box.

window.onload = function(){
    document.getElementById('butval1').onclick = function(){
    document.getElementById('design_choice').value = document.getElementById('fbvalbox').value;   
}

That works great, but I also want the button to change colors.

So, I added the onclick="changeId(this)" to the first box, and it didn't work. this is a seperate .js file, but also in the head of the page.

function changeID(elm){
    var NAME = elm;
    var currentClass = NAME.className;
        if (currentClass == "butz") { 
            NAME.className = "butzz";   
        } else {
            NAME.className = "butz";  }

Now, if I use that alone, it works great, but I want to execute both of these onclick. The first one, I have written out for it to transfer the value by the Id. and the second js, is written to change the css class

I want both to run. Any help is much appreciated.

thank you

You're overwriting the onclick event so only one runs. Instead, put both functions into the anonymous function. — user1508519
– user1508519, Commented Sep 12, 2013 at 2:28

Arun P Johny · Accepted Answer · 2013-09-12 02:31:16Z

2

Since you have used jQuery tag, why don't you use a jQuery solution

<input id="fbvalbox" type="text" placeholder="Your personal message" />
<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" />
<input id="design_choice" type="text" value="" />

then

function changeID(elm) {
    $(elm).toggleClass('butz butzz')
}

jQuery(function($){
    $('#butval1').click(function(){
        $('#design_choice').val($('#fbvalbox').val())
    })
})

jQuery(function($){
    $('#butval1').click(function(){
        changeID(this)
    })
})

Demo: Fiddle

answered Sep 12, 2013 at 2:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

user2759977 Over a year ago

thank you for the demo. It is much help. I since I have 9 boxes, and 9 buttons, would this work just as well? the user would put text in one of the boxes, and below the each box is a button. Would I just duplicate this jquery for all 9 buttons and boxes?

Kiran · Accepted Answer · 2013-09-12 02:37:31Z

1

Try:

function changeID(elm){
    document.getElementById('design_choice').value = document.getElementById('fbvalbox').value;
var NAME = elm;
var currentClass = NAME.className;
    if (currentClass == "butz") { 
        NAME.className = "butzz";   
    } else {
        NAME.className = "butz";  }
}

DEMO FIDDLE

NOTE: change textbox id's based on your requirement. Bu I will suggest to go with jQuery solution as Arun P Johny mentioned.

edited Sep 12, 2013 at 2:37

answered Sep 12, 2013 at 2:31

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Collectives™ on Stack Overflow

Using Javascript to execute 2 functions on button click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related