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>