I am new to tauri, I ran into a problem where appendChild in javascript will not work
js:
const { invoke } = window.__TAURI__.core;
let NoteInputEl;
async function ModNote(){
document.querySelector("#hd_1").textContent = "added";
var list = document.querySelector("#text_list");
let new_note = document.createElement("li");
new_note.textContent = await invoke("Note", {note: NoteInputEl.value});
list.appendChild(new_note);
}
window.addEventListener("DOMContentLoaded", () => {
NoteInputEl = document.querySelector("#note-input");
document.querySelector("#note-form").addEventListener("submit", (e) => {
e.preventDefault();
ModNote();
NoteInputEl.value="";
});
});
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<script type="module" src="/main.js" defer></script>
</head>
<body>
<main class="container">
<h1>Welcome to Tauri</h1>
<form class="row" id="note-form">
<input id="note-input" placeholder="Enter a note..." />
<button type="submit">Add</button>
</form>
<ul id="text_list">
</ul>
<p id="hd_1"></p>
</main>
</body>
</html>
lib.rs:
use chrono::Local;
#[tauri::command]
fn note(note: &str) -> String {
let sys_time = Local::now(); // Get the current local time
format!("{} - Created at {}", note, sys_time.format("%Y-%m-%d"))
}
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_opener::init())
.invoke_handler(tauri::generate_handler![note])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
There isn’t any error raised when I run it with tauri dev, the hd_1 is getting changed, is just that the appendChild is not updating the list with new entry when i press the button and submit the form, and when I went to test it by opening the index.html with google, the main.js wouldn’t get read, so i really have no idea what is the issue.