0

Info

I want to press the the add color button and then the color should be added instantly to the color_list

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Tauri App</title>
    <script defer src="main.js" type="module"></script>
  </head>
  <body>
    <h1>add color</h1>
    <input id="new_color" type="text" placeholder="your color" />
    <button id="add_color_btn" type="button">add color</button>
    <ul id="color_list"></ul>
  </body>
</html>

JS

const { invoke } = window.__TAURI__.core;

const currentSettings = {
  saved_colors: []
};

window.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("new_color");
  const btn = document.getElementById("add_color_btn");

  btn.addEventListener("click", async () => {
    const color = input.value.trim();

    console.log("Input read:", color);

    if (color === "") return;

    currentSettings.saved_colors.push(color);
    input.value = "";

    updateColorUI(currentSettings.saved_colors);

    try {
      // await invoke("save_settings", { settings: currentSettings });
      console.log("saved");
    } catch (err) {
      console.error("error while saving:", err);
    }
  });
});

function updateColorUI(colors) {
  const list = document.getElementById("color_list");
  list.innerHTML = "";

  colors.forEach((color) => {
    const li = document.createElement("li");
    li.textContent = color;
    list.appendChild(li);
  });
}

The save for tauri is commented because it doenst update in the frontend even without the rust backend

I tryed the with a normal HTML Website and this works instant, NO WAITING, NO BUTTEN LOCKED etc

I think the problem that Tauri does not reload instantly because it take some time after a new Input until i can press the button. I tested it with comments. After i type something new in the input field, the button is not working for 1 / 3 secondes and when press the button after these 3 seconds, the color will get added to the color list

when i press the in those 2 seconds nothing will happen, no output to the console.

I dont know how fix this, can somebody help please?

1
  • Try removing window.addEventListener("DOMContentLoaded Commented May 4 at 17:34

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.