Использование Javascript для выполнения 2 функций при нажатии кнопки

Question

Я задал несколько вопросов, связанных с этим, и все были очень хорошо ответины, поэтому я надеялся получить более хорошие ответы.

У меня есть 9 кнопок на странице с текстовыми вводами. Когда пользователь нажимает одну из кнопок, текст, который они помещают в текстовое поле ввода, переносится в другое текстовое поле на этой странице, но я также хочу, чтобы эта кнопка меняла цвета.

Так что у меня есть для моего HTML, заключается в следующем:

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

Это один текстовое поле и кнопка. Итак, вот моя другая коробка, что я хочу, чтобы сообщение было введено в этом поле, к этому.

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

Теперь для моего javascript, это мой сценарий, который передает сообщение в текстовое поле выбора дизайна.

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

Это отлично работает, но я также хочу, чтобы кнопка меняла цвета.

Итак, я добавил onclick = "changeId (this)" в первый квадрат, и это не сработало. это отдельный файл .js, но также и в начале страницы.

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

Теперь, если я использую это в одиночку, он отлично работает, но я хочу выполнить оба этих onclick. Первый, я написал для него, чтобы передать значение с помощью идентификатора. и второй js записывается для изменения класса css

Я хочу, чтобы оба запускались. Буду признателен за любую оказанную помощь.

спасибо

Answer 1

Поскольку вы использовали JQuery тег, почему бы вам не использовать решение JQuery

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

затем

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

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

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

Демо: Fiddle

Answer 2

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

Примечание: изменение текстового поля идентификаторов на основе ваших требований. Бу, я предлагаю пойти с решением jQuery, как упоминал Арун П. Джонни.