JavaScript işlevini çağırmak için HTML düğmesi kullanma

Bir JavaScript işlevini çağırmak için bir HTML düğmesi kullanmaya çalışıyorum.

İşte kod:

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

Yine de düzgün çalışmıyor gibi görünüyor. Bunu yapmanın daha iyi bir yolu var mı?

İşte bağlantı: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html sol alt bölümdeki kapasite sekmesini tıklayın. Değerler değiştirilmezse düğme bir uyarı oluşturmalı ve değerleri girerseniz bir grafik üretmelidir.

HTML / DOM ile olayları işlemenin birkaç yolu vardır. Doğru ya da yanlış gerçek bir yol yoktur, ancak farklı durumlarda farklı yollar yararlıdır.

1: HTML'de tanımlayan var:

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

2: Javascript'te olayın DOM özelliğine ekleniyor:

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

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

3: Javascript kullanarak olay işleyiciye bir fonksiyon ekleniyor:

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

Hem ikinci hem de üçüncü yöntemler satır içi / anonim işlevlere izin verir ve her ikisi de öğe belgeden ayrıldıktan sonra bildirilmelidir. İlk yöntem geçerli XHTML değildir çünkü onclick özelliği XHTML belirtiminde değildir.

1. ve 2. yöntemler birbirini dışlar, yani birini (2.) kullanmak diğerini (1.) geçersiz kılar. 3. yöntem, 1. veya 2. yöntem de kullanılmış olsa bile aynı olay işleyicisine istediğiniz kadar işlev eklemenize olanak tanır.

Büyük olasılıkla, sorun CapacityChart()işlevinizde bir yerde yatıyor . Bağlantınızı ziyaret ettikten ve komut dosyanızı çalıştırdıktan sonra CapacityChart () işlevi çalışır ve iki açılır pencere açılır (komut dosyasına göre biri kapatılır). Aşağıdaki satıra sahip olduğunuz yer:

CapacityWindow.document.write(s);

Bunun yerine aşağıdakileri deneyin:

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

EDIT
Kodunuzu gördüğümde özellikle IE için yazdığını düşündüm. Diğerlerinin de belirttiği gibi, referansları document.allile değiştirmeniz gerekecektir document.getElementById. Ancak, yine de bundan sonra komut dosyasını düzeltme görevine sahip olacaksınız, bu yüzden çapraz tarayıcı çalışmak için kodu değiştirdiğiniz herhangi bir hata daha da karışıklığa neden olabileceği için en azından IE'de çalışmasını öneriyorum. IE'de çalıştıktan sonra, kodu güncellerken diğer tarayıcılarda çalışıp çalışmadığını söylemek daha kolay olacaktır.

Javascript'i rahatsız edici bir şekilde eklemenin daha iyi olacağını söyleyebilirim ...

jQuery kullanarak aşağıdakileri yapabilirsiniz:

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

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

HTML'niz ve düğmeden işlevi arama şekliniz doğru görünüyor.

Sorun CapacityCountişlevde gibi görünüyor. Firefox 3.5 konsolumda bu hatayı alıyorum: bendelcorp.js 759 satırında "document.all undefined".

Düzenle:

Görünüşe göre document.allIE sadece bir şeydir ve DOM'a erişmenin standart olmayan bir yoludur. Eğer kullanırsanız document.getElementById(), muhtemelen işe yaramalıdır. Örnek: document.getElementById("RUnits").valueyerinedocument.all.Capacity.RUnits.value

Bu doğru görünüyor. Sanırım işlevinizi farklı bir adla veya düğme tarafından görülmeyen bir bağlamda tanımladınız. Lütfen bir kod ekleyin

Bildiğiniz gibi, işlevi çağırdığınızda noktalı virgül ( ; ) düğmenin orada olmaması gerekir.

Yani sadece şöyle görünmeli: onclick="CapacityChart()"

o zaman hepsi işe yaramalı :)

Sahip olduğunuz en büyük sorun, tarayıcı kokusunu iyi bir nedenden dolayı kullanmanızdır:

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
    }

Chrome'dayım, öyle navigator.appNameolmayacak Netscape. Chrome destekliyor document.allmu? Belki, ama sonra tekrar olmayabilir. Peki ya diğer tarayıcılar?

NetscapeŞube üzerindeki kodun sürümü, 1996'dan itibaren Netscape Navigator 2'ye kadar olan herhangi bir tarayıcıda çalışmalıdır, bu yüzden muhtemelen bununla devam etmelisiniz ... ) name, inputöğelerde bir özellik belirtmediğiniz için formun elementsdizisine adlandırılmış öğeler olarak eklenmeyecektir :

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

Onlara bir ad verin ve elementsdiziyi kullanın veya (daha iyi) kullanın

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

tüm modern tarayıcılarda çalışır - dallamaya gerek yoktur. Sadece güvenli tarafta olmak için, 4 veya daha büyük bir tarayıcı sürümü için bu koklamayı getElementByIddestek kontrolüyle değiştirin :

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

Muhtemelen girişinizi de doğrulamak istiyorsunuz; gibi bir şey

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

yardımcı olurdu.

Kodunuz şu satırda başarısız oluyor:

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

Firebug ile olsa adım denedim ve orada başarısız. bu sorunu çözmenize yardımcı olacaktır.

başvurulan jquery var. tüm bu işlevlerde de kullanabilirsiniz. kodunuzu önemli ölçüde temizler.

Akıllı bir işlev geri arama düğmesi kodu var:

<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>

BASİT CEVAP:

   onclick="functionName(ID.value);

Burada ID, giriş alanının kimliğidir.

Aptalca bir şekilde:

onclick="javascript:CapacityChart();"

Ayrık javascript hakkında okumalı ve geri çağrıları dom olaylarına bağlamak için bir frameworks bind yöntemi kullanmalısınız.