Estoy creando un programa que cuando el usuario digite un color sobre los campos de texto, debe darle click al botón "Mostrar Resultados" automáticamente en los botones de arriba, se agregan esos colores a cada botón asignado en los formularios, y al darle click a cualquier botón, el background cambia dependiendo del color asignado.
pero al hacer todos esos pasos, los botones al darles click, se reinicia el proceso desde 0 y hay que iniciar de nuevo.
que podría hacer o cambiar para poder mantener los datos de cada botón y no vuelva a su valor de inicio.*
function form_get(){
data = {
value1: forms.form_01.value, // FORMULA: form:name + input:name + value
value2: forms.form_02.value,
value3: forms.form_03.value,
}
/*
console.log(data.value1); // valor digitado por user en form 01
console.log(data.value2); // valor digitado por user en form 02
console.log(data.value3); // valor digitado por user en form 03*/
document.getElementById('a_hiper').onclick = function(){
// call btn_1
var call01 = document.getElementById('btn_1');
call01.innerText = data.value1;
// call01.innerText = forms.form_01.value;
document.getElementById('btn_1').onclick = function(){
document.body.style.background = data.value1;
}
// call btn_2
var call02 = document.getElementById('btn_2');
call02.innerText = data.value2;
document.getElementById('btn_2').onclick = function(){
document.body.style.background = data.value2;
}
// call btn_3
var call03 = document.getElementById('btn_3');
call03.innerText = data.value3;
document.getElementById('btn_3').onclick = function(){
document.body.style.background = data.value3;
}
}
}
<!-- Start Forms -->
<form name="forms" id="forms_buttons">
<!-- <label for="form_one"> -->
<!-- forms -->
<input type="text" name="form_01" value="">
<input type="text" name="form_02" value="">
<input type="text" name="form_03" value=""><br>
<!-- buttons -->
<button id="btn_1">1</button>
<button id="btn_2">2</button>
<button id="btn_3">3</button>
</form>
<button id="a_hiper" onclick="javascript:form_get()">Mostrar Resultados</a>