Witam wszystkich! Jestem jeszcze dość zielony w temacie JavaScript, jQuery, więc proszę o rozwiązanie, wskazówki na przystępnym poziomie. W szkole dostaliśmy zadanie, aby stworzyć prostą klawiaturę w JavaScript- małe litery, cyfry, kilka dodatkowych znaków np.!,?. Poniżej załączam to co udało mi się zrobić. Klawiaturę strona wyświetla poprawnie. Jednak za Chiny nie mogę wykombinować jak zrobić tak, żeby wyświetlało wynik tak jakbyśmy pisali na klawiaturze np. naciskamy guzik a - wypisuje a, następnie naciskamy b to dopisuje b i mamy ab. Proszę o wskazówki i porady na przystępnym poziomie. Z góry dziękuję i pozdrawiam.
<!DOCTYPE html>
<html lang="pl">
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var napis=" ";
function wypisz_0() { napis=napis + "0"; }
function wypisz_1() { napis=napis + "1"; }
function wypisz_2() { napis=napis + "2"; }
function wypisz_3() { napis=napis + "3"; }
function wypisz_4() { napis=napis + "4"; }
function wypisz_5() { napis=napis + "5"; }
function wypisz_6() { napis=napis + "6"; }
function wypisz_7() { napis=napis + "7"; }
function wypisz_8() { napis=napis + "8"; }
function wypisz_9() { napis=napis + "9"; }
function wypisz_q() { napis=napis + "q"; }
function wypisz_w() { napis=napis + "w"; }
function wypisz_e() { napis=napis + "e"; }
function wypisz_r() { napis=napis + "r"; }
function wypisz_t() { napis=napis + "t"; }
function wypisz_y() { napis=napis + "y"; }
function wypisz_u() { napis=napis + "u"; }
function wypisz_i() { napis=napis + "i"; }
function wypisz_o() { napis=napis + "o"; }
function wypisz_p() { napis=napis + "p"; }
function wypisz_a() { napis=napis + "a"; }
function wypisz_s() { napis=napis + "s"; }
function wypisz_d() { napis=napis + "d"; }
function wypisz_f() { napis=napis + "f"; }
function wypisz_g() { napis=napis + "g"; }
function wypisz_h() { napis=napis + "h"; }
function wypisz_j() { napis=napis + "j"; }
function wypisz_k() { napis=napis + "k"; }
function wypisz_l() { napis=napis + "l"; }
function wypisz_z() { napis=napis + "z"; }
function wypisz_x() { napis=napis + "x"; }
function wypisz_c() { napis=napis + "c"; }
function wypisz_v() { napis=napis + "v"; }
function wypisz_b() { napis=napis + "b"; }
function wypisz_n() { napis=napis + "n"; }
function wypisz_m() { napis=napis + "m"; }
function wypisz_pyt() { napis=napis + "?"; }
function wypisz_wykrz() { napis=napis + "!"; }
function wypisz_malp() { napis=napis + "@"; }
function wypisz_krop() { napis=napis + "."; }
function wypisz_spacja() { napis=napis + " "; }
function wypisz_dkrop() { napis=napis + ":"; }
function wypisz_proc() { napis=napis + "%"; }
function wypisz_lewy() { napis=napis + "("; }
function wypisz_prawy() { napis=napis + ")"; }
document.getElementById("wynik").innerHTML = napis;
</script>
</head>
<body>
<input type="submit" value="0" onclick="wypiszo_0()"/>
<input type="submit" value="1" onclick="wypisz_1()"/>
<input type="submit" value="2" onclick="wypisz_2()"/>
<input type="submit" value="3" onclick="wypisz_3()"/>
<input type="submit" value="4" onclick="wypisz_4()"/>
<input type="submit" value="5" onclick="wypisz_5()"/>
<input type="submit" value="6" onclick="wypisz_6()"/>
<input type="submit" value="7" onclick="wypisz_7()"/>
<input type="submit" value="8" onclick="wypisz_8()"/>
<input type="submit" value="9" onclick="wypisz_9()"/>
<br></br>
<input type="submit" value="q" onclick="wypisz_q()"/>
<input type="submit" value="w" onclick="wypisz_w()"/>
<input type="submit" value="e" onclick="wypisz_e()"/>
<input type="submit" value="r" onclick="wypisz_r()"/>
<input type="submit" value="t" onclick="wypiszt_()"/>
<input type="submit" value="y" onclick="wypisz_y()"/>
<input type="submit" value="u" onclick="wypisz_u()"/>
<input type="submit" value="i" onclick="wypisz_i()"/>
<input type="submit" value="o" onclick="wypisz_o()"/>
<input type="submit" value="p" onclick="wypisz_p()"/>
<br></br>
<input type="submit" value="a" onclick="wypisz_a()"/>
<input type="submit" value="s" onclick="wypisz_s()"/>
<input type="submit" value="d" onclick="wypisz_d()"/>
<input type="submit" value="f" onclick="wypisz_f()"/>
<input type="submit" value="g" onclick="wypisz_g()"/>
<input type="submit" value="h" onclick="wypisz_h()"/>
<input type="submit" value="j" onclick="wypisz_j()"/>
<input type="submit" value="k" onclick="wypisz_k()"/>
<input type="submit" value="l" onclick="wypisz_l()"/>
<br></br>
<input type="submit" value="z" onclick="wypisz_z()"/>
<input type="submit" value="x" onclick="wypisz_x()"/>
<input type="submit" value="c" onclick="wypisz_c()"/>
<input type="submit" value="v" onclick="wypisz_v()"/>
<input type="submit" value="b" onclick="wypisz_b()"/>
<input type="submit" value="n" onclick="wypisz_n()"/>
<input type="submit" value="m" onclick="wypisz_m()"/>
<br></br>
<input type="submit" value="!" onclick="wypisz_pyt()"/>
<input type="submit" value="?" onclick="wypisz_wykrz()"/>
<input type="submit" value="@" onclick="wypisz_malp()"/>
<input type="submit" value="." onclick="wypisz_krop()"/>
<input type="submit" value="SPACE" onclick="wypisz_spacja()"/>
<input type="submit" value=":" onclick="wypisz_dkrop()"/>
<input type="submit" value="%" onclick="wypisz_proc()"/>
<input type="submit" value="(" onclick="wypisz_lewy()"/>
<input type="submit" value=")" onclick="wypisz_prawy()"/>
<div id="wynik"> </div>
</body>
</html>
