Utilizzo di un pulsante HTML per chiamare una funzione JavaScript

Question

Sto tentando di utilizzare un pulsante HTML per chiamare una funzione JavaScript.

Ecco il codice:

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

Non sembra funzionare correttamente però. C'è un modo migliore per farlo?

Questo è il collegamento: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html fare clic sulla scheda capacità nella sezione in basso a sinistra. Il pulsante dovrebbe generare un avviso se i valori non vengono modificati e dovrebbe produrre un grafico se si inseriscono valori.

Answer 1

Ci sono alcuni modi per gestire eventi con HTML/DOM. Non esiste un vero modo giusto o sbagliato, ma diversi modi sono utili in diverse situazioni.

1: C'è definendolo nel codice HTML:

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

2: C'è aggiungendo alla proprietà DOM per l'evento in Javascript:

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

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

3: e c'è allegando una funzione per il gestore eventi che utilizza Javascript:

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

Sia il secondo che il terzo metodo consentono di inline/anonymou s funzioni ed entrambi devono essere dichiarati dopo che l'elemento è stato analizzato dal documento. Il primo metodo non è XHTML valido perché l'attributo onclick non è nella specifica XHTML.

Il 1 ° e il 2 ° metodo si escludono a vicenda, il che significa che l'utilizzo di uno (il 2 °) sovrascriverà l'altro (il primo). Il terzo metodo ti consentirà di allegare tutte le funzioni che desideri allo stesso gestore di eventi, anche se è stato utilizzato anche il 1 ° o il 2 ° metodo.

Molto probabilmente, il problema si trova da qualche parte nella funzione CapacityChart(). Dopo aver visitato il tuo link ed eseguito lo script, la funzione CapacityChart() viene eseguita e i due popup vengono aperti (uno è chiuso come da script).Dove si ha la seguente riga:

CapacityWindow.document.write(s); 

Provate il seguente invece:

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

EDIT
Quando ho visto il codice ho pensato che si stesse scrivendo in modo specifico per IE. Come altri hanno già detto, dovrai sostituire i riferimenti a document.all con document.getElementById. Tuttavia, avrai ancora il compito di correggere lo script dopo questo, quindi ti consiglio di farlo funzionare almeno in IE, in primo luogo, poiché qualsiasi errore che fai cambiando il codice in modo che funzioni cross browser potrebbe causare ancora più confusione. Una volta che funziona in IE sarà più facile capire se funziona su altri browser mentre stai aggiornando il codice.

Answer 2

modo stupido:

onclick="javascript:CapacityChart();" 

Si dovrebbe leggere su javascript discreta, e utilizzare un metodo di quadri bind per collegare callback di eventi DOM.

Answer 3

direi che sarebbe meglio aggiungere il javascript in un modo non-invadente ...

se si utilizza jQuery si potesse fare qualcosa di simile:

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

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

Answer 4

Questo sembra corretto. Immagino tu abbia definito la tua funzione con un nome diverso o in un contesto che non è visibile al pulsante. Per favore aggiungi del codice

Answer 5

Uno dei problemi principali che hai è che si sta utilizzando il browser sniffing per nessuna buona ragione:

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 
    } 

Sono su Chrome, quindi non ci sarà navigator.appNameNetscape. Chrome supporta document.all? Forse, ma di nuovo forse no. E che dire degli altri browser?

La versione del codice sul ramo Netscape dovrebbe funzionare su qualsiasi browser direttamente da Netscape Navigator 2 a partire dal 1996, quindi dovresti probabilmente limitarti a farlo ... eccetto che non funzionerà (o non funzionerà) 't garantito al lavoro), perché non è stato specificato un attributo name sulle input elementi, in modo che non saranno aggiunti al elements matrice del form come elementi denominati:

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

O dare loro un nome e l'uso l'array elements o (migliore) usa

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

che funzionerà su tutti i browser moderni - nessuna diramazione necessaria. Giusto per essere al sicuro, sostituire quel sniffing per una versione del browser maggiore o uguale a 4 con un assegno di getElementById supporto:

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

Probabilmente si desidera convalidare l'ingresso pure; qualcosa come

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

aiuterebbe.

Answer 6

L'HTML e il modo in cui si chiama la funzione dal pulsante sembrano corretti.

Il problema sembra essere nella funzione CapacityCount. Sto ricevendo questo errore nella mia console su Firefox 3.5: "document.all non è definito" nella riga 759 di bendelcorp.js.

Edit:

Sembra document.all è un IE-sola cosa ed è un modo non standard di accesso al DOM. Se si utilizza document.getElementById(), probabilmente dovrebbe funzionare.Esempio: document.getElementById("RUnits").value anziché document.all.Capacity.RUnits.value

Answer 7

Il codice viene meno da questa linea:

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

Ho provato passo se con firebug e fallisce lì. questo dovrebbe aiutarti a capire il problema.

si fa riferimento a jquery. potresti anche usarlo in tutte queste funzioni. pulirà il tuo codice in modo significativo.

Answer 8

Solo per quello che si sa, il punto e virgola (;) non dovrebbe essere presente nel pulsante quando si chiama la funzione.

Così dovrebbe proprio questo aspetto: onclick="CapacityChart()"

poi tutto dovrebbe funzionare :)

Answer 9

Ho un codice di tasto di funzione-call-supporto intelligente:

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