✔ Prototyp-countUp countDown - onmousedown

C

cryo

Mitglied
Als erstes mal das schon vorhandene Script ...

Im Head:
Code: 
function CL_CntUpDown(oInput,oBtnUp,oBtnDown){
    this._oInput    = document.getElementById(oInput);
    this._oBtnUp    = document.getElementById(oBtnUp);
    this._oBtnDown  = document.getElementById(oBtnDown);
    this._timer     = 100;
    this._cntMin    = 0;
    this._cntMax    = 0;
}

CL_CntUpDown.prototype.setTimer = function(fMs){
    this._timer = fMs;
};
CL_CntUpDown.prototype.setMinimum = function(fMin){
    this._cntMin = ( fMin>=0 )?fMin:0;
    this._oInput.value = this.getMinimum();
};
CL_CntUpDown.prototype.setMaximum = function(fMax){
    this._cntMax = ( fMax>=0 )?fMax:0;
};
CL_CntUpDown.prototype.setValue = function(fVal){
    this._oInput.value = this.chkValue(fVal);
};

CL_CntUpDown.prototype.getTimer = function(){
    return this._timer;
};
CL_CntUpDown.prototype.getMinimum = function(){
    return this._cntMin;
};
CL_CntUpDown.prototype.getMaximum = function(){
    return this._cntMax;
};
CL_CntUpDown.prototype.getValue = function(){
    return this._oInput.value;
};
CL_CntUpDown.prototype.chkValue = function(fVal){
    if( fVal>0 ){
        if( fVal<this.getMinimum() ){
            return this.getMinimum();
        }else if( this.getMaximum()>0 && fVal>this.getMaximum() ){
            return this.getMaximum();
        }else{
            return fVal;
        }
    }else{
        return 0;
    }
};

CL_CntUpDown.prototype.cntStop = function(){
    alert('Stop');
},
CL_CntUpDown.prototype.cntStartUp = function(){
    var tmpVal      = this.getValue();
    var tmpTimer    = this._timer;
    var tmpState    = this._state;
    var newVal      = CL_ValUp(tmpVal, tmpTimer, tmpState );
    this._oInput.value = newVal; 
},
CL_CntUpDown.prototype.cntStartDown = function(){
    alert('Start Down');
}
Im Body:
Code: 
<input style="width: 100px; height: 19px; font-size: 9px;" name="fld_cnt" id="fld_cnt" /></td>
<img src="sy_plus.gif" width="13" height="11" border="0" name="btn_cntPlus" id="btn_cntPlus" alt="erh&ouml;hen" title="" />
<img src="sy_minus.gif" width="13" height="10" border="0" name="btn_cntMinus" id="btn_cntMinus" alt="verringern" title="" />
<script language="JavaScript" type="text/javascript">
<!--
var myCntUpDown = new CL_CntUpDown('fld_cnt','btn_cntPlus','btn_cntMinus');
myCntUpDown.setTimer(1000);
myCntUpDown.setMinimum(0);
myCntUpDown.setMaximum(200);
myCntUpDown.setValue(11);
//-->
</script>

'myCntUpDown.setTimer(1000);'
Hier sollte man bestimmen können nach wieviel Sekunden (Millisekunden) das Zahl im Feld erhöht bzw. verringert wird.

'myCntUpDown.setMinimum(0);'
Hier kann ein Minimum bestimmt werden was nicht unterschritten wird (werden darf), sei es durch direkte Eingabe oder durch den Button für's Verringern der Anzahl.

'myCntUpDown.setMaximum(200);'
Hier kann ein Maximum bestimmen was nicht überschritten wird (werden darf). Sei es durch direkte Eingabe oder durch den Button für's Vergrößern der Anzahl.

'myCntUpDown.setValue(11);'
Dieser Wert wird beim Initialisieren des Ganzen voreingetragen, sozusagen der schon vorhandene Value des Feldes (wenn existent).

Ziel
Angedacht ist es die ID's eines Inputfeldes und zweier Buttons (Up & Down) an das Script zu übergeben.
Bei 'onMouseDown' auf die Buttons soll jeweils die Anzahl erhöht bzw. verringert werden die in dem Feld steht, wobei dann natürlich der jeweilige Maxi- & Miniumwert nicht über- oder unterschritten werden kann (darf). So lange wie die Maus 'onMouseDown' ist soll das Ganze zählen. Bei 'onMouseUp' sollte der Vorgang dann dementsprechend gestoppt werden.
Die Geschwindigkeit des Hoch- bzw. Runterzählens sollte eigentlich anhand des Parameters 'setTimer(...)' einstellbar sein.

Beim Initialiseren des Scriptes sollte dann anhand der übergebenen Button-Ids die entsprechende Aktion per 'attachEvent' usw. an die Buttons im Dokument anhängt werden.
Ich hatte eine Funktion mit eingebaut die eigentlich genau das 'attachEvent' erledigen sollte, aber die wollte vorn und hinten nicht, deswegen habe ich sie an dieser Stelle erst einmal rausgenommen um nicht Eure Vorschläge bzw. Hinweise zu beeinflussen ;).

Das Problem,
vor dem ich stehe ist, das ich momentan eine komplette Denkblockade habe und absolut nicht weiterkomme bzw. weis.

Please help me :confused:
 
Naja...attachEvent() ist wenig empfehlenswert(falls es nicht nur im IE laufen soll).

So sollte es ausreichen:
Code: 
this._oBtnUp.onmouseover=function(){/*deine Funktion*/}
 
Erstmal Danke für Deine Antwort ...

Ich habe jetzt zusätzlich noch eine Funktion 'init()' eingesetzt.
Code: 
CL_CntUpDown.prototype.init = function(){
  this._oBtnUp.onmousedown =  function(){ this.cntStartUp(); }
  this._oBtnUp.onmouseup =  function(){ this.cntStop(); }
  this._oBtnDown.onmousedown =  function(){ this.cntStartDown(); }
  this._oBtnDown.onmouseup =  function(){ this.cntStop(); }
};

In der Seite dann auch logischerweise noch dazu:
Code: 
myCntUpDown.init();

Leider kommen jetzt immer die Fehlermeldungen:
"this.cntStartUp is not a function"
"this.cntStop is not a function"

Ich benötige doch an dieser Stelle die Referenzierung mit 'this', oder denke ich da falsch?
Hat da jemand ne Lösung parat ... Bitte :(
 
Zuletzt bearbeitet:
cryo hat gesagt.:
Ich benötige doch an dieser Stelle die Referenzierung mit 'this', oder denke ich da falsch?
Hat da jemand ne Lösung parat ... Bitte :(
Zum Vergrößern anklicken....

Jo..da liegst du falsch.
Mit "this" beziehst du dich in dem Fall nicht auf das erstellte Objekt, sondern auf den Button selbst.
Code: 
this._oBtnUp.onmousedown =  function(){ this.cntStartUp(); }
ist bspw. gleichbedeutend mit
Code: 
<img src="sy_plus.gif" id="btn_cntPlus" alt="erh&ouml;hen" onmousedown = "this.cntStartUp();" />
..und kann so natürlich nicht funktionieren.

Du musst dort das Objekt über seinen Namen refernzieren, also myCntUpDown.cntStartUp();
 
Sven Mintel hat gesagt.:
Du musst dort das Objekt über seinen Namen refernzieren, also myCntUpDown.cntStartUp();
Zum Vergrößern anklicken....

Nun ja, an dieser Stelle weiss ich ja eigentlich nicht welches Objekt der User in seiner Seite angelegt hat. Das kann ja immerhin abweichen von 'myCntUpDown'.

Demzufolge müsste es doch eigentlich gehen wenn ich im Aufruf des Ganzen (im Dokument) ca. folgendes hinzufüge, was der User in dem Fall mit angeben muss.
Code: 
myCntUpDown.init('myCntUpDown');

Muss ich mal Testen ...

MfG
 
Du solltest bereits, wenn du das Objekt erstellst, diesem als Parameter seinen Namen mitgeben und als Eigenschaft speichern.(den Namen per Hand innerhalb des Objektes einzutragen bringt dir nichts, da geht dir die Flexibilität verloren).
Hört sich komisch an...so ein Objekt weiss von alleine nicht, wie es heisst :-)
 
Ich habe jetzt die 'init-Funktion' angepasst:
Code: 
CL_CntUpDown.prototype.init = function(fObjName){
  this._oBtnUp.onmousedown    = function(){ fObjName.cntStartUp(); }
  this._oBtnUp.onmouseup      = function(){ fObjName.cntStop(); }
  this._oBtnDown.onmousedown  = function(){ fObjName.cntStartDown(); }
  this._oBtnDown.onmouseup    = function(){ fObjName.cntStop() }
};

Im Dokument selbst:
Code: 
var myCntUpDown = new CL_CntUpDown('fld_cnt','btn_cntPlus','btn_cntMinus');
myCntUpDown.setTimer(1000);
myCntUpDown.setMinimum(0);
myCntUpDown.setMaximum(200);
myCntUpDown.setValue(11);
myCntUpDown.init(myCntUpDown);

Jetzt führt er endlich bei Betätigung der Buttons die jeweiligen Alert-Anweisungen aus.
Puuh ... Dank Dir :)

Jetzt muss ich mir nur noch Gedanken machen wie ich den weiteren Ablauf programmiere.
 
Ich nochmal ...

Bei obiger funktionierender Variante übergebe ich ja ein Objekt und nicht den Namen als String. Hast Du eventuell eine Variante auf Lager wo ich den Objektnamen als String übergebe und korrekt auf das Objekt mit diesem Namen zugreifen kann?

Im Moment mache ich dies ja so:
Code: 
fObjName.cntStartUp();
Wenn ich aber den Namen als String an die Funktion übergebe dann geht dort nix mehr, und mir fällt auch nicht ein wie ich obigen Code so schreiben könnte das es auch mit dieser Stringübergabe funktioniert.
 
Probiers mal mit diesen Änderungen(die wichtigen Sachen sind fett)
Code: 
<script type="text/javascript">
<!--
function CL_CntUpDown(oInput,oBtnUp,oBtnDown,strName){
    this._oInput    = document.getElementById(oInput);
    this._oBtnUp    = document.getElementById(oBtnUp);
    this._oBtnDown  = document.getElementById(oBtnDown);
    this._name    = strName;
    this._timer     = 100;
    this._cntMin    = 0;
    this._cntMax    = 0;
}


/* ...... */



CL_CntUpDown.prototype.init = function(){
  this._oBtnUp.onmousedown    = new Function('f1',this._name +'.cntStartUp()');
  this._oBtnUp.onmouseup      = new Function('f2',this._name +'.cntStop()');
  this._oBtnDown.onmousedown  = new Function('f3',this._name +'.cntStartDown()');
  this._oBtnDown.onmouseup    = new Function('f4',this._name +'.cntStop()');
};
//-->
</script>

<!-- ...-->

<script type="text/javascript">
<!--
var myCntUpDown = new CL_CntUpDown('fld_cnt','btn_cntPlus','btn_cntMinus','myCntUpDown');
myCntUpDown.setTimer(1000);
myCntUpDown.setMinimum(0);
myCntUpDown.setMaximum(200);
myCntUpDown.setValue(11);
myCntUpDown.init(myCntUpDown);
//-->
</script>
...wie du erkennst, wird beim Erstellen des Objektes ein 4.Parameter übergeben(rot)...sein Name.
Daraus wird dem Objekt eine Eigenschaft zugewiesen(blau)... es kennt seinen Namen nun auch selbst....und man kann selbigen beim Zuweisen der Funktionen heranziehen.
 
Bingo es funktioniert. Somit steht mir der Name global in diesem Script zur Verfügung, egal in welcher dazugehörender Funktion. Ich hatte bis soeben so etwas:
Code: 
var tmpName = this._oName;
this._oBtnUp.onmousedown    = function(){ window[tmpName].cntStartUp(); }
this._oBtnUp.onmouseup      = function(){ window[tmpName].cntStop(); }
this._oBtnDown.onmousedown  = function(){ window[tmpName].cntStartDown(); }
this._oBtnDown.onmouseup    = function(){ window[tmpName].cntStop(); }
Ging auch ..., aber die Variante von Dir sieht mir doch syntaktisch und funktionell korrekter aus :).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück