-2
<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&aacute;rrafo # 1</p>
  <p>P&aacute;rrafo # 1</p>
  <p>P&aacute;rrafo # 1</p>
  <p>P&aacute;rrafo # 1</p>
<form>
<p>
<label>entre el P&aacute;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>
1
  • 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

1 respuesta 1

1

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>

8
  • 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.Rocha
    Commented el 12 sept. 2017 a las 19:19
  • Fíjate ahora si te sirve. Commented el 12 sept. 2017 a las 19:36
  • @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
  • Esto es igual para Jquery?
    – V.Rocha
    Commented el 12 sept. 2017 a las 19:53
  • 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

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