After receiving great answers to my previous questions, I am in search of more valuable insights.
The challenge at hand involves 9 buttons on a webpage with text inputs. Upon clicking a button, the text entered by the user is supposed to be transferred to another text box while also changing the color of the clicked button.
Here's a snippet of my HTML setup:
<input id="fbvalbox" type="text" placeholder="Your personal message" />
<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
This code represents one text box and a button. The goal is to move the entered message from this box to another designated box.
<input id="design_choice" type="text" value="" />
For the JavaScript part, here's the function responsible for transferring the message:
window.onload = function(){
document.getElementById('butval1').onclick = function(){
document.getElementById('design_choice').value = document.getElementById('fbvalbox').value;
}
While the transfer works flawlessly, the challenge lies in changing the button color upon click. A separate JavaScript file has been included for this purpose but integrating both functionalities has proven to be tricky.
function changeID(elm){
var NAME = elm;
var currentClass = NAME.className;
if (currentClass == "butz") {
NAME.className = "butzz";
} else {
NAME.className = "butz";
}
Although each function operates correctly individually, I seek assistance in executing both actions simultaneously when the button is clicked. Any guidance would be greatly appreciated.
Thank you.