kalkulator w javascript

pytanie zadane 9 kwietnia 2017 w JavaScript przez Geek1234 Użytkownik (570 p.)
edycja 9 kwietnia 2017 przez Geek1234

Mógłby ktoś mi pomóc kalkulatorem bo chcę dwa razy kliknąć to mi nie wychodzi.

<html lang="pl">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript">
var l1="";
var liczba=new Array(16);
liczba[0]="0";
liczba[1]="1";
liczba[2]="2";
liczba[3]="3";
liczba[4]="4";
liczba[5]="5";
liczba[6]="6";
liczba[7]="7";
liczba[8]="8";
liczba[9]="9";
liczba[10]="/";
liczba[11]="*";
liczba[12]="-";
liczba[13]="+";
liczba[14]="=";
liczba[15]=".";
function start()
{
	for(var i=0;i<=15;i++)
	{
		var l="lit" + i;
      l1=l1+'<div class="litera" onclick="spr('+i+')" id="'+l+'">'+liczba[i]+'</div>';
      if((i+1) % 4==0)
      
       l1=l1+'<div style="clear:both;"></div>'
     }
	document.getElementById("alfabet").innerHTML=l1;
}
window.onload=start;
function spr(wynik)
{
  var l2=new Array(2);

  l2[0]=parseInt(liczba[16]);
  l2[1]=parseInt(liczba[16]);
  wynik=l2[0]+l2[1];
	document.getElementById("wynik").innerHTML=wynik;
  return wynik;
}

</script>
</head>
<body>
<div id="container">
	<div id="alfabet"></div>
<div id="wynik"></div>
<div id="l1""></div>
</div>
</body>
</html>

komentarz 9 kwietnia 2017 przez jpacanowski VIP (101,940 p.)

Ładne spagetti... HTML, CSS, JS... all-in-one, i jeszcze bonusik onclick... Nie chcę się wymądrzać, ale zmień źródło z którego uczysz się JS.

komentarz 9 kwietnia 2017 przez Magicone Nałogowiec (45,100 p.)

Jaki cel ma funkcja spr? Bo nie widzę wewnątrz niej nic logicznego.

komentarz 9 kwietnia 2017 przez Geek1234 Użytkownik (570 p.)

wypisanie wyniku.

komentarz 9 kwietnia 2017 przez Magicone Nałogowiec (45,100 p.)

Wyniku czego? Bo odwołujesz się do indeksów tablicy, który de facto nie istnieje i próbujesz coś z nimi zrobić.

komentarz 9 kwietnia 2017 przez Geek1234 Użytkownik (570 p.)


function spr(wynik) { document.getElementById("wynik").innerHTML=wynik;
 return wynik; 
}

Chcę że jak kliknę np 2 i później chcę kliknąć to zmienia mi liczbę np:23456 żeby taką liczbę wypisało.

komentarz 9 kwietnia 2017 przez Tomek Sochacki Ekspert (227,510 p.)

var liczba=new Array(16);
liczba[0]="0";
liczba[1]="1";
liczba[2]="2";
liczba[3]="3";
liczba[4]="4";
liczba[5]="5";
liczba[6]="6";
liczba[7]="7";
liczba[8]="8";
liczba[9]="9";
liczba[10]="/";
liczba[11]="*";
liczba[12]="-";
liczba[13]="+";
liczba[14]="=";
liczba[15]=".";

co to za twór potworek :)? Nie lepiej zastosować:

var liczba = ['0', '1', '2', '3', ...]

Polecam również poczytać o hoistingu deklaracji i zasięgu zmiennych var, gdyż z kodu wnioskuję, że traktujesz var jako deklarację zmiennej w zakresie blokowym co nie jest prawdą w JavaScript, chyba, że użyłbyś let/const.

komentarz 10 kwietnia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

liczba[0]="0";

liczba[1]="1";

liczba[2]="2";

liczba[3]="3";

liczba[4]="4";

liczba[5]="5";

liczba[6]="6";

liczba[7]="7";

liczba[8]="8";

liczba[9]="9";

liczba[10]="/";

liczba[11]="*";

liczba[12]="-";

liczba[13]="+";

liczba[14]="=";

liczba[15]=".";

Równie dobrze możesz to ustawić jako atrybut html.

<button id="buttonClass" data-attr="2">
</button>
<button id="buttonClass" data-attr="3">
</button>
<button id="buttonClass" data-attr="4">
</button>
<button id="buttonClass" data-attr="5">
</button>
<button id="buttonClass" data-attr="6">
</button>
<button id="buttonClass" data-attr="7">
</button>

Jak z czytać z js.

var buttonList= document.QuerySelectorAll("#buttonClass");
// Chce zczytac konkretna wartosc
currentButton = buttonList.item(2);
console.log(currentButton.attr)  // Bodajze to bedzi 3.

Jak wywołowac listenera:

var buttons = document.QuerySelectorAll("#button");
buttons.forEach(
(button) => {
button.addEventListener("click", function(evt){doSomething(evt);}); 
}

);

function doSomething(evt){
console.log(evt.attr) // Wyswietlam wartosc atrybutu z konkretnego obiektu
}

komentarz 10 kwietnia 2017 przez Geek1234 Użytkownik (570 p.)

dzięki ale ja nie oczekiwałem zrobionego skryptu ,bardziej mi chodziło o podpowiedź ;)

2 odpowiedzi

odpowiedź 10 kwietnia 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Pojawiło się parę pomysłów na obsługę tablic i DOM, ale myślę, że warto byłoby nieco uporządkować dwie kwestie, tak dla przyszłych czytelników początkujących w HTML i JS.

Po pierwsze błędem jest nadawanie tego samego ID dla kilku elementów. Nie wynika to tak na prawdę z tzw. dobrych praktyk, lecz z faktu, do czego służy element ID. Otóż przeglądarki indeksują wewnętrznie elementy po ID, dlatego jedną z najszybszych metod dostępu do DOM jest właśnie metoda getElementById, gdyż odnosi się ona do elementów zaindeksowanych. Nadając wielokrotnie to samo ID zaburzamy sens indeksacji.

I druga kwestia, a mianowicie zastosowanie metody forEach na obiekcie zwróconym przez metodę querySelectorAll. Jest to oczywiście poprawne, jednakże należy zdawać sobie sprawę jakie faktycznie obiekty zwracają metody związane z obsługą DOM.

var a = document.getElementsByTagName('p'),
     b = document.querySelectorAll('p'),
     c = [1,2,3]; //zwykła tablica

typeof a; //'object'
typeof b; //'object'
typeof c; //'object'

typeof a.forEach; //'undefined'  metoda nie istnieje!
typeof b.forEach; //'function'  oki, metoda istnieje
typeof c.forEach; //'function'

//ale a i b to nie "zwykłe" tablice:
typeof a.filter; //'undefined'
typeof b.filter; //'undfined'
typeof c.filter; //'function'

Object.getPrototypeOf(a).toString(); //'[object HTMLCollection]'
Object.getPrototypeOf(b).toString(); //'[object NodeList]'
Object.getPrototypeOf(c).toString(); //''
Object.prototype.toString.call(c); //'[object Array]'

Jak widać tylko zmienna c jest "zwykłą" tablicą JavaScript ze wszystkimi metodami "tablicowymi". Zmienna b, której wartość "stworzyła" metoda querySelectorAll posiada metodę forEach dziedziczoną prototypowo po NodeList, ale nie posiada wielu innych metod tablicowych jak map, sort, filter, reduce itp. Zmienna a z kolei posiada właściwości dziedziczone prototypowo po HTMLCollection, lecz obiekt ten nie posiada już metody forEach.

Z tych względów należy świadomie dobierać metody pobierające referencje do DOM w zależności nie tylko od rodzaju selektora, ale również od tego co chcemy z tymi elementami dalej robić. Rozwiązaniem uniwersalnym jest przekształcenie zwracanego obiektu w "typową" tablicę, który odziedziczy metody po Array.prototype:

//Metoda stosowana dawniej:
var a = Array.prototype.slice.call(document.querySelectorAll('p'));

//Metoda ES6:
var b = [...document.querySelectorAll('p')];

typeof a.filter; //'function'
typeof b.filter; //'function'

Od tej chwili tablice a i b zawierają referencje do elementów DOM, ale dziedziczą prototypowo po Array.prototype wszystkie metody "tablicowe" i nie musimy się już martwić i zastanawiać dlaczego raz forEach (i inne metody) działa dobrze, a za chwilę wyrzuca błąd...