0

Hola estoy haciendo este pequeño tablero de publicaciones.

El problema que estoy teniendo es que cada vez que se crean elementos <p> no son afectados por el estilo que les asigne. ¿Algún consejo?

Aqui les dejo el codigo que hice, el cual esta diseñado de la siguiente forma:

Hay un contenedor <div> en el cual se crean elementos hijo del tipo <p> despues de haber presionado el buton de "submit".

El codigo JS hace lo siguiente, almacena el texto introducido atraves de <input> y lo asigna a una variable llamada x, luego crea una variable llamada h en la cual se crea un elemento de tipo <p>, luego al elemento <p> se le añade el texto que el usuario ingreso, es decir, el valor de la variable x.

Esto se ejecuta sin problemas, ademas para facilitar la lectura del usuario decidí que cada elemento que se cree tenga un color distinto para poder diferenciar en donde comienza uno y en donde termina otro, lo cual es ejecutado también correctamente, pero para ello cree una variable llamada color la cual es la responsable de cambiar el color de los elementos <p> que se van creando.

Sin embargo, el problema es que los elementos p tienen un margen que hace que no se vean simetricos uno con el otro, por lo cual antes de la etiqueta <script> Estilicé algunos elementos del documento, en este caso, los elementos <p>, a los cuales les quité el padding y el margin, sin embargo aun se crean con cierto margen, el cual es el que me está ocacionando problemas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .tablero{
            background-color: rgb(0, 150, 255);
        }
        .p{
            padding: 0px;
            margin: 0px;
        }
    </style>
    <script type="text/javascript">

        var color = 2;

        function publicar(){

            var x = document.getElementById("publicacion").value;

            var h = document.createElement("P");
            var t = document.createTextNode(x);
            h.appendChild(t);
            if(color == 2){
            document.getElementById("tablero").appendChild(h).style.backgroundColor = "rgb(0, 180, 255)";
            color--;
            }
            else{
            document.getElementById("tablero").appendChild(h).style.backgroundColor = "rgb(0, 150, 255)";
            color++;
            }
        }

    </script>
</head>
<body>
    <input type="text" id="publicacion"></input>
    <input type="submit" onclick="publicar()"></input>
    <div id="tablero" class="tablero">
        <h1>Tablero de publicaciones :)</h1>
    </div>
</body>
</html>

1 respuesta 1

2

El selector que usas para referirte a los párrafos es una clase .p { que no existe.

Existen distintos selectores, algunos de estos son id #id, clase .class, etiqueta. La solución seria quitar el .p { por p {. O ponerle una clase class="p" a cada parrafo

Te doy unos consejos.

cuando declaras una propiedad a 0, ejemplo: margin: 0px, no hace falta declarar si es px, %, fr, pt. una cantidad 0 es 0 con cualquier magnitud.

En ves de comprobar if color === 2 (else): a los elementos que comparten una misma clase puedes aplicar propiedades dependiendo que si son pares o impares, ejemplo:

p:nth-child(even) {
    background: rebeccapurple;
}

:nth-child() es un pseudo-clase que representa el patrón para los elementos coincidentes.

even representa elementos cuya posición numérica en una serie de hermanos es par.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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