How to export function in module

Question

I used modular web api to install firebase, which works. This means I added my code in script type="module". The only issue with this is that I have a button that needs to add a document to the database. However, for some reason, when i call on the function using the button, it says its not defined. Below is my code

The button:

<div id="myDIV" class="todoheader">
  <h2 style="margin:5px">My To Do List</h2>
  <input type="text" id="myInput" placeholder="Task...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

and the javascript

<script type="module">
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.2/firebase-app.js'
import { getFirestore, collection, doc, setDoc, query, where, getDocs  } from 'https://www.gstatic.com/firebasejs/10.7.2/firebase-firestore.js'

const firebaseApp = initializeApp({
    apiKey: "AIzaSyDx6xuNnelTuWLQVoJQQ_13_q3u2kULpCE",
    authDomain: "tododatabase-8cc76.firebaseapp.com",
    projectId: "tododatabase-8cc76",
    storageBucket: "tododatabase-8cc76.appspot.com",
    messagingSenderId: "342835299624",
    appId: "1:342835299624:web:2864e35382d74599ef7c1d",
    measurementId: "G-NVT04Z3FYN"
});
const db = getFirestore(firebaseApp);
const todolist = []
// Specify the collection you want to read from
const collectionName = "tododata";

// Get the collection reference
const collectionRef = collection(db, collectionName);
const q = query(collectionRef);
// Get all documents in the collection
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  todolist.push(doc.data())
  console.log(doc.id, " => ", doc.data());
});
console.log(todolist)
// Create a "close" button and append it to each list item
var list = document.querySelector('list-ul'); // Select the <ul> element
for( var i =0; i < todolist.length; i++) {
  const liElement = document.createElement("li");
  liElement.textContent = todolist[i]['Name'];
  if (todolist[i]['Crossed'] === true) {
    liElement.classList.add("checked");
  }
  console.log(liElement)
  list.appendChild(liElement);
}




// Create a "close" button and append it to each list item
var list = document.querySelector('list-ul'); // Select the <ul> element

var myNodelist = list.querySelectorAll('LI');
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
    console.log(i)
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('list-ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
    let name = ev.target.textContent
    

  }
}, false);

// Create a new list item when clicking on the "Add" button


function newElement() {
  
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";

  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}
</script>

The function isnt being called. I solved the error by adding window.newElement() { }

Answer 1

You're facing the issue because the newElement() function is defined inside a script with type="module". Functions defined inside a module are not available in the global scope by default. The fix would be to attach the newElement() function to the window object so that it's accessible in the global scope.

window.newElement = function() {
  // Your existing code
}