1

Perdon si no se entiende lo que necesito, es mi primer pregunta aquí y realmente no se ni como 'googlear' el problema, por eso recurro a hacer esta publicación.

Lo que quiero hacer, es que mediante un botón ocurra un "modal", una especie de pop up (o así creo que se llama), eso lo logré, con su css y todo, lo que no entiendo es como pasar el valor de un parrafo dentro de un pop up específico, adjunto imágenes:

Esta "nota" tiene un boton el cual activa el pop up

Cuando le doy click al boton de View Detail, me activa el Pop Up con un parrafo el cual es el mismo al de la "nota"

introducir la descripción de la imagen aquí

Lo que quiero hacer, es que cuando tenga no se, 5 notas por ejemplo, si le doy click al view detail de la nota 3, que en el pop up aparezca el mismo string que en la nota 3, y así con las otras notas con otro número, no se si se entiende bien.

Y otro error que tengo y no se por qué es, es que cuando doy click en el boton back del pop up, lo quita, pero también me quita el parrafo en la nota, pero si inspecciono el código en el navegador el parrafo con su valor existe... solo que no se muestra entre "note 1" y el boton de "View Detail"

Adjunto todo mi código:

const btnAdd = document.querySelector('.btnAdd');
const btnDelete = document.querySelector('.btnDelete');
const btnViewDetail = document.querySelector('.btn-view-detail');
const btnCloseDetail = document.querySelector('.btnCloseDetail');
const textArea = document.querySelector('textarea');
const noteSection = document.querySelector('.notes-div');
const pageBody = document.querySelector('body');
const modalContainer = document.querySelector('.modal-container');
const modal = document.querySelector('.modal');
const errorMessage = document.querySelector('.error-text');

// Contador de Notas
let notesCounter = 1;

// Array que almacena el contenido principal de todas las notas.
let notes = [0];

btnAdd.addEventListener('click', (e) => {

  if (textArea.value.charAt(0) == " " || textArea.value == "") {

    errorMessage.innerHTML = "You can't add a note starting with a blank space or an entirely empty note!"
    errorMessage.classList.add('error');
  } else {

    const text = textArea.value;

    // Para saber cuantas cantidad de notas hay
    const h2 = document.createElement('h2');
    h2.textContent = "Note " + notesCounter;
    notesCounter++;

    // Crea el contenido principal de la nota
    const p = document.createElement('p');
    p.textContent = text;

    // Creación del boton para ver los detalles de las notas
    const buttonDetail = document.createElement('button');
    buttonDetail.classList.add('btn-view-detail');
    buttonDetail.textContent = "View Detail"

    // Funcionalidad de los botones para abrir y cerrar los detalles de la nota
    buttonDetail.onclick = () => {
      modalContainer.classList.add('show')
      modal.prepend(p);
    }

    btnCloseDetail.onclick = () => {
      modalContainer.classList.remove('show');
      p.innerHTML = "";
    }

    // Se agregan los hijos al div contenedor de las notas
    noteSection.appendChild(h2)
    noteSection.appendChild(p)
    noteSection.appendChild(buttonDetail);

    // Una vez que se crea una nota, agrega al array de "notes", el parrafo de la nota (contenido principal)
    // De esta manera se puede evaluar si ya existe una nota con ese valor, e impedir que se cree otra idéntica
    notes.push(textArea.value);

    // Una vez que se crea una nota, el valor de textarea se reinicia
    textArea.value = "";


    // Esto hace que si el contenido principal de las notas (en la parte de contenedor de notas) supera 5 caracteres, se recorte y se tenga que seguir leyendo luego de hacer click en los detalles de la nota
    // const charLength = 5;
    // const realValue = p.textContent;

    // if(realValue.length > charLength) {
    //     p.textContent = realValue.substring(0,charLength)+'...';
    // }

    // Si se coloca un espacio vacio al principio de la nota, o la nota está vacía, y luego de eso se da click en "Add Note", saldrá un mensaje de error. No obstante, si luego se pasa un valor válido en el textarea y la nota se crea, el mensaje de error desaparece
    errorMessage.innerHTML = "";
  }



});

// Este boton sirve para eliminar todas las notas al mismo tiempo.
btnDelete.addEventListener('click', (e) => {

  noteSection.textContent = "";
  notesCounter = 1;
  notes = [];

});
/** Globals **/

html {
  font-size: 62.5%;
  box-sizing: border-box;

}

body {
  font-family: Arial, Helvetica, sans-serif;

}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  font-size: 5rem;
}

p {
  font-size: 3rem;
}

/** Header **/

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header p {
  color: green;
  font-weight: bold;
}

/** Form **/

.form {
  text-align: center;
}

label {
  font-size: 2.5rem;
  vertical-align: top;
}

textarea {
  border-radius: .5rem;
  padding: 1rem;
  font-size: 2rem;
  resize: none;
}

textarea:focus {
  outline: none;
  -webkit-box-shadow: 0px 0px 5px 2px rgba(62, 171, 230, 0.68);
  -moz-box-shadow: 0px 0px 5px 2px rgba(62, 171, 230, 0.68);
  box-shadow: 0px 0px 5px 2px rgba(62, 171, 230, 0.68);
}

/** Note Section **/

.notes-div {
  text-align: center;
}

/** Buttons **/

.buttons {
  text-align: center;
  margin-top: 3rem;
}

.btnAdd {
  padding: 1rem 2rem;
  background-color: #009900;
  border-radius: .4rem;
  color: white;
  border: none;
}

.btnAdd:hover {
  background-color: #006600;
  cursor: pointer;
}

.btnDelete {
  padding: 1rem 2rem;
  background-color: #990000;
  border-radius: .4rem;
  color: white;
  border: none;
}

.btnDelete:hover {
  background-color: #660000;
  cursor: pointer;
}

.btn-view-detail {
  padding: 1rem 2rem;
  background-color: #1a75ff;
  border-radius: .4rem;
  color: white;
  border: none;
}

.btn-view-detail:hover {
  background-color: #0052cc;
  cursor: pointer;
}

/** Test **/

.greyBackground {
  background-color: #999999;
  pointer-events: none;
  user-select: none;
}

/** Modal **/

.modal-container {
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  position: fixed;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  pointer-events: none;
}

.modal {
  background-color: white;
  max-width: 100%;
  width: 30%;
  text-align: center;
  border-radius: .5rem;
  padding: 3rem 5rem;

}

.modal p {
  line-height: 4rem;
  margin-top: -.5rem;
}

.show {
  opacity: 1;
  pointer-events: all;
}

/** Error Messages **/

.error {
  text-align: center;
  color: red;
  font-size: 2rem;
  margin-top: 3rem;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Notes Taker</title>
  </head>

  <body>
    <header class="header">
      <h1>Notes Taker Simple App</h1>
      <p>Add Your Note Below:</p>
    </header>
    <div class="form">
      <label for="note">Your Note: </label>
      <textarea id="note" cols="100" rows="3" placeholder="Write Your Note Here..."></textarea>
    </div>
    <div class="buttons">
      <button class="btnAdd">Add Note</button>
      <button class="btnDelete">Delete Notes</button>
    </div>
    <p class="error-text"></p>
    <div class="notes-div">
    </div>
    <div class="modal-container">
      <div class="modal">
        <button class="btnCloseDetail">Back</button>
      </div>
    </div>
  </body>

</html>

6
  • Agrega el contenido de styles.css para que podamos probarlo bien
    – masterguru
    el 28 ene. 2022 a las 4:52
  • Ahi lo adjunté, muchas gracias por responder! De nuevo, es mi primer pregunta aquí y no entendí bien el formato, si hay alguna duda con el código o necesitas que explique algo solamente dímelo y lo haré :)
    – AikuX
    el 28 ene. 2022 a las 4:56
  • Acabo de editar tu pregunta añadiendo todo el código en un snippet (fragmento) para que se pueda ejecutar y ver mejor desde aqui (tambien lo he formateado con Tidy para facilitar su lectura)
    – masterguru
    el 28 ene. 2022 a las 5:00
  • Gracias, luego veré tutoriales sobre como usar stackoverflow correctamente para poder usar todos los atajos y tags correspondientes, por ahora solo quiero saber como hacer eso, llevo pensando un buen rato y no se me ocurre nada, y como se puede ver no soy ningun experto jajaja :P
    – AikuX
    el 28 ene. 2022 a las 5:02
  • Tambien lo he puesto aqui: jsfiddle.net/qrjzc0xo (esa web va muy bien para todo tipo de pruebas y te la recomiendo para la depuración de código en html/css/js)... tan solo debes editar los cambios alli y darle al RUN para verlos
    – masterguru
    el 28 ene. 2022 a las 5:03

1 respuesta 1

1

Lo que quiero hacer, es que cuando tenga no se, 5 notas por ejemplo, si le doy click al view detail de la nota 3, que en el pop up aparezca el mismo string que en la nota 3, y así con las otras notas con otro número, no se si se entiende bien.

Eso significa que en el evento onclick del button retail debe tener referencia a la nota del detalle que estás queriendo abrir

buttonDetail.onclick = () => {
  modalContainer.classList.add('show')
  modal.prepend(p);
}

para este caso tienes referencia a la variable p, que es una variable local que almacena la nota:

const p = document.createElement('p');
p.textContent = text;

Hasta ahí todo bien es el elemento correcto, todo bien si no fuera porque abajo hay otro onclick, el de cerrar que chanca el valor de p

   btnCloseDetail.onclick = () => {
      modalContainer.classList.remove('show');
      p.innerHTML = "";
    }

p.innerHTML = "" borra el html del elemento p la siguiente vez que yo abra el modal leeré p.innerHTML y no tendrá nada.

Con respecto a la otra pregunta, en el inspector seguro estás viendo la nota en el modal, que en realidad no la borras, supongo que quieres que se remplace el valor que agregaste con append pero como no tienes referencia a ese Element agregado con append es más complicado borrarlo así que mejor le creo un div para eso: <div class="nota"></div> en el cual le agregaría la nota con innerHTML al momento de cargar el modal.

Al final quedaría así:

const btnAdd = document.querySelector('.btnAdd');
const btnDelete = document.querySelector('.btnDelete');
const btnViewDetail = document.querySelector('.btn-view-detail');
const btnCloseDetail = document.querySelector('.btnCloseDetail');
const textArea = document.querySelector('textarea');
const noteSection = document.querySelector('.notes-div');
const pageBody = document.querySelector('body');
const modalContainer = document.querySelector('.modal-container');
const modal = document.querySelector('.modal');
const nota = document.querySelector('.modal .nota');
const errorMessage = document.querySelector('.error-text');

// Contador de Notas
let notesCounter = 1;

// Array que almacena el contenido principal de todas las notas.
let notes = [0];

btnAdd.addEventListener('click', (e) => {

  if (textArea.value.charAt(0) == " " || textArea.value == "") {

    errorMessage.innerHTML = "You can't add a note starting with a blank space or an entirely empty note!"
    errorMessage.classList.add('error');
  } else {

    const text = textArea.value;

    // Para saber cuantas cantidad de notas hay
    const h2 = document.createElement('h2');
    h2.textContent = "Note " + notesCounter;
    notesCounter++;

    // Crea el contenido principal de la nota
    const p = document.createElement('p');
    p.textContent = text;

    // Creación del boton para ver los detalles de las notas
    const buttonDetail = document.createElement('button');
    buttonDetail.classList.add('btn-view-detail');
    buttonDetail.textContent = "View Detail"

    // Funcionalidad de los botones para abrir y cerrar los detalles de la nota
    buttonDetail.onclick = () => {
      modalContainer.classList.add('show')
      nota.innerHTML = p.innerHTML;
    }

    btnCloseDetail.onclick = () => {
      modalContainer.classList.remove('show');
    }

    // Se agregan los hijos al div contenedor de las notas
    noteSection.appendChild(h2)
    noteSection.appendChild(p)
    noteSection.appendChild(buttonDetail);

    // Una vez que se crea una nota, agrega al array de "notes", el parrafo de la nota (contenido principal)
    // De esta manera se puede evaluar si ya existe una nota con ese valor, e impedir que se cree otra idéntica
    notes.push(textArea.value);

    // Una vez que se crea una nota, el valor de textarea se reinicia
    textArea.value = "";


    // Esto hace que si el contenido principal de las notas (en la parte de contenedor de notas) supera 5 caracteres, se recorte y se tenga que seguir leyendo luego de hacer click en los detalles de la nota
    // const charLength = 5;
    // const realValue = p.textContent;

    // if(realValue.length > charLength) {
    //     p.textContent = realValue.substring(0,charLength)+'...';
    // }

    // Si se coloca un espacio vacio al principio de la nota, o la nota está vacía, y luego de eso se da click en "Add Note", saldrá un mensaje de error. No obstante, si luego se pasa un valor válido en el textarea y la nota se crea, el mensaje de error desaparece
    errorMessage.innerHTML = "";
  }



});

// Este boton sirve para eliminar todas las notas al mismo tiempo.
btnDelete.addEventListener('click', (e) => {

  noteSection.textContent = "";
  notesCounter = 1;
  notes = [];

});
/** Globals **/

html {
  font-size: 62.5%;
  box-sizing: border-box;

}

body {
  font-family: Arial, Helvetica, sans-serif;

}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  font-size: 5rem;
}

p {
  font-size: 3rem;
}

/** Header **/

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header p {
  color: green;
  font-weight: bold;
}

/** Form **/

.form {
  text-align: center;
}

label {
  font-size: 2.5rem;
  vertical-align: top;
}

textarea {
  border-radius: .5rem;
  padding: 1rem;
  font-size: 2rem;
  resize: none;
}

textarea:focus {
  outline: none;
  -webkit-box-shadow: 0px 0px 5px 2px rgba(62, 171, 230, 0.68);
  -moz-box-shadow: 0px 0px 5px 2px rgba(62, 171, 230, 0.68);
  box-shadow: 0px 0px 5px 2px rgba(62, 171, 230, 0.68);
}

/** Note Section **/

.notes-div {
  text-align: center;
}

/** Buttons **/

.buttons {
  text-align: center;
  margin-top: 3rem;
}

.btnAdd {
  padding: 1rem 2rem;
  background-color: #009900;
  border-radius: .4rem;
  color: white;
  border: none;
}

.btnAdd:hover {
  background-color: #006600;
  cursor: pointer;
}

.btnDelete {
  padding: 1rem 2rem;
  background-color: #990000;
  border-radius: .4rem;
  color: white;
  border: none;
}

.btnDelete:hover {
  background-color: #660000;
  cursor: pointer;
}

.btn-view-detail {
  padding: 1rem 2rem;
  background-color: #1a75ff;
  border-radius: .4rem;
  color: white;
  border: none;
}

.btn-view-detail:hover {
  background-color: #0052cc;
  cursor: pointer;
}

/** Test **/

.greyBackground {
  background-color: #999999;
  pointer-events: none;
  user-select: none;
}

/** Modal **/

.modal-container {
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  position: fixed;
  justify-content: center;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  opacity: 0;
  pointer-events: none;
}

.modal {
  background-color: white;
  max-width: 100%;
  width: 30%;
  text-align: center;
  border-radius: .5rem;
  padding: 3rem 5rem;

}

.modal p {
  line-height: 4rem;
  margin-top: -.5rem;
}

.show {
  opacity: 1;
  pointer-events: all;
}

/** Error Messages **/

.error {
  text-align: center;
  color: red;
  font-size: 2rem;
  margin-top: 3rem;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Notes Taker</title>
  </head>

  <body>
    <header class="header">
      <h1>Notes Taker Simple App</h1>
      <p>Add Your Note Below:</p>
    </header>
    <div class="form">
      <label for="note">Your Note: </label>
      <textarea id="note" cols="100" rows="3" placeholder="Write Your Note Here..."></textarea>
    </div>
    <div class="buttons">
      <button class="btnAdd">Add Note</button>
      <button class="btnDelete">Delete Notes</button>
    </div>
    <p class="error-text"></p>
    <div class="notes-div">
    </div>
    <div class="modal-container">
      <div class="modal">
        <div class="nota">Aquí ira la nota</div>
        <button class="btnCloseDetail">Back</button>
      </div>
    </div>
  </body>

</html>

1
  • Muchisimas gracias!! era justo lo que necesitaba saber ^^ en mi mente pensaba que tenia que hacer un monton de cosas con javascript para por lo menos tener la chance de que el boton sepa que parrafo tenia que mostrar, pero se ve que era relativamente facil, te agradezco mucho
    – AikuX
    el 28 ene. 2022 a las 13:34

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.