0
  • 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>
	

1 respuesta 1

0

que podría hacer o cambiar para poder mantener los datos de cada botón y no vuelva a su valor de inicio.*

Lo que te está pasando es una redirección, esto ocurre cuando no le asignas el atributo type a los botones dentro de un <form>, así que por defecto toman el valor de type="submit".

Simplemente, asigna cada <button> que no quieres que redireccione el atributo type de la siguiente manera:

<button type="button" id="btn_1">1</button>
<button type="button" id="btn_2">2</button>
<button type="button" id="btn_3">3</button>

	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 type="button" id="btn_1">1</button>
		<button type="button" id="btn_2">2</button>
		<button type="button" id="btn_3">3</button>

	</form>

	<button id="a_hiper" onclick="javascript:form_get()">Mostrar Resultados</a>
	

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.