Menggunakan tombol HTML untuk memanggil fungsi JavaScript

Saya mencoba menggunakan tombol HTML untuk memanggil fungsi JavaScript.

Ini kodenya:

<input type="button" value="Capacity Chart" onclick="CapacityChart();">

Sepertinya tidak berfungsi dengan benar. Apakah ada cara yang lebih baik untuk melakukan ini?

Berikut tautannya: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html klik pada tab kapasitas di bagian kiri bawah. Tombol harus menghasilkan peringatan jika nilainya tidak berubah dan harus menghasilkan bagan jika Anda memasukkan nilai.

Ada beberapa cara untuk menangani acara dengan HTML / DOM. Tidak ada cara yang benar atau salah, tetapi cara yang berbeda berguna dalam situasi yang berbeda.

1: Ada yang mendefinisikannya dalam HTML:

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

2: Ada yang menambahkannya ke properti DOM untuk acara 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 melampirkan fungsi ke pengendali acara menggunakan Javascript:

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

Metode kedua dan ketiga memungkinkan untuk fungsi inline / anonim dan keduanya harus dideklarasikan setelah elemen diuraikan dari dokumen. Metode pertama tidak XHTML yang valid karena atribut onclick tidak dalam spesifikasi XHTML.

Metode ke-1 dan ke-2 saling eksklusif, artinya menggunakan satu (ke-2) akan menimpa yang lain (ke-1). Metode ke-3 akan memungkinkan Anda untuk melampirkan fungsi sebanyak yang Anda suka ke pengendali event yang sama, bahkan jika metode 1 atau 2 telah digunakan juga.

Kemungkinan besar, masalahnya terletak di suatu tempat di CapacityChart()fungsi Anda . Setelah mengunjungi tautan Anda dan menjalankan skrip Anda, fungsi CapacityChart () berjalan dan dua popup dibuka (satu ditutup sesuai skrip). Di mana Anda memiliki baris berikut:

CapacityWindow.document.write(s);

Coba yang berikut ini sebagai gantinya:

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

EDIT
Ketika saya melihat kode Anda, saya pikir Anda menulisnya khusus untuk IE. Seperti yang telah disebutkan orang lain, Anda perlu mengganti referensi document.alldengan document.getElementById. Namun, Anda masih akan memiliki tugas untuk memperbaiki skrip setelah ini sehingga saya akan merekomendasikan membuatnya bekerja di setidaknya IE terlebih dahulu karena setiap kesalahan yang Anda buat mengubah kode untuk bekerja lintas browser dapat menyebabkan lebih banyak kebingungan. Setelah berfungsi di IE, akan lebih mudah untuk mengetahui apakah itu berfungsi di browser lain saat Anda memperbarui kode.

Saya akan mengatakan akan lebih baik untuk menambahkan javascript dengan cara yang tidak mencolok ...

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.

Masalahnya tampaknya berada dalam CapacityCountfungsi. Saya mendapatkan kesalahan ini di konsol saya di Firefox 3.5: "document.all tidak terdefinisi" pada baris 759 dari bendelcorp.js.

Edit:

Sepertinya document.alladalah hal yang hanya untuk IE dan merupakan cara yang tidak standar untuk mengakses DOM. Jika Anda menggunakannya document.getElementById(), mungkin harus bekerja. Contoh: document.getElementById("RUnits").valuebukannyadocument.all.Capacity.RUnits.value

Ini terlihat benar. Saya kira Anda mendefinisikan fungsi Anda dengan nama yang berbeda atau dalam konteks yang tidak terlihat oleh tombol. Silakan tambahkan beberapa kode

Asal tahu saja, titik koma ( ; ) tidak seharusnya ada di tombol ketika Anda memanggil fungsi.

Jadi seharusnya terlihat seperti ini: onclick="CapacityChart()"

maka semuanya harus bekerja :)

Satu masalah utama yang Anda miliki adalah Anda menggunakan sniffing browser tanpa alasan yang jelas:

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
    }

Saya menggunakan Chrome, jadi navigator.appNametidak akan Netscape. Apakah Chrome mendukung document.all? Mungkin, tapi sekali lagi mungkin tidak. Dan bagaimana dengan browser lain?

Versi kode pada Netscapecabang harus berfungsi pada browser apa saja pada jalan kembali ke Netscape Navigator 2 dari tahun 1996, jadi Anda mungkin harus tetap dengan itu ... kecuali bahwa itu tidak akan berfungsi (atau tidak dijamin untuk bekerja ) karena Anda belum menentukan nameatribut pada inputelemen, jadi mereka tidak akan ditambahkan ke elementsarray formulir sebagai elemen bernama:

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

Entah beri mereka nama dan gunakan elementsarray, atau gunakan (lebih baik)

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

yang akan bekerja pada semua browser modern - tidak perlu bercabang. Agar aman, ganti sniffing itu untuk versi browser yang lebih besar dari atau sama dengan 4 dengan cek getElementByIddukungan:

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

Anda mungkin ingin memvalidasi input 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);

Saya mencoba melangkah meskipun dengan pembakar dan gagal di sana. yang seharusnya membantu Anda memecahkan masalah.

Anda telah mereferensikan jquery. Anda sebaiknya menggunakannya di semua fungsi ini. itu akan membersihkan kode Anda secara signifikan.

Saya memiliki kode tombol fungsi-panggilan-dukungan cerdas:

<br>
<p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br>
<button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>

JAWABAN SEDERHANA:

   onclick="functionName(ID.value);

Di mana ID adalah ID dari bidang input.

cara konyol:

onclick="javascript:CapacityChart();"

Anda harus membaca tentang javascript diskrit, dan menggunakan metode kerangka mengikat untuk mengikat panggilan balik ke acara dom.