Menggunakan tombol HTML untuk memanggil fungsi JavaScript

Ada beberapa cara untuk menangani peristiwa dengan HTML/DOM. Ada's ada cara yang benar atau salah tapi cara yang berbeda berguna dalam situasi yang berbeda.

1: Ada's mendefinisikannya dalam HTML:

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2:'s menambahkannya ke DOM properti untuk event di Javascript:

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

3: Dan ada's melampirkan sebuah fungsi ke event handler menggunakan Javascript:

var el = document.getElementById("clickMe");
if (el.addEventListener)
    el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', doFunction);

Kedua dan ketiga metode yang memungkinkan untuk inline/fungsi anonim dan kedua harus dinyatakan setelah elemen telah diurai dari dokumen. Metode pertama isn't valid XHTML karena atribut onclick isn't dalam XHTML spesifikasi.

1 dan 2 metode yang saling eksklusif, yang berarti menggunakan satu (2) akan menimpa lain (1). 3 metode yang akan memungkinkan anda untuk melampirkan banyak fungsi seperti anda seperti untuk acara yang sama handler, bahkan jika 1 atau 2 metode telah digunakan juga.

Kemungkinan besar, masalah terletak di suatu tempat di CapacityChart() fungsi. Setelah mengunjungi link anda dan menjalankan script, CapacityChart() fungsi berjalan dan dua popup dibuka (satu ditutup sesuai script). Di mana anda memiliki baris berikut:

CapacityWindow.document.write(s);

Cobalah hal berikut ini sebagai gantinya:

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

EDIT Ketika saya melihat anda saya pikir anda menulis ini khusus untuk IE. Seperti orang lain telah disebutkan, anda akan perlu untuk mengganti referensi untuk dokumen.semua dengan dokumen.getElementById. Namun, anda masih akan memiliki tugas memperbaiki script setelah ini, jadi saya akan merekomendasikan mendapatkan itu bekerja di setidaknya YAITU pertama karena setiap kesalahan yang anda buat mengubah kode untuk pekerjaan cross browser bisa menyebabkan lebih banyak kebingungan. Setelah itu's bekerja di IE, itu akan lebih mudah untuk memberitahu jika itu's bekerja di browser lain sementara anda're memperbarui kode.

Aku akan mengatakan itu akan lebih baik untuk menambahkan javascript di un-menonjol dengan cara...

jika menggunakan jQuery, anda bisa melakukan sesuatu seperti:

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>

<input type="button" value="Capacity Chart" id="MyButton" >

HTML anda dan cara anda memanggil fungsi dari tombol terlihat benar.

Masalah muncul untuk berada di CapacityCount fungsi. I'm mendapatkan kesalahan ini di konsol saya pada Firefox 3.5: "dokumen.semua adalah tidak terdefinisi" on line 759 dari bendelcorp.js.

Edit:

Terlihat seperti dokumen.semua adalah sebuah IE-satunya hal dan cara yang tidak standar untuk mengakses DOM. Jika anda menggunakan dokumen.getElementById(), mungkin harus bekerja. Contoh: dokumen.getElementById("RUnits").nilai bukan dokumen.semua.Kapasitas.RUnits.nilai

Ini terlihat benar. Saya kira anda mendefinisikan fungsi dengan nama yang berbeda atau dalam konteks yang isn't terlihat tombol. Silakan tambahkan beberapa kode

Hanya agar kau tahu, titik koma(;) tidak seharusnya ada di tombol ketika anda memanggil fungsi.

Jadi itu hanya harus terlihat seperti ini: onclick="CapacityChart()"

maka itu semua harus bekerja :)

Saya memiliki sebuah fungsi cerdas-call-back, tombol kode:

<br>
<p id="demo"></p><h2>Intelligent Button:</h2>Note: Try pressing a key after clicking.<br>
Ahhhh

Salah satu masalah utama anda adalah bahwa anda're menggunakan browser sniffing untuk tidak ada alasan yang baik:

if(navigator.appName == 'Netscape')
    {
      vesdiameter  = document.forms['Volume'].elements['VesDiameter'].value;
      // more stuff snipped
    }
    else
    {
      vesdiameter  = eval(document.all.Volume.VesDiameter.value);
      // more stuff snipped
    }

I'm di Chrome, jadi navigator.appName tidak't Netscape. Apakah Chrome mendukung dokumen.semua? Mungkin, tapi sekali lagi mungkin tidak. Dan bagaimana dengan browser yang lain?

Versi dari kode pada Netscape cabang harus bekerja pada setiap browser kanan jalan kembali ke Netscape Navigator 2 dari tahun 1996, sehingga anda mungkin hanya harus tetap dengan itu... kecuali bahwa itu tidak't bekerja (atau isn't dijamin untuk bekerja) karena anda belum't ditentukan nama atribut pada input unsur-unsur, sehingga mereka tidak't akan ditambahkan ke bentuk's unsur-unsur array seperti yang disebutkan unsur-unsur:

<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">

Baik memberikan mereka nama dan gunakan unsur-unsur array, atau (lebih baik) menggunakan

var vesdiameter = document.getElementById("VesDiameter").value;

yang akan bekerja pada semua browser modern - tidak ada percabangan yang diperlukan. Hanya untuk berada di sisi yang aman, menggantikan yang mengendus untuk versi browser yang lebih besar dari atau sama dengan 4 dengan memeriksa getElementById dukungan:

if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
    // do stuff...
}

Anda mungkin ingin untuk memvalidasi masukan anda juga; sesuatu seperti

var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
    alert("Diameter should be numeric");
    return;
}

akan membantu.

Kode anda gagal pada baris ini:

var RUnits = Math.abs(document.all.Capacity.RUnits.value);

aku mencoba melangkah meskipun dengan firebug dan gagal di sana. yang akan membantu anda mencari tahu masalah.

anda memiliki jquery dirujuk. anda mungkin juga menggunakannya di semua fungsi-fungsi ini. it'll membersihkan kode anda secara signifikan.

konyol cara:

onclick="javascript:CapacityChart();"

Anda harus membaca tentang diskrit javascript, dan menggunakan kerangka kerja yang mengikat metode untuk mengikat callback untuk dom acara.