How can I change the text content by clicking on it in HTML / CSS?

Question

How can I change the text content by clicking on it in HTML / CSS?

Navigation

#1 by (3 votes)

2

Well, it turns out that I put a text that says "off" in red, and that when you pass the pointer over it says "turn on" in yellow. However, my question is: what do I do so that when I press the text of "off" it changes to "on" in green color and stays that way until I press again to turn it off? I already tried the process with which the buttons are made but it turns out to be different, also try another hover but it did not work (I do not know how it works). It should be noted that everything goes inside a table:

.contenido .tabla-contenido table {
	position: static;
	margin-top: 30px;
	color: black;
	font-size: 15px;
	border-radius: 8px;
}
.contenido .tabla-contenido table p:before {
	content: "APAGADO";
	color: #c1877a;
}
.contenido .tabla-contenido table p:hover:before {
	content: "ENCENDER";
	color: #f4d742;
	transition: color 0.1s linear 0.1s;
}

		<html>
    <section class="contenido">
    <div class="tabla-contenido">
		<center>
			<table>
				<tr>
					<td>APARATO</td>
					<td>ENCENDIDO/APAGADO</td>
				</tr>
				<tr>
					<td>LAMPARA</td>
					<td><a href="#"><p class="APAGADO"></p></a></td>
				</tr>
				<tr>
					<td>LUCES</td>
					<td><a href="#"><p class="APAGADO"></p></a></td>
				</tr>
				<tr>
					<td>TV</td>
					<td><a href="#"><p class="APAGADO"></p></a></td>
				</tr>
				<tr>
					<td>VENTILADOR</td>
					<td><a href="#"><p class="APAGADO"></p></a></td>
				</tr>
				<tr>
					<td>EQUIPO DE SONIDO</td>
					<td><a href="#"><p class="APAGADO"></p></a></td>
				</tr>
			</table>
		</center>
		</div>
    </section>
    </html>

html css

asked by e2vl13 14.08.2017 в 17:56

source

1 answer

Error inserting data with PDO and POO Do operations on columns in a Dataframe loop

score 3 · Accepted Answer

You can not do this only with CSS. You would need something of Javascript to be able to do the effect you want.

For this case, I added a new class for the paragraphs called pulsado , in which I will add the text ON in green.

The only thing I do is to associate an event for each of the elements with the class APAGADO , in this case, that when you click on any of the elements that have that class, the cambiaLink function is executed.

Finally, within the function, I detect that if the element has the class pulsado at the time of clicking, remove that class, or otherwise, put it on.

Your modified example:

var links = document.getElementsByClassName('APAGADO');
for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click',cambiaLink);
}

function cambiaLink(){
  if(!this.classList.contains("pulsado")){
    this.classList.add("pulsado");
  }else{
    this.classList.remove("pulsado");
  }
    
}

a{
  text-decoration: none;
}

.contenido .tabla-contenido table {
	position: static;
	margin-top: 30px;
	color: black;
	font-size: 15px;
	border-radius: 8px;
}
.contenido .tabla-contenido table p:before {
	content: "APAGADO";
	color: #c1877a;
}
.contenido .tabla-contenido table p:hover:before {
	content: "ENCENDER";
	color: #f4d742;
	transition: color 0.1s linear 0.1s;
}

.contenido .tabla-contenido table p.pulsado:before{
  content: "ENCENDIDO";
  color: #42f462;
}

<html>
    <section class="contenido">
    <div class="tabla-contenido">
	<center>
	   <table>
	      <tr>
		 <td>APARATO</td>
		 <td>ENCENDIDO/APAGADO</td>
	      </tr>
	      <tr>
	         <td>LAMPARA</td>
	         <td><a href="#"><p class="APAGADO"></p></a></td>
	      </tr>
	      <tr>
	         <td>LUCES</td>
	         <td><a href="#"><p class="APAGADO"></p></a></td>
		  </tr>
	      <tr>
	         <td>TV</td>
	         <td><a href="#"><p class="APAGADO"></p></a></td>
              </tr>
	      <tr>
		 <td>VENTILADOR</td>
		 <td><a href="#"><p class="APAGADO"></p></a></td>
	      </tr>
	      <tr>
	         <td>EQUIPO DE SONIDO</td>
		 <td><a href="#"><p class="APAGADO"></p></a></td>
	      </tr>
	   </table>
	</center>
    </div>
    </section>
</html>