Button displays only last note in my note taker app
Question
const adder = document.querySelector('.adder') const gridcont = document.querySelector('.gridbox') const text = document.querySelector('p') const button = document.querySelector('.button') const popup = document.querySelector('.popup-wrapper') const popuptext = document.querySelector('.popup-content') const close = document.querySelector('.popup-close') const notecard = document.querySelector('.card') const notetext = document.querySelector('.card-text') const pi = document.querySelector('p') let counter = 0; let html; let note; let html2 /*close.addEventListener('click', e =>{ popup.style.display ='none' }) */ popup.addEventListener('click', e=>{ popup.style.display ='none' }) const template = note =>{ html = `<div class="card"> <div class="card-body"> <h5 class="card-title">Note ${counter}</h5> <p class="card-text">${note}</p> <button class="button" type="button">view detail</button> </div> </div>` gridcont.innerHTML += html } adder.addEventListener('submit', e =>{ e.preventDefault() note = adder.add.value if(note.length){ counter++ template(note) adder.reset() } }) gridcont.addEventListener('click', e =>{ if(e.target.classList.contains('button')){ popup.style.display = 'block' popuptext.innerHTML = html } });
.card{ margin-left: 2rem; margin-top: 2rem; }.form-control{ max-width: 500px; }.blu{ color: blue; }.gridbox{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }.button{ color:white; background-color: rgb(41, 41, 241); border-color: rgb(41, 41, 241);; }.card-text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }.popup-wrapper{ display: none; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; }.popup{ font-family: arial; text-align: center; width: 100%; max-width: 500px; margin: 10% auto; padding: 20px; background: white; position: relative; }.popup-close{ position: absolute; top: 5px; right: 8px; cursor: pointer; }.card-text-show{ overflow: unset; text-overflow: unset; max-width: 200px; }
<:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.15.4/css/all,css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> <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 href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="styles:css"> <title>Note taker</title> </head> <body> <div class="head text-center"> <header> <h1>Note taker app</h1> <h8 class="blu">add note.</p> </header> <form class="adder"> <input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here"> </form> </div> <div class="gridbox"> </div> <div class="popup-wrapper"> <div class="popup"> <div class="popup-close">x</div> <div class="popup-content"> <h5 class="card-title"> </h5> <p class="card-text"> </p> </div> </div> </div> <script src="app.js"></script> </body> </html>
im trying to make note taker app and each time i add the note and click the view detail button it shows me only the content of last item added regardless of which one i press i dont know how to write with loop or forEach method i tried it but i failed can anyone explain what to do here im a begginer JS
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
popuptext.innerHTML = html
}
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I dont really know many methods so i just use one way im stuck on this project for 4 days CSS
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
1 answers
solution1
1 2021-12-21 16:40:16
On popuptext.innerHTML = html line you are making the mistake, so what is happening is you are setting the innerHTML of popuptext as variable html, so this line tries find html variable and goes to part of this code,
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
and then it finds the HTML variable here, however the value of this html variable will be whatever you have set it to earlier, so if you add three notes then the value of the html variable will be innerhtml of the latest/last note that you added. To fix that I have made a change as popuptext.innerHTML = e.target.parentElement.innerHTML , this line makes sure that whatever element you are clicking that element's associated innerhtml is added to the popup.
const adder = document.querySelector('.adder') const gridcont = document.querySelector('.gridbox') const text = document.querySelector('p') const button = document.querySelector('.button') const popup = document.querySelector('.popup-wrapper') const popuptext = document.querySelector('.popup-content') const close = document.querySelector('.popup-close') const notecard = document.querySelector('.card') const notetext = document.querySelector('.card-text') const pi = document.querySelector('p') let counter = 0; let html; let note; let html2 /*close.addEventListener('click', e =>{ popup.style.display ='none' }) */ popup.addEventListener('click', e=>{ popup.style.display ='none' }) const template = note =>{ html = `<div class="card"> <div class="card-body"> <h5 class="card-title">Note ${counter}</h5> <p class="card-text">${note.substring(0,6)}...<span class="only-popup">${note}</span></p> <button class="button" type="button">view detail</button> </div> </div>` gridcont.innerHTML += html } adder.addEventListener('submit', e =>{ e.preventDefault() note = adder.add.value if(note.length){ counter++ template(note) adder.reset() } }) gridcont.addEventListener('click', e =>{ if(e.target.classList.contains('button')){ popup.style.display = 'block' let temp = `<div class="card"> <div class="card-body"> <h5 class="card-title">${e.target.parentElement.querySelector('.card-title').innerText}</h5> <p class="card-text">${e.target.parentElement.querySelector('.only-popup').innerText}</p> <button class="button" type="button">view detail</button> </div> </div>` popuptext.innerHTML = temp } });
.card{ margin-left: 2rem; margin-top: 2rem; }.form-control{ max-width: 500px; }.blu{ color: blue; }.gridbox{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }.button{ color:white; background-color: rgb(41, 41, 241); border-color: rgb(41, 41, 241);; }.card-text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }.popup-wrapper{ display: none; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; }.popup{ font-family: arial; text-align: center; width: 100%; max-width: 500px; margin: 10% auto; padding: 20px; background: white; position: relative; }.popup-close{ position: absolute; top: 5px; right: 8px; cursor: pointer; }.only-popup{ display:none; }.card-text-show{ overflow: unset; text-overflow: unset; max-width: 200px; }
<:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.15.4/css/all,css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> <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 href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="styles:css"> <title>Note taker</title> </head> <body> <div class="head text-center"> <header> <h1>Note taker app</h1> <h8 class="blu">add note.</p> </header> <form class="adder"> <input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here"> </form> </div> <div class="gridbox"> </div> <div class="popup-wrapper"> <div class="popup"> <div class="popup-close">x</div> <div class="popup-content"> <h5 class="card-title"> </h5> <p class="card-text"> </p> </div> </div> </div> <script src="app.js"></script> </body> </html>
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
Dynamically Create a Modal for a Note Taker App
How can i create a note on my webpage for iphone user that there is an app?
My forEach loop displays only the last value
Loop doubles the number of notes in note app
SVG VS Canvas in a note taking app
How to make modal window accurately reflect contents of each note in a note-taking app?
I want the title of my note that I clicked on to change NOT the first note of the list
Problem on React, onClick take the last var and note the choosen one
Array displays only the last data in my array and not the whole data
why does a web audio oscillator only play a note once?
Related Tags