• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] schwerwiegendes Problem mit meinen Script

C

canbiz

New member
Hallo Leute.

ich habe 2 markante Fehler die mir gerade aufgefallen sind.
1. wenn man / rechnet, springt der weg (Buchstaben und Zahlen werden doppelt geschrieben??!!)
2. man kann den Rechner ohne Probleme mit den Keyboard nehmen, aber nicht mit wie es eigentlich sein soll, mit der Maus ('undefined')

Hier ist mal ein JSFiddle:
Edit fiddle - JSFiddle

Und hier der Code (ohne CSS):
HTML:
HTML: 
	<body>
		<div id="calculator">
			<input id="display" class="input" />
			<div id="numbers">
				<button>7</button>
				<button>8</button>
				<button>9</button>
				<button>4</button>
				<button>5</button>
				<button>6</button>
				<button>1</button>
				<button>2</button>
				<button>3</button>
				<button class="colspan">0</button>
				<button>.</button>
			</div>
			<div id="operators">
				<button>/</button>
				<button>←</button>
				<button>*</button>
				<button>C</button>
				<div id="operator" style="float:left;width:37px;">
					<button>-</button>
					<button>+</button>
				</div>
			</div>
			<button class="rowspan">=</button>
		</div>
	</body>



JQuery:
Code: 
		 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		 <script type="text/javascript">
		$( document ).ready(function() {
		 	$("#numbers").children("button").each(function(){
				$(this).attr("id","no"+$(this).text());
				$(this).attr("class","Show");
				$(this).attr("value",""+$(this).text());
				$(this).attr("type","button");
			});
			$("#operators").children("button").each(function(){
				$(this).attr("id","op"+$(this).text());
				$(this).attr("class","operators operand");
				$(this).attr("value",""+$(this).text());
				$(this).attr("type","button");
			});
				
			$("#operator").children("button").each(function(){
				$(this).attr("id","op"+$(this).text());
				$(this).attr("class","operators operand");
				$(this).attr("value",""+$(this).text());
				$(this).attr("type","button");
			});
				
			$('.rowspan').attr("id","Calculate");
			$('.rowspan').attr("type", "button");
			$('.rowspan').attr("class", "equal");
			$('.colspan').attr("class", "zerokey");
			
			
			$(function(){
			//Calc Object with display,clear,doCal methods
			var Calc={
				display:function(v){
					$("#display").val(v);
				},
				clear:function(){
					$("#display").val(" ");
				},
				doCal:function(val){
				var result="";
				var dtemp=$("#display").val();
				if(dtemp=="0"){
					this.clear();
					result=val; 
				}else if(val=="c"){
					this.clear();
				}else if(val=="="){
					result=eval(dtemp);
				}else{
					result=dtemp+val;
				}
					this.display(result);
				}
			}
				//Keyboard key press event.
				$("body").keypress(function(e){
					Calc.doCal(String.fromCharCode(e.which));
				});
				//calc UI click events
				$('#calculator').click(function(e){
					e.preventDefault();
					Calc.doCal(this.value);
				});
			});
		});
		 </script>


Wisst ihr woran es liegt?

€: Sorry hab (falls vorhanden) keine Spoiler gefunden :/
 
1: Warum machst du einen neuen Thread für deinen Taschenrechner auf?

2: Welchen Wert (value) soll denn dein div-Kontainer, nach einem Mausklick auf selbigen, liefern?
 
1. weil das ja ne komplett andere Frage war, nun ist er soweit fertig nur noch das o.g Problem.

2. Bei einen Klick auf 0-9 soll diese im Display erscheinen und dann mit einen Click auf z.B. + soll diese mit der 2. value addiert werden.
Tastatur klappt ja, nur Mausklick nicht.
 
zu 2: Ist ja auch korrekt, weil du den Mausklick auch nicht auf 0-9 usw. registrierst, sondern auf deinen div-Kontainer mit der ID calculator und dieser hat kein value-Attribut!
 
Ja da hast du recht ist mir jetzt im Firebug aufgefallen

Code: 
<input id="display" class="input">
<div id="numbers">
<button id="no7" class="Show" value="7" type="button">7</button>
<button id="no8" class="Show" value="8" type="button">8</button>
<button id="no9" class="Show" value="9" type="button">9</button>
<button id="no4" class="Show" value="4" type="button">4</button>
<button id="no5" class="Show" value="5" type="button">5</button>
<button id="no6" class="Show" value="6" type="button">6</button>
<button id="no1" class="Show" value="1" type="button">1</button>
<button id="no2" class="Show" value="2" type="button">2</button>
<button id="no3" class="Show" value="3" type="button">3</button>
<button id="no0" class="Show" value="0" type="button">0</button>
<button id="no." class="Show" value="." type="button">.</button>
</div>
<div id="operators">
<button id="op/" class="operators operand" value="/" type="button">/</button>
<button id="op←" class="operators operand" value="←" type="button">←</button>
<button id="op*" class="operators operand" value="*" type="button">*</button>
<button id="opC" class="operators operand" value="C" type="button">C</button>
<div id="operator" style="float:left;width:37px;">
</div>
<button id="Calculate" class="equal" type="button">=</button>

mit was für einer Value muss ich denn das belegen? War eigentlich der Meinung, dass ein div ringsherum reicht..
 
canbiz schrieb:
mit was für einer Value muss ich denn das belegen?
Zum Vergrößern anklicken....
Mit der, die auch dein geklickter Button hat.


canbiz schrieb:
War eigentlich der Meinung, dass ein div ringsherum reicht..
Zum Vergrößern anklicken....
Wie du aber an deinem Beispielcode aus Beitrag #5 siehst, steht value="..." aber nur bei deinen Buttons und nicht bei dem DIV wie du vermutest.

Aber da du ja jetzt sowieso wieder ein anderes Taschenrechner-Skript verwendest, bekräftigt sich die Frage von kkapsner nur umso mehr:
kkapsner schrieb:
Warum willst du eine ID zuweisen, wenn du dann sowieso schon eine Referenz auf den Button hast?
Zum Vergrößern anklicken....
Dieser hat dann eher was in diese Richtung gemeint (dein JsFiddle etwas entjquerysiert):
Code: 
$('#numbers').children('button').each(function () {
	this.className += ' Show';
	this.type = 'button';
	this.value = this.childNodes[0].nodeValue;
	this.onclick = function () {
		Calc.doCal(this.value);
	};
});
$('#operators').children('button').each(function () {
	this.className += ' operators operand';
	this.type = 'button';
	this.value = this.childNodes[0].nodeValue;
	this.onclick = function () {
		Calc.doCal(this.value);
	};
});

$('#operator').children('button').each(function () {
	this.className += 'operators operand';
	this.type = 'button';
	this.value = this.childNodes[0].nodeValue;
	this.onclick = function () {
		Calc.doCal(this.value);
	};
});

$('.rowspan')[0].className += ' equal';
$('.rowspan')[0].type = 'button';
$('.rowspan')[0].value = $('.rowspan')[0].childNodes[0].nodeValue;
$('.rowspan')[0].onclick = function () {
	Calc.doCal(this.value);
};
$('.colspan')[0].className += ' zerokey';


//Keyboard key press event.
$(document).keypress(function (e) {
	Calc.doCal(String.fromCharCode(e.which));
});
 
canbiz schrieb:
1. wenn man / rechnet, springt der weg
Zum Vergrößern anklicken....
Das liegt daran, dass der Browser darauf selbst eine Shortcut hat. Das musst du mit e.preventDefault() verhindern:
Code: 
				$("body").keypress(function(e){
					e.preventDefault();
					Calc.doCal(String.fromCharCode(e.which));
				});

Man könnte die Buttonklicks natürlich schon über Eventdelegation machen:
Code: 
				$('#calculator').click(function(e){
					e.preventDefault();
					Calc.doCal(e.target.value);
				});
			});
- aber hier nicht nötig und unschön.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben