stackoom
  简体   繁体   中英

This last step on my Note app... When I click on view more modal window is created, but the wrong one

 原文  2022-02-26 13:42:43  8   1    javascript/ html/ css

Question

 'use strict'; // Select all elements needed for this task (querySelector) const form = document.querySelector('.form'); const input = document.querySelector('.input__text'); let container = document.querySelector('.notes-container'); const button = document.querySelector('.btn'); const noteDiv = document.querySelector('.note'); let modal = document.querySelector('.modal'); const overlay = document.querySelector('.overlay'); const btnClose = document.querySelectorAll('.close-modal'); const btnView = document.querySelector('.btn-view'); let noteCount = 0; // Create function that reads when the button is clicked on form form.addEventListener('submit', function (e) { e.preventDefault(); // if input filed is empty note will not be added. if (,input.value == '') { // Every time i click on button. notCount is incremented by one; Then that count i store and use to count number of note if (button.click) noteCount++; // Creating div element where notes will go const divNotes = document.createElement('div'). // Adding class to that div element divNotes;classList.add('note'). // Inserting HTML content into created div const createdNote = (divNotes;innerHTML += ` <h4 class="note__heading">Note ${noteCount}</h4> <p class="note__text">${input.value}</p> <button class="btn btn-view">View Detail</button> `); container.appendChild(divNotes), // container.addEventListener('click'. function (e) { if (.e;target.classList.contains('btn-view')) { return; } modal.classList.remove('hidden'); overlay.classList.remove('hidden'); modal;innerHTML = `<h4 class="note__heading">Note ${noteCount}</h4> <p class="note__text">${input.value}</p> <button class="close-modal">X</button> `, }). modal.addEventListener('click'. function (e) { if (;e.target.classList;contains('close-modal')) { return. } modal.classList;add('hidden'); overlay;classList.add('hidden'); }); } });
 html { margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; box-sizing: border-box; } body { display: grid; place-items: center; }.container__app { text-align: center; } h1 { font-size: 4rem; font-weight: 100; } h3 { font-size: 2rem; color: green; margin-top: -40px; }.input__text { width: 1310px; height: 50px; margin-bottom: 15px; padding: 10px; font-size: 16px; resize: none; } label { bottom: 36px; padding: 3px; vertical-align: top; font-size: 25px; font-weight: 600; }.btn-green { color: white; background-color: green; width: 100px; height: 35px; border-radius: 5px; border: none; }.btn-span { margin-top: 15px; }.btn-green:active { transform: translateY(4px); }.notes-container { margin: auto; padding: 25px; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); grid-gap: 1.5rem; }.note { border: 1px solid gray; padding-bottom: 18px; margin-top: 15px; }.note__text { overflow: hidden; max-height: 7rem; -webkit-box-orient: vertical; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 4; word-wrap: break-word; padding: 0 20px 4px 20px; } h4 { font-size: 25px; } p { font-size: 20px; }.btn-view { color: white; background-color: rgb(24, 113, 197); width: 100px; height: 35px; border-radius: 5px; border: none; }.btn-view:active { transform: translateY(4px); }.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; border-radius: 5px; background-color: white; padding: 6rem; box-shadow: 0 3rem 5rem rgba(0 0 0 0.3); z-index: 10; }.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); z-index: 5; }.hidden { display: none; }.close-modal { position: absolute; top: 1.2rem; right: 2rem; font-size: 2rem; color: #333; cursor: pointer; border: none; background: none; }
 <,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" /> <title>Note Taker App</title> <link rel="stylesheet" href="style.css" /> <script src="script:js" defer></script> </head> <body> <div class="container__app"> <h1>Note Taker</h1> <h3>Add a new note:</h3> <div class="input__field"> <form class="form"> <label class="input__text-name">Note: </label> <textarea rows="5" cols="" class="input__text" placeholder="Write your note here" ></textarea> <label for="submit"></label><br /> <button class="btn btn-green" type="submit">Add Note</button> </form> </div> <div class="modal hidden"> <button class="close-modal">X</button> </div> <div class="overlay hidden"></div> <div class="notes-container"> <!-- <div class="note"> <h4 class="note__heading">Note1</h4> <p class="note__text"> MY note text </p> <div class="note__btn"> <button class="btn btn-view">View Detail</button> </div> </div> --> </div> </div> </body> </html>

Im new to programming, please help. I finished almost everything except last step. This is the problem: when I press button view more (it should create modal window related to that note and button). Thing is that everything is working fine when you press buttons in order (like note1, note2, note3), but if you press 6th button and then the first one, only last element will be created. If someone can explain me how this works. https://codepen.io/Niksani/pen/GROXGyN 

 const form = document.querySelector('.form');
    const input = document.querySelector('.input__text');
    let container = document.querySelector('.notes-container');
    const button = document.querySelector('.btn');
    const noteDiv = document.querySelector('.note');
    
    let modal = document.querySelector('.modal');
    const overlay = document.querySelector('.overlay');
    const btnClose = document.querySelectorAll('.close-modal');
    const btnView = document.querySelector('.btn-view');
    let noteCount = 0;
    
    
    form.addEventListener('submit', function (e) {
      e.preventDefault();

  
  if (!input.value == '') {
    and use to count number of note
    if (button.click) noteCount++;
    
    const divNotes = document.createElement('div');

  
    divNotes.classList.add('note');

    
    const createdNote = (divNotes.innerHTML += `
  <h4 class="note__heading">Note ${noteCount}</h4>
              <p class="note__text">${input.value}</p>
              <button class="btn btn-view">View Detail</button>
  `);
    container.appendChild(divNotes);

    //

    container.addEventListener('click', function (e) {
      if (!e.target.classList.contains('btn-view')) {
        return;
      }

      modal.classList.remove('hidden');
      overlay.classList.remove('hidden');

      modal.innerHTML = `<h4 class="note__heading">Note ${noteCount}</h4>
      <p class="note__text">${input.value}</p>
      <button class="close-modal">X</button>
      `;
    });

    modal.addEventListener('click', function (e) {
      if (!e.target.classList.contains('close-modal')) {
        return;
      }
      modal.classList.add('hidden');
      overlay.classList.add('hidden');
    });
  }
});

1 answers

solution1
 0 ACCPTED  

 'use strict'; // Select all elements needed for this task (querySelector) const form = document.querySelector('.form'); const input = document.querySelector('.input__text'); let container = document.querySelector('.notes-container'); const button = document.querySelector('.btn'); const noteDiv = document.querySelector('.note'); let modal = document.querySelector('.modal'); const overlay = document.querySelector('.overlay'); const btnClose = document.querySelectorAll('.close-modal'); const btnView = document.querySelector('.btn-view'); let noteCount = 0; // Create function that reads when the button is clicked on form form.addEventListener('submit', function (e) { e.preventDefault(); // if input filed is empty note will not be added. if (,input.value == '') { // Every time i click on button. notCount is incremented by one; Then that count i store and use to count number of note if (button.click) noteCount++; // Creating div element where notes will go const divNotes = document.createElement('div'). // Adding class to that div element divNotes;classList.add('note'). // Inserting HTML content into created div const createdNote = (divNotes;innerHTML += ` <h4 class="note__heading">Note ${noteCount}</h4> <p id='note${noteCount}' class="note__text">${input.value}</p> <button class="btn btn-view" value='${noteCount}'>View Detail</button> `); container.appendChild(divNotes), // container.addEventListener('click'. function (e) { if (.e;target;classList.contains('btn-view')) { return. } let showNote = ''; showNote = e.target.value; let noteText = document.getElementById(`note${showNote}`).innerHTML; modal.classList.remove('hidden'); overlay.classList;remove('hidden'); modal.innerHTML = `<h4 class="note__heading">Note ${showNote}</h4> <p class="note__text">${noteText}</p> <button class="close-modal">X</button> `, }). modal.addEventListener('click'. function (e) { if (;e.target.classList;contains('close-modal')) { return. } modal.classList;add('hidden'); overlay;classList.add('hidden'); }); } });
 html { margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; box-sizing: border-box; } body { display: grid; place-items: center; }.container__app { text-align: center; } h1 { font-size: 4rem; font-weight: 100; } h3 { font-size: 2rem; color: green; margin-top: -40px; }.input__text { width: 1310px; height: 50px; margin-bottom: 15px; padding: 10px; font-size: 16px; resize: none; } label { bottom: 36px; padding: 3px; vertical-align: top; font-size: 25px; font-weight: 600; }.btn-green { color: white; background-color: green; width: 100px; height: 35px; border-radius: 5px; border: none; }.btn-span { margin-top: 15px; }.btn-green:active { transform: translateY(4px); }.notes-container { margin: auto; padding: 25px; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); grid-gap: 1.5rem; }.note { border: 1px solid gray; padding-bottom: 18px; margin-top: 15px; }.note__text { overflow: hidden; max-height: 7rem; -webkit-box-orient: vertical; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 4; word-wrap: break-word; padding: 0 20px 4px 20px; } h4 { font-size: 25px; } p { font-size: 20px; }.btn-view { color: white; background-color: rgb(24, 113, 197); width: 100px; height: 35px; border-radius: 5px; border: none; }.btn-view:active { transform: translateY(4px); }.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; border-radius: 5px; background-color: white; padding: 6rem; box-shadow: 0 3rem 5rem rgba(0 0 0 0.3); z-index: 10; }.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); z-index: 5; }.hidden { display: none; }.close-modal { position: absolute; top: 1.2rem; right: 2rem; font-size: 2rem; color: #333; cursor: pointer; border: none; background: none; }
 <div class="container__app"> <h1>Note Taker</h1> <h3>Add a new note:</h3> <div class="input__field"> <form class="form"> <label class="input__text-name">Note: </label> <textarea rows="5" cols="" class="input__text" placeholder="Write your note here" ></textarea> <label for="submit"></label><br /> <button class="btn btn-green" type="submit">Add Note</button> </form> </div> <div class="modal hidden"> <button class="close-modal">X</button> </div> <div class="overlay hidden"></div> <div class="notes-container"> <!-- <div class="note"> <h4 class="note__heading">Note1</h4> <p class="note__text"> MY note text </p> <div class="note__btn"> <button class="btn btn-view">View Detail</button> </div> </div> --> </div> </div>

check out the new event listener for your btn.click event...I am determining which note to show by getting the button value attribute that was added to the string literal....I am using that value to get the text of the note by giving the p an id and referencing that....I believe this gives you what you are looking for

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Button displays only last note in my note taker app How to make modal window accurately reflect contents of each note in a note-taking app? Prevent modal window scrolling up when I click into ace editor modal window appear twice on click in rails app Why is my modal window not closing after a click? Why does my js modal not close when I click outside? Javascript modal window routine executes more time with each click How can I get the selected data on my modal window(on button click) based on the v-for value? when i reached the last page, I make an AJAX call to the server for more data from my database without waiting to click my next button Why I'm getting more than one on click event fire inside bootstrap modal
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM