<html>
<head>
<title>
Laboratorio 1
</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="insertar.js" type="text/javascript"></script>
<style type="text/css">
.rojo{
color: red;
}
</style>
</head>
<body>
<p>Párrafo # 1</p>
<p>Párrafo # 1</p>
<p>Párrafo # 1</p>
<p>Párrafo # 1</p>
<form>
<p>
<label>entre el Párrafo a modificar: (Valores entre 1 y 4)</label><br>
<input id="parrafo" type="text" value="#..."><br>
<div id=mensaje-error></div>
</p>
<button id="aceptar" type="button"></button>
</form>
</body>
</table>
-
Mira esta guia para que tu pregunta sea mejor recibida. Tambien, aprovecha y haz el tour para entender mejor como funcionamos y de paso obtener tu primera medalla!– gbianchi ♦Commented el 12 sept. 2017 a las 19:39
Añade un comentario
|
1 respuesta
Bueno, tu pregunta no está muy clara. Pero estimo que tienes un párrafo html y un campo de texto con un botón en donde dependiendo que número se ingrese toma tal color el texto del mismo. Podrías hacerlo de la siguiente forma:
EDITADO
function cambiarColor() {
var parrafoSeleccionado = document.getElementById("parrafo-seleccionado").value;
var parrafo1 = document.getElementById("parrafo1");
var parrafo2 = document.getElementById("parrafo2");
var parrafo3 = document.getElementById("parrafo3");
var parrafo4 = document.getElementById("parrafo4");
if (parrafoSeleccionado < 1 || parrafoSeleccionado > 4) {
alert("Debe ingresar un valor entre 1 y 4");
} else {
switch (parrafoSeleccionado) {
case "1":
parrafo1.style.color = "red";
parrafo2.style.color = "black";
parrafo3.style.color = "black";
parrafo4.style.color = "black";
break;
case "2":
parrafo2.style.color = "red";
parrafo1.style.color = "black";
parrafo3.style.color = "black";
parrafo4.style.color = "black";
break;
case "3":
parrafo3.style.color = "red";
parrafo1.style.color = "black";
parrafo2.style.color = "black";
parrafo4.style.color = "black";
break;
case "4":
parrafo4.style.color = "red";
parrafo1.style.color = "black";
parrafo2.style.color = "black";
parrafo3.style.color = "black";
break;
}
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="parrafo1">Texto del párrafo 1</p>
<p id="parrafo2">Texto del párrafo 2</p>
<p id="parrafo3">Texto del párrafo 3</p>
<p id="parrafo4">Texto del párrafo 4</p>
<input type="number" id="parrafo-seleccionado" value="" min="1" max="4">
<button onclick="cambiarColor()">Cambiar Color</button>
</body>
</html>
-
Perdon si no plantee bien la pregunta, en efecto se trata de cambiar el color pero son 4 parrafos y si por ejemplo se ingresa el 1 se cambia a rojo el parrafo numero 1, ademas que sebe poder ingresar solo numeros y deben ser entre el 1 y el 4 de no ser el caso debe salir un error.– V.RochaCommented el 12 sept. 2017 a las 19:19
-
-
@V.Rocha por favor agrega toda esa informacion a la pregunta. usa el boton editar de bajo de ella para hacerlo. Todo eso es lo que tendrias que haber explicado de entrada ;)– gbianchi ♦Commented el 12 sept. 2017 a las 19:39
-
-
Si vas a utilizar Jquery deberías cambiar todos los document.getElementById("parrafo").value; por $('#parrafo).val(); y parrafo.style.color = 'red' por $('#parrafo').css('color', 'red'); Commented el 12 sept. 2017 a las 20:00