Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Cambiar el aspecto de un botón al pulsarse

JavaScript - Cambiar el aspecto de un botón al pulsarse

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Cambiar el aspecto de un botón al pulsarse

Publicado por Julián (9 intervenciones) el 03/11/2017 02:21:25
Hola qué tal a todos, es mi segundo post en el foro, la última vez me ayudaron excelentemente.
Hoy les vengo a pedir una ayuda, porque buscando en todos los lados y siguiendo cada paso que me dan, no me sale hacer lo que quiero.
Necesito hacer que cuando presione el boton "seguir" con la class '.botonseguir', éste cambie su aspecto. Utilicé varias formas, pero con ninguna pude. Ésta fue la última que utilicé, sacada de w3schools.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function apretado(){//funcion para manejar el boton de seguir en las sugerencias, luego de apretarlo

    var x = document.getElementsByTagName("botonseguir");
    var i;
	for(i = 0; i< x.length; i++){
	if (x.innerHTML=="Seguir") {
	x[i].style.color="white";
	x[i].style.backgroundColor="lightblue";
	x[i].innerHTML="Siguiendo";
		}
else{
		x[i].style.color="lightblue";
		x[i].style.backgroundColor="white";
	x[i].innerHTML="Seguir";
}
}}
Espero que podamos lograrlo, gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar el aspecto de un botón al pulsarse

Publicado por xve (2100 intervenciones) el 03/11/2017 08:13:19
Hola Julián, no me queda muy claro exactamente que quieres hacer... pero haber si te sirve este simple código de ejemplo que cambia el color de un botón al pulsar el ratón y al soltarlo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.botonseguir {background-color:blue;}
</style>
 
<input type="button" class="botonseguir" onmousedown="apretar(this)" onmouseup="soltar(this)">
 
<script>
function apretar(boton)
{
	console.log("L");
	boton.style.backgroundColor="Red";
}
function soltar(boton)
{
	boton.style.backgroundColor="Blue";
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cambiar el aspecto de un botón al pulsarse

Publicado por Julián (9 intervenciones) el 03/11/2017 17:23:21
Hola, primero gracias por responder y te quiero pedir disculpas por no haberme expresado bien.
Me mandaron a hacer en el curso la interfaz de twiter, pero bien básica, con los pocos conocimientos que tenemos. Estoy haciendo la parte derecha, donde hay tres sugerencias de tres usuarios a quién podemos seguir. Cuestión, el divisor derecho que estoy haciendo, tiene tres usuarios para seguir como bien mencioné, y cada uno de ellos, un botón que dice "Seguir".
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="derecha" class="divisor">
	<h2 id="sugerencias">A quien seguir</h2> <span id="actualizar">Actualizar</span>
	<ul>
		<li class="sugerenciasU" id="sug1"></li>
		<h4 id="arrobasug1"></h4>
		<span class="botonseguir" onclick="apretado();">Seguir</span>
		<br>
		<li class="sugerenciasU" id="sug2"></li>
		<h4 id="arrobasug2"></h4>
		<span class="botonseguir" onclick="apretado();">Seguir</span>
		<br>
		<li class="sugerenciasU" id="sug3"></li>
		<h4 id="arrobasug3"></h4>
		<span class="botonseguir" onclick="apretado();"">Seguir</span>
	</ul>



</div>

 <style>

.botonseguir{

	border: 1px solid #5e95a7;

	border-radius: 10px 10px;

	color: #5e95a7;

	padding: 2px;

	padding-left: 1.5rem;

	padding-right: 1.5rem;

	margin-top: 15%;

} </style>
Lo que quiero hacer es que, cuando uno presione el botón seguir, éste cambie su aspecto completamente.
¿Pero cuál es el problema exactamente?
No quiero llamar los tres ID de los tres botones y copiar lo mismo tres veces. Lo que me gustaría hacer es que, al presionar el botón, éste llame a la funcion "apretado();" Y que ésta función tome SOLAMENTE la class "botonseguir" y edite los tres botones de una. Éste es mi código, que no tira ningún error en la consola, pero no funciona.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function apretado(){//funcion para manejar el boton de seguir en las sugerencias, luego de apretarlo

    var x = document.getElementsByTagName("botonseguir");
    var i;
	for(i = 0; i< x.length; i++){
	if (x.innerHTML=="Seguir") {
	x[i].style.color="white";
	x[i].style.backgroundColor="lightblue";
	x[i].innerHTML="Siguiendo";
		}
else{
		x[i].style.color="lightblue";
		x[i].style.backgroundColor="white";
	x[i].innerHTML="Seguir";
}
}
}
Te mando un saludo y espero con ansias tu ayuda!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Cambiar el aspecto de un botón al pulsarse

Publicado por Julián (9 intervenciones) el 03/11/2017 17:47:12
PIDO DISCULPAS POR HACER DOBLE POST, NO SE SI EN EL FORO TE LO ACEPTAN O NO.
TE PIDO PERDÓN A VOS, TU CÓDIGO SÍ FUNCIONA, LO COPIE MAL Y NO ME SALÍA. PERO SÍ FUNCIONA. TE AGRADEZCO.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar