Cara memanggil fungsi javascript eksternal dari tombol html onclick

Saya memiliki file JavaScript dengan skrip untuk modal windows, saya menautkan file ini ke Custom_UI saya. html – file UI, di mana “projectname. html” tertanam

Saya menambahkan anotasi ke adegan saya, itu ada, saya membuat pengaturan puzzle sederhana – ketika mengklik anotasi ini -> panggil fungsi eksternal, jendela modal terbuka itu, saya sudah mengetahui bahwa untuk menggunakan puzzle "panggil fungsi eksternal" saya perlu . js” di blok “functionExternalInterface(app){}

Tetapi saya sangat buruk di JS dan tidak dapat menemukan cara yang tepat untuk memasukkan skrip saya

Skrip untuk jendela modal
Saya akan melampirkan kode yang sama dengan tangkapan layar jika akan lebih baik untuk memahami cara ini

// Get the button that opens the modal
var btn = document.querySelectorAll("div.modal-button");

//All page modals
var modals = document.querySelectorAll(".modal");

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
  btn.onclick = function openModal(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
  };
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
  spans.onclick = function () {
    for (var index in modals) {
      if (typeof modals[index].style !== "undefined")
        modals[index].style.display = "none";
    }
  };
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target.classList.contains("modal")) {
    for (var index in modals) {
      if (typeof modals[index].style !== "undefined")
        modals[index].style.display = "none";
    }
  }
};

• Topik ini telah diubah 7 bulan, 1 minggu yang lalu oleh
  
  ilyabogomolov .

Lampiran. Anda harus masuk untuk melihat file terlampir

09-06-2022 pukul 2. 26 pagi

kdv77kdv

Peserta

cukup tempatkan kode Anda "sebagaimana adanya" di dalam fungsi runCode(app) di akhir project_name.js

p. s. apakah ini benar-benar diperlukan untuk mengklik tombol?

for (var i = 0; i < btn.length; i++) {
for (var i = 0; i < spans.length; i++) {

09-06-2022 jam 7. 23 pagi

Peserta

Terima kasih atas saran Anda, saya akan mencoba apa yang Anda katakan

Tentang perlunya garis-garis itu - sejujurnya saya tidak tahu, itu hanya berfungsi dan jadi saya menggunakannya, saya mengerti cara kerjanya secara umum, tetapi tidak tahu apakah itu bisa bekerja tanpa mereka atau tidak

Saya percaya mereka diperlukan untuk bekerja dengan banyak contoh jendela modal, itulah mengapa itu bertambah - untuk menerapkan kode untuk setiap contoh

upd1
Saya melakukan tes dengan perintah console.log('Hello, World!'); sederhana
Saya mencoba apa yang Anda sarankan dan mengetahui bahwa itu akan menjalankan kode ini secara instan setelah aplikasi dimuat

Di sisi lain, jika saya meletakkan kode saya di dalam function prepareExternalInterface(app) {} saya kemudian berhasil memanggil fungsi saya sesuai permintaan, dalam kasus saya – saat klik pada anotasi dengan teka-teki sederhana yang ditampilkan di lampiran “screen1”

Jadi saya memasukkan kode saya ke function prepareExternalInterface(app) {}
Dan itu tidak berhasil, saya kira masalahnya sekarang terletak pada kode saya, karena perlu variabel untuk dijalankan tetapi karena saya meletakkan skrip hanya di function prepareExternalInterface(app) {} itu tidak bisa mendapatkan elemen dengan kelas masing-masing dari Custom_UI saya. html untuk mendeklarasikan?

Maaf untuk teks yang panjang, saya baru saja tersesat saat ini

• Balasan ini telah diubah 7 bulan, 1 minggu yang lalu oleh
  
  ilyabogomolov .
• Balasan ini telah diubah 7 bulan, 1 minggu yang lalu oleh
  
  ilyabogomolov .
• Balasan ini telah diubah 7 bulan, 1 minggu yang lalu oleh
  
  ilyabogomolov .

09-06-2022 jam 9. 03 pagi

Peserta

Halo, terima kasih atas balasannya
Saya membuat tes dengan console.Log("Hello, World!"); sederhana

Saya telah mencoba saran Anda dan mengetahui bahwa jika saya memasukkan kode saya ke runCode(app) itu akan menjalankannya setelah aplikasi dimuat, ini bukan yang saya inginkan

Di sisi lain, jika saya memasukkannya ke dalam fungsi

for (var i = 0; i < btn.length; i++) {
for (var i = 0; i < spans.length; i++) {

Masalahnya sekarang terletak pada kode saya, saya pikir. Saya punya dua tebakan

Pertama. karena saya memasukkan kode langsung ke fungsi

for (var i = 0; i < btn.length; i++) {
for (var i = 0; i < spans.length; i++) {

Kedua. itu tidak berfungsi karena skrip ini digunakan untuk banyak elemen, dan jika saya mencoba memanggil skrip ini, ia tidak tahu modal apa yang ingin saya munculkan

Saya akan terus mencari keputusan

• Balasan ini telah diubah 7 bulan, 1 minggu yang lalu oleh
  
  ilyabogomolov .

09-06-2022 pukul 10. 17 pagi

kdv77kdv

Peserta

inilah kode di dalam runCode(app) yang berfungsi tanpa masalah

tentu saja,

for (var i = 0; i < btn.length; i++) {
for (var i = 0; i < spans.length; i++) {

for (var i = 0; i < btn.length; i++) {
for (var i = 0; i < spans.length; i++) {

p. s. dapatkah Anda memberikan aplikasi Anda dalam zip untuk melihatnya lebih dekat?

09-06-2022 jam 9. 07 malam

Peserta

Terima kasih sekali lagi, saya murni pemula di JS, hanya tahu beberapa html/css dasar, aplikasi saya saat ini berantakan karena saya mencoba mengimplementasikan beberapa fitur. Dapatkah saya memiliki email Anda atau kontak lain sehingga saya dapat mengirimkannya?

Bagaimana cara memanggil fungsi JavaScript di tombol HTML?

Bagaimana cara memanggil fungsi dari file JavaScript eksternal dalam HTML?

Bagaimana Anda memanggil fungsi JS saat tombol diklik?

Bagaimana cara menulis fungsi onclick JavaScript dalam HTML?