Bagaimana memanggil fungsi JavaScript daripada href dalam HTML

86

Saya memiliki beberapa mockup dalam HTML

<a href="javascript:ShowOld(2367,146986,2)"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

Saya mendapat respon dari server ketika saya mengirim permintaan.

Dengan mockup ini saya mendapat tanggapan atas permintaan AJAX yang mengirimkan kode saya ke server.

Ya, semuanya baik-baik saja tetapi ketika saya mengklik tautan tersebut, browser ingin membuka fungsi sebagai tautan; artinya setelah klik saya melihat bilah alamat sebagai

javascript:ShowOld(2367,146986,2)

Berarti browser hal itu url jika saya ingin melakukan ini di firebug yang berfungsi. Sekarang saya ingin melakukan itu kemudian ketika seseorang mengklik link maka browser mencoba memanggil fungsi yang sudah dimuat di DOM alih-alih mencoba membukanya di browser.

javascript html debugging

— Brett DeWoody
sumber

Pertanyaan serupa dijawab di Stackoverflow itu sendiri. stackoverflow.com/questions/1070760/…

— Scaria Sebastian

195

Sintaks itu seharusnya berfungsi dengan baik, tetapi Anda dapat mencoba alternatif ini.

<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">

atau

<a href="javascript:ShowOld(2367, 146986, 2);">

JAWABAN DIPERBARUI UNTUK NILAI-NILAI STRING

Jika Anda meneruskan string, gunakan tanda kutip tunggal untuk parameter fungsi Anda

<a href="javascript:ShowOld('foo', 146986, 'bar');">

— Dutchie432
sumber

Bagaimana cara melewatkan string yang keluar dari tanda kutip ganda dalam argumen? H = Contoh hanya memiliki bilangan bulat.

— jeffry copps

1

@jeffrycopps coba tanda kutip tunggal di dalam fungsi Anda

— ineedme

@ineedme Jawaban Diperbarui dengan informasi itu. Terima kasih.

— Dutchie432

9

Jika Anda hanya memiliki "click event handler", gunakan file <button>. Tautan memiliki makna semantik tertentu.

Misalnya:

<button onclick="ShowOld(2367,146986,2)">
    <img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>

— Felix Kling
sumber

Adakah cara untuk membuat tombol terlihat seperti tautan alih-alih tombol?

— Ben Page

@Ben Page: Ya, dengan CSS. Setidaknya Anda mendapatkan perkiraan yang baik. Lihat jawaban saya dan komentar di sini: stackoverflow.com/questions/4842953/or-javascriptvoid0/…

— Felix Kling

7

Cobalah untuk membuat javascript Anda tidak mengganggu:

Anda harus menggunakan tautan nyata di atribut href
dan menambahkan pendengar pada acara klik untuk menangani ajax

— soju
sumber

hrefbersifat opsional, hilangkan saja.

— Colin 't Hart

Sebuah tag adalah sebuah jangkar; itu tidak harus memiliki tautan.

— Colin 't Hart

5

Saya menggunakan sedikit CSS dalam satu rentang agar terlihat seperti tautan seperti ini:

CSS:

.link {
    color:blue;
    text-decoration:underline;
    cursor:pointer;
}

HTML:

<span class="link" onclick="javascript:showWindow('url');">Click Me</span>

JAVASCRIPT:

function showWindow(url) {
    window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}

— tolsen64
sumber

Parameter fungsi 'url' di atas memberi saya string "url" alih-alih url sebenarnya

— visrahane

Anda seharusnya meletakkan URL sebenarnya di fungsi showWindow. Misalnya: javascript: showWindow (' stackoverflow.com' );

— tolsen64

Saya tidak dapat membuat kode keras karena saya membuatnya menggunakan dom dan saya tidak memiliki kendali atas url

— visrahane

3

Anda juga harus memisahkan javascript dari HTML.
HTML:

<a href="#" id="function-click"><img title="next page" alt="next page" src="/themes/me/img/arrn.png"></a>

javascript:

myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);

Pastikan baris terakhir dalam fungsi ShowOld adalah:

return false;

karena ini akan menghentikan pembukaan tautan di browser.

— gerbang Neraka
sumber

1

hrefbersifat opsional, hilangkan saja.

— Colin 't Hart

3

<a href="#" onclick="javascript:ShowOld(2367,146986,2)">

— nico
sumber

9

Bukan solusi terbaik karena ini akan melompat ke bagian atas halaman.

— Alex Marshall

1

Untuk href alih-alih #digunakanhref="javascript:void(0)

— Narayan

1

hrefbersifat opsional, hilangkan saja.

— Colin 't Hart

1

href adalah opsional untuk a elemen.

Ini sepenuhnya cukup untuk digunakan

<a onclick="ShowOld(2367,146986,2)">link text</a>

— Colin 't Hart
sumber