i have the following situation: i have to click twice on the button to trigger the function that adds the data into localStorage formular's content. Could you explain to me why is this button behaving like this and how can i remediate this problem?

here is the javascript code:

async function addMovieIntoBrowser() {
  const valueName = document.getElementById("fname");
  const valueDescription = document.getElementById("fdescription");
  const valueYear = document.getElementById("fyear");
  const valueRating = document.getElementById("frating");
  const buttonInsert = document.getElementById("buttonInsert");

  buttonInsert.onclick = async function () {
    const name = valueName.value;
    const description = valueDescription.value;
    const image = await returnImage(name);
    const year = valueYear.value;
    const rating = valueRating.value;

    if (name && description && image && year && rating) {
      localStorage.setItem("Name", name);
      localStorage.setItem("Description", description);
      localStorage.setItem("Image", image);
      localStorage.setItem("Year", year);
      localStorage.setItem("Rating", rating);
      localStorage.setItem("Date added", new Date().toLocaleString());

      const table = document.getElementById("completedTable");
      const row = table.insertRow(0);
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);
      const cell4 = row.insertCell(3);
      const cell5 = row.insertCell(4);
      const cell6 = row.insertCell(5);

      cell1.innerHTML = localStorage.getItem("Name");
      cell2.innerHTML = localStorage.getItem("Description");
      cell3.innerHTML = localStorage.getItem("Image");
      cell4.innerHTML = localStorage.getItem("Year");
      cell5.innerHTML = localStorage.getItem("Rating");
      cell6.innerHTML = localStorage.getItem("Date added");

      const inputs = document.querySelectorAll(
        "#fyear, #fname,#fdescription, #frating"
      );
      inputs.forEach((input) => {
        input.value = "";
      });

CodePudding user response：

There is no need to use localStorage here as you are using the contents straight away on the same page. In fact, you can simplify your script considerably: Below is a short working example without the "image" column. As the film image seems to be supplied in form of a promise it can also be included by using await.

const inputs = [...document.querySelectorAll("#fyear, #fname,#fdescription, #frating")],
 tbl=document.querySelector("#tbl");

document.querySelector("button").onclick=async ()=>{ 
 tbl.insertAdjacentHTML("beforeend","<tr><td>" 
 inputs.map(inp=>inp.value).join("</td><td>") "</td></tr>");
 inputs.forEach(inp=>inp.value="");
};

<form>
<input type="text" value="2020" id="fyear"> year<br>
<input type="text" value="Roma" id="fname"> name<br>
<input type="text" value="an epic film" id="fdescription"> description<br>
<input type="text" value="5" id="frating"> rating
</form><button>add</button>
<h2>Film table</h2>
<table><thead><tr><th>year</th><th>name</th><th>description</th><th>rating</th></tr></thread>
<tbody id="tbl"></tbody></table>

CodePudding user response：

Even simpler

const tbl = document.getElementById("tbl"),
  form = document.querySelector("form"),
  inputs = [...form.elements];

document.querySelector("button").addEventListener("click",(e) => {
  tbl.innerHTML  = `<tr>${inputs
    .map(({value}) => `<td>${value}</td>`)
    .join("")}</tr>`;
    form.reset();
});

<form>
  <input type="text" value="" name="fyear"> year<br>
  <input type="text" value="" name="fname"> name<br>
  <input type="text" value="" name="fdescription"> description<br>
  <input type="text" value="" name="frating"> rating
</form><button>add</button>
<h2>Film table</h2>
<table>
  <thead>
    <tr>
      <th>year</th>
      <th>name</th>
      <th>description</th>
      <th>rating</th>
    </tr>
  </thead>
  <tbody id="tbl"></tbody>
</table>