Dado un documento HTML y la tarea es cambiar el texto de una etiqueta usando JavaScript.
¿Qué es una etiqueta?
La etiqueta <label> se usa para proporcionar una mejora de usabilidad para los usuarios de mouse, es decir, si un usuario hace clic en el texto dentro del elemento <label>, cambia el control.
Acercarse:
- Cree un elemento de etiqueta y asigne una identificación a ese elemento.
- Defina un botón que se utiliza para llamar a una función. Actúa como un interruptor para cambiar el texto en el elemento de la etiqueta.
- Defina una función javaScript , que actualizará el texto de la etiqueta.
- Utilice la propiedad innerHTML para cambiar el texto dentro de la etiqueta. La propiedad innerHTML establece o devuelve el contenido HTML de un elemento.
Ejemplo 1: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE html>
<html>
<head>
<title>
How to change the text of
a label using JavaScript ?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>
Click on the button to change
the text of a label
</h4>
<label id = "GFG">
Welcome to GeeksforGeeks
</label>
<br>
<button onclick="myGeeks()">
Click Here!
</button>
<script>
function myGeeks() {
document.getElementById('GFG').innerHTML
= 'A computer science portal for geeks';
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo cambia el texto de una etiqueta usando JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
How to change the text of
a label using JavaScript ?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>
Click on the button to change
the text of a label
</h4>
<label id = "GFG">
Welcome to GeeksforGeeks
</label>
<br>
<button onclick="myGeeks()">
Click Here!
</button>
<script>
function myGeeks() {
var x = document.getElementById("GFG");
if (x.innerHTML === "Welcome to GeeksforGeeks") {
x.innerHTML = "A computer science portal for geeks";
} else {
x.innerHTML = "Welcome to GeeksforGeeks";
}
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .