CODEWITHSUNDEEP
javascripthtmlcss
Sheldon
Sheldon

Reputation: 155

Javascript: modal.style.display = "block" not working

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 class="entry">
  <div class="list">
    <button onclick="deleteItem(event, ${i})" class="Archive" 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 class="input" data-id="${data.id}"></div>
      <label class="dateNew">${data.dateNew}</label>
      <label class="cashflowNew">${data.cashflowNew}</label>
      <label class="catagoryNew">${data.catagoryNew}</label>
      <label class="labelNew">${data.labelNew}</label>
      <label class="numberNew">${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 class="create-budget">
  <form class="budget">
    <input class="budget-button" type="button" value="Create your budget">
    <select id="cashflow" name="income/expense" class="income/expense">
      <option class="options" value="income">Income</option>
      <option class="options" value="expense">Expense</option>
    </select>
    <select name="Catagory" class="catagory" value="Catagory">
      <option class="options" value="House Hold">House Hold</option>
      <option class="options" value="Car">Car</option>
      <option class="options" value="entertainment">Entertainment</option>
      <option class="options" value="investments">Investments</option>
      <option class="options" value="business">Business</option>
      <option class="options" value="savings">Savings</option>
    </select>
    <input class="label" type="text" placeholder="Example rent">
    <input class="number" type="number" placeholder="0,0">
  </form>
</div>

<div class="new-budet">
  <div class="title">
    <h5>Date</h5>
    <h5>Income/Expenses</h5>
    <h5>Catagory</h5>
    <h5>Items</h5>
    <h5>Amount</h5>
  </div>
</div>

<div class="list"></div>
<div class="budget-update"></div>
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Want to make changes?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form class="budget-update">
          <select id="cashflow-update" name="income/expense" class="income/expense">
            <option class="options-update" value="income">Income</option>
            <option class="options-update" value="expense">Expense</option>
          </select>
          <select class="catagory-update" name="Catagory" value="Catagory">
            <option class="options-update" value="House Hold">House Hold</option>
            <option class="options-update" value="Car">Car</option>
            <option class="options-update" value="entertainment">Entertainment</option>
            <option class="options-update" value="investments">Investments</option>
            <option class="options-update" value="business">Business</option>
            <option class="options-update" value="savings">Savings</option>
          </select>
          <input class="label-update" type="text" placeholder="Example rent">
          <input class="number-update" type="number" placeholder="0,0">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">
                    <img src="/resources/Images/Save-icon.png" alt="Save Icon">
                </button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 2504

Answers (2)

ethry
ethry

Reputation: 803

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:

https://developer.mozilla.org/en-US/docs/Glossary/Variable

Upvotes: 0

Sheldon
Sheldon

Reputation: 155

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";
}

Upvotes: 1

Related Questions