Асин c Ожидание javascript

Question

Как я могу запустить функцию runApp() при нажатии кнопки «Отправить»? Этот код ниже заставляет мою функцию runApp запускаться до щелчка, но я хочу ввести значение из формы.

const login = (username, password) => new Promise((resolve, reject) => {
  setTimeout(() => {
    let result
    let err
    if (username == "angga" || password != null) {
      result = "Login sukses, anda menuju ke halaman utama"
      resolve(result)
    } else {
      err = "Login gagal, username tidak ada !!!"
      reject(err)
    }

  }, 0)
})

const mainmenu = () => new Promise((resolve) => {
  setTimeout(() => {
    resolve("biodata.html")
  }, 0)
})

const runApp = async function() {
  const getUsername = await username()
  alert(`username : ${getUsername}`)
  const getPassword = await password()
  alert(`password : ${getPassword}`)
  const resultLogin = await login(getUsername, getPassword)
  alert(`${resultLogin}`)
  const resultMainMenu = await mainmenu()
  return resultMainMenu
}

const username = () => new Promise((resolve) => {
  setTimeout(() => {
    let usernameFromBrowser = document.querySelector("#username").value;
    resolve(usernameFromBrowser)
  }, 0)
})

const password = () => new Promise((resolve) => {
  setTimeout(() => {
    let passwordFromBrowser = document.querySelector("#password").value;
    resolve(passwordFromBrowser)
  }, 0)
})

runApp()
  .then((getResolve) => {
    // window.location.href = `${getResolve}`
  })
  .catch((getReject) => {
    alert(`${getReject}`)
  })

<form>
  <label>Username</label>
  <input type="text" id="username" value="angga" placeholder="Masukkan username">

  <label>Password</label>
  <input type="password" id="password" value="123456" placeholder="Masukkan password">
  <button type="submit" class="btn btn-primary" onclick="test()">Submit</button>
</form>

Помогите, пожалуйста, это домашнее задание.

Answer 1

Пусть приложение run () будет заключено в объявление функции test () .. Как показано ниже

Test () {runApp () .then ((getResolve) => {window.location. href = ${getResolve}}) .catch ((getReject) => {alert (${getReject})})

}

Answer 2

Из того, что я вижу, похоже, что runApp вызывается после загрузки файла JS, а событие onSubmit вызывает несуществующую функцию.

Я бы посоветовал сделать JS файл более модульный.

Вот несколько вещей, которые могут вам помочь:

Вариант 1: HTML

    <button type="submit" ... onClick="() => runApp().then(...).catch(...)">...

Вариант 2: HTML

    <button type="submit" ... onClick="startApplication">...

JS

    ...
    function startApplication() {
       runApp()
       .then((getResolve) => { window.location.href = `${getResolve}` })
       .catch((getReject) => { alert(`${getReject}`) })
       // other things 
    }
    ...