Javascript： modal.style.display = "block"不起作用

Question

我制作了一个模式，该模式应该在用户单击编辑按钮时弹出。我用display: none; 将模态隐藏在CSS中

出于JS方面的某种原因，我制作了一个链接到编辑按钮的函数，当按下按钮时，模式将更改为display: block;

我所做的是在function renderList()中，我使用按钮onclick="editItem(event, ${i})"进行function editItem(event, i)

/*----Edit budget Entry----*/
function editItem(event, i){
alert("edit button clicked")
 let mod = modal.style.display = "block";
 console.log(mod)
}

我制作了一个可运行的代码，这样你就可以看到了。

/*----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>

Answer 1

感谢ethry的回答，它帮助解决了问题。我忘了为它添加一个变量

let modal= document.querySelector(".modal")
/*----Edit budget Entry----*/
function editItem(event, i){
modal.style.display = "block";
}

Answer 2

为了使用变量，需要定义它。看起来你不小心把它忘了。

let modal = document.querySelector(".modal");
/*----Edit budget Entry----*/
function editItem(event, i){
modal.style.display = "block";
}

或者您可以用.getElementsByClassName("替换.querySelector(".，并在末尾添加[0]。

有关变量的更多信息：

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