Een HTML-knop gebruiken om een JavaScript-functie aan te roepen

Ik probeer een HTML-knop te gebruiken om een JavaScript-functie aan te roepen.

Hier is de code:

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

Het lijkt echter niet correct te werken. Is er een betere manier om dit te doen?

Hier is de link:http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html klik op het tabblad capaciteit in de sectie linksonder. De knop zou een waarschuwing moeten genereren als de waarden niet worden gewijzigd en zou een grafiek moeten produceren als u waarden invoert.

Antwoord 1, autoriteit 100%

Er zijn een paar manieren om gebeurtenissen af te handelen met HTML/DOM. Er is geen echte goede of foute manier, maar verschillende manieren zijn nuttig in verschillende situaties.

1: Er is een definitie in de HTML:

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

2: Het wordt toegevoegd aan de DOM-eigenschap voor de gebeurtenis in Javascript:

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

3: En er is een functie gekoppeld aan de gebeurtenishandler met behulp van Javascript:

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

Zowel de tweede als de derde methode staan inline/anonieme functies toe en beide moeten worden gedeclareerd nadat het element uit het document is geparseerd. De eerste methode is geen geldige XHTML omdat het attribuut onclick niet in de XHTML-specificatie staat.

De 1e en 2e methode sluiten elkaar uit, wat betekent dat het gebruik van de ene (de 2e) de andere (de 1e) overschrijft. Met de 3e methode kun je zoveel functies koppelen als je wilt aan dezelfde gebeurtenishandler, zelfs als de 1e of 2e methode ook is gebruikt.

Hoogstwaarschijnlijk ligt het probleem ergens in uw functie CapacityChart(). Na het bezoeken van uw link en het uitvoeren van uw script, wordt de functie CapacityChart() uitgevoerd en worden de twee pop-ups geopend (een is gesloten volgens het script). Waar je de volgende regel hebt:

CapacityWindow.document.write(s);

Probeer in plaats daarvan het volgende:

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

BEWERKEN
Toen ik je code zag, dacht ik dat je het speciaal voor IE schreef. Zoals anderen al hebben vermeld, moet u de verwijzingen naar document.allvervangen door document.getElementById. Hierna heb je echter nog steeds de taak om het script te repareren, dus ik zou aanraden om het eerst in IE te laten werken, omdat eventuele fouten die je maakt door de code te wijzigen om cross-browser te werken nog meer verwarring kan veroorzaken. Als het eenmaal werkt in IE, is het gemakkelijker om te zien of het in andere browsers werkt terwijl je de code bijwerkt.

Antwoord 2, autoriteit 8%

Ik zou zeggen dat het beter is om het javascript op een onopvallende manier toe te voegen…

Als u jQuery gebruikt, kunt u iets doen als:

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>
<input type="button" value="Capacity Chart" id="MyButton" >

Antwoord 3, Autoriteit 2%

Uw HTML en de manier waarop u de functie van de knop belt, ziet er correct uit.

Het probleem lijkt in de CapacityCount-functie. Ik krijg deze fout in mijn console op Firefox 3.5: “Document.all is undefined” Online 759 van Bendelcorp.js.

EDIT:

Lijkt op document.allis een ie-only ding en is een niet-standaard manier om toegang te krijgen tot de DOM. Als u document.getElementById(), zou het waarschijnlijk moeten werken. Voorbeeld: document.getElementById("RUnits").valuein plaats van document.all.Capacity.RUnits.value

Antwoord 4

Dit ziet er correct uit. Ik denk dat je je functie hebt gedefinieerd met een andere naam of in een context die niet zichtbaar is op de knop. Voeg een code toe

Antwoord 5

, zodat u weet, de puntkomma (; ) is niet bedoeld om er op de knop te staan ​​wanneer u de functie belt.

Dus het moet er gewoon als volgt uitzien: onclick="CapacityChart()"

Dan moet alles werken 🙂

Antwoord 6

Een groot probleem dat u hebt, is dat u de browser gebruikt sniffing zonder goede reden:

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
    }

Ik ben op Chrome, dus navigator.appNameZal niet Netscape. Ondersteunt Chrome document.all? Misschien, maar dan opnieuw misschien niet. En hoe zit het met andere browsers?

De versie van de Code op de NetscapeBranch moet aan elke browser de weg terugwerken naar Netscape Navigator 2 uit 1996, dus je moet waarschijnlijk gewoon bij die … behalve dat het gewonnen is ‘t werk (of is niet gegarandeerd om te werken) omdat je geen nameAttribuut op de input-elementen hebt opgegeven, zodat ze niet aan het formulier worden toegevoegd elementsarray als naam elementen:

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

Geef ze een naam en gebruik de elementsarray of (beter) gebruik

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

die zal werken aan alle moderne browsers – geen filiaal nodig. Om aan de zekerheid te zijn, vervangt u die snuiven voor een browserversie groter dan of gelijk aan 4 met een cheque voor getElementByIdondersteuning:

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

U wilt waarschijnlijk ook uw invoer valideren; zoiets als

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

zou helpen.

Antwoord 7

Uw code is niet op deze regel:

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

ik heb geprobeerd er doorheen te stappen met firebug en het mislukt daar. dat zou je moeten helpen het probleem op te lossen.

er wordt naar jQuery verwezen. je kunt het net zo goed in al deze functies gebruiken. het zal je code aanzienlijk opschonen.

Antwoord 8

Ik heb een intelligente functie-call-backing-knopcode:

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

Antwoord 9

EENVOUDIG ANTWOORD:

  onclick="functionName(ID.value);

Waarbij ID de ID van het invoerveld is.

Antwoord 10

domme manier:

onclick="javascript:CapacityChart();"

Je moet lezen over discrete javascript en een frameworks-bindmethode gebruiken om callbacks te binden aan dom-gebeurtenissen.