I made a modal that is supposed to pop up when the user clicks the edit button. I hid the modal in CSS with display: none;
for some reason for the JS side I made a function that is linked to the edit button that when button is pressed the modal is changed to display: block;
What I did do was within the function renderList() I used the button onclick="editItem(event, ${i})" for the function editItem(event, i)
/*----Edit budget Entry----*/
function editItem(event, i){
alert("edit button clicked")
let mod = modal.style.display = "block";
console.log(mod)
}
I made a runable code so you can see.
/*----Storage key----*/
const BUDGETLIST_KEY = "user-key-entryList";
/*----Generate ID----*/
const createId = () => `${Math.floor(Math.random() * 10000)}${(new Date().getTime())}`;
/*----Get current Date----*/
function createdDate() {
let currentDate = new Date();
let day = String(currentDate.getDate()).padStart(2, '0');
let month = String(currentDate.getMonth() 1).padStart(2, '0');
let year = currentDate.getFullYear();
currentDate = month '/' day '/' year;
return currentDate;
}
/*----Variable Objects----*/
const el = {
list: document.querySelector(".list"),
cashflow: document.querySelector("#cashflow"),
catagory: document.querySelector(".catagory"),
label: document.querySelector(".label"),
number: document.querySelector(".number"),
modal: document.querySelector(".modal"),
};
/*----Array with local Storage----*/
let budgetArray = [];
/*----Budget list Object----*/
function makeNewBudget() {
const data = {
id: createId(),
cashflowNew: el.cashflow.value,
catagoryNew: el.catagory.value,
labelNew: el.label.value,
dateNew: createdDate(),
numberNew: el.number.value,
};
return data;
}
/*----Render Budget List----*/
function renderList() {
el.list.innerHTML = budgetArray.map(function(data, i) {
return `<div >
<div >
<button onclick="deleteItem(event, ${i})" data-id="${data.id}">
<img src="../resources/Images/archive.png" alt="Archive">
</button>
<button onclick="editItem(event, ${i})" class = "edit" data-id="${data.id}" class = "edit" data-id="${data.id}">
<img src="../resources/Images/edit.png" alt="Edit">
</button>
<div data-id="${data.id}"></div>
<label >${data.dateNew}</label>
<label >${data.cashflowNew}</label>
<label >${data.catagoryNew}</label>
<label >${data.labelNew}</label>
<label >${data.numberNew}</label>
</div>
</div>`;
});
}
/*----form validation----*/
let budgetButton = document.querySelector(".budget-button");
let label = document.querySelector(".label");
let num = document.querySelector(".number");
budgetButton.addEventListener("click", () => {
if (!label.value || !num.value) {
alert("please make sure all inputs are filled");
}
budgetArray.push(makeNewBudget())
renderList();
});
/*----Remove from array----*/
function deleteItem(event, i) {
budgetArray.splice(i, 1);
renderList();
}
/*----Close Modal----*/
let close = document.querySelector(".btn-close")
let xBtn = document.querySelector(".btn-secondary")
let modal = document.querySelector(".modal-content")
close.addEventListener('click', () => {
if (close) {
modal.style.display = "none"
}
});
xBtn.addEventListener('click', () => {
if (xBtn) {
modal.style.display = "none"
}
});
/*----Edit budget Entry----*/
function editItem(event, i) {
alert("edit button clicked")
let mod = modal.style.display = "block";
console.log(mod)
}.modal {
display: block;
margin-top: 15rem;
display: none;
}<!--Create budget-->
<div >
<form >
<input type="button" value="Create your budget">
<select id="cashflow" name="income/expense" >
<option value="income">Income</option>
<option value="expense">Expense</option>
</select>
<select name="Catagory" value="Catagory">
<option value="House Hold">House Hold</option>
<option value="Car">Car</option>
<option value="entertainment">Entertainment</option>
<option value="investments">Investments</option>
<option value="business">Business</option>
<option value="savings">Savings</option>
</select>
<input type="text" placeholder="Example rent">
<input type="number" placeholder="0,0">
</form>
</div>
<div >
<div >
<h5>Date</h5>
<h5>Income/Expenses</h5>
<h5>Catagory</h5>
<h5>Items</h5>
<h5>Amount</h5>
</div>
</div>
<div ></div>
<div ></div>
<div tabindex="-1">
<div >
<div >
<div >
<h5 >Want to make changes?</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div >
<form >
<select id="cashflow-update" name="income/expense" >
<option value="income">Income</option>
<option value="expense">Expense</option>
</select>
<select name="Catagory" value="Catagory">
<option value="House Hold">House Hold</option>
<option value="Car">Car</option>
<option value="entertainment">Entertainment</option>
<option value="investments">Investments</option>
<option value="business">Business</option>
<option value="savings">Savings</option>
</select>
<input type="text" placeholder="Example rent">
<input type="number" placeholder="0,0">
</form>
</div>
<div >
<button type="button" data-bs-dismiss="modal">Close</button>
<button type="button" >
<img src="/resources/Images/Save-icon.png" alt="Save Icon">
</button>
</div>
</div>
</div>
</div>CodePudding user response：
Thanks to ethry answer it helped solve the problem. I forgot to add a variable for it
let modal= document.querySelector(".modal")
/*----Edit budget Entry----*/
function editItem(event, i){
modal.style.display = "block";
}
CodePudding user response：
In order to use a variable, it needs to be defined. It looks like you accidentally left it undefined.
let modal = document.querySelector(".modal");
/*----Edit budget Entry----*/
function editItem(event, i){
modal.style.display = "block";
}
Or you could replace .querySelector(". with .getElementsByClassName(" and add [0] at the end.
More information about variables: