using JavaScript and jQuery in html I need to change color a paragraph according to the number entered [closed]

Question

using JavaScript and jQuery in html I need to change color a paragraph according to the number entered [closed]

Navigation

#1 by (1 votes)

-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>

javascript

asked by V.Rocha 12.09.2017 в 20:55

source

1 answer

add rows, columns and diagnoales [closed] Check other mysql records

score 1 · Answer 1

Well, your question is not very clear. But I estimate that you have an html paragraph and a text field with a button where depending on the number that is entered the text of the text takes such color. You could do it in the following way:

EDITED

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>