Problém slice() u textarea

Fórum › JavaScript, AJAX, jQuery

Toto vlákno bylo označeno za vyřešené — příspěvek s řešením.

Carduus0

Návštěvník

3. 8. 2011 #1

Dobrý den,
potřeboval jsem, aby se po stisknutí tlačítka smazalo poslední písmeno řetězce. Využil jsem metody slice() takto:

function smaz(priklad) {
		priklad.value = priklad.value.slice(0, -1);
}

Bohužel mi ale poté nejde psát do textarea dále...Myslím si, že vím čím to je. Tohle vlastně řekne, že textarea bude obsahovat pouze toto natrvalo... Nevíte jak to opravit?

Nahlásit jako SPAM

IP: 109.235.1.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

3. 8. 2011 #2

To by mělo normálně fungovat. V jakým prohlížeči ti to dělá? Možná by se taky hodila větší ukázka kódu.

Nahlásit jako SPAM

IP: 83.240.95.–

Carduus0

Návštěvník

3. 8. 2011 #3

V chromu a firefoxu nefunguje.....v IE ano... a v mobilním prohlížeči (ve kterém hlavně potřebuji, aby to fungovalo) mi to nějak "blbne" Napíši 55, smažu 5tku a když poté chci napsat 8čku , napíše mi to tohle : 558 Neexistuje ještě jiné řešení?
Písmena zapisuji takto:

element = document.getElementById("text");
element.appendChild(document.createTextNode("a"));

Nahlásit jako SPAM

IP: 109.235.1.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

3. 8. 2011 #4

Zkusil jsem to v Chrome, Opeře a Firefoxu a všude to funguje. To by opravdu chtělo link na stránku nebo víc kódu.

Nahlásit jako SPAM

IP: 83.240.95.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

3. 8. 2011 #5

Jinak k tomu jinému řešení:

element.value += 'a';

priklad.value = priklad.value.substring(0, priklad.value.length - 1);

Nahlásit jako SPAM

IP: 83.240.95.–

Carduus0

Návštěvník

3. 8. 2011 #6

Dobře, tady je HTML (je to pouze to, co se toho týká) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body><textarea id="text" style="font-size: 20px" cols=30 rows=4 name="textareal" READONLY></textarea>
<img src="images/kalkulacka_c.png" onclick="smaz(document.getElementById('text'))">
</body>

// JavaScript :
function smaz(priklad) {
  priklad.value = priklad.value.slice(0, -1);
}

Pokud vám ani toto nepomůže odhalit chybu, mohu kompletní kody nahrát na google documents.

edit:// koukám, že už jste mi mezitím napsal jiné řešení...zkusím a uvidím snad tohle bude fungovat tak, jak chci

edit2:// chová se to úplně stejně jako první verze :(

edit3:// tak tady je to na google document HTML: https://docs.google.com/leaf?id=0By5NcTRfMYNeMjk2NWFiMWItMTU1Zi00YjAyLWE4ZDYtMmQwNmNmOGRhNDI4&hl=en_US

JS(ten jsem doslova "zprasil" nevím, jestli se v tom někdo vyzná: https://docs.google.com/leaf?id=0By5NcTRfMYNeN2E5YTcyMDgtZDViOS00YzgyLTk5NDctZTE0ZTQ3MjAwMjNl&hl=en_US

Nahlásit jako SPAM

IP: 109.235.1.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

3. 8. 2011 #7

Sorry, the page (or document) you have requested is not available.

Nahlásit jako SPAM

IP: 83.240.95.–

Carduus0

Návštěvník

3. 8. 2011 #8

Áha tak to jsem zase něco popletl.. Asi k těm dokumentům mohu přistupovat pouze já. Takže je to tady :
http://www.michprev.wz.cz/problem/problem.zip

Nahlásit jako SPAM

IP: 109.235.1.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

3. 8. 2011 #9

No tak s kódem pro kalkulačku na 900 řádků se asi ani nebudeme zabývat . Radši ti rovnou ukážu, jak by to podle mě mělo správně vypadat, je to na 200 řádků včetně html a komentářů. Cokoliv ti nebude jasný, tak se klidně ptej.

<!doctype html>
<html>
    <head>
        <title>
            Kalkulačka
        </title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <script
            src="http://code.jquery.com/jquery-1.6.2.min.js"
            type="text/javascript"
        ></script>
    </head>
    <script type="text/javascript">
        calc = {
            
            // Skupiny tlačítek
            groups: {
                digit: '0123456789()',
                operator: '+-*/',
                dot: '.',
                calculate: '=',
                backspace: 'c',
                reset: 'r'
            },
            
            // Zjistí, do které skupiny tlačítko patří
            group: function(button) {
                for (id in this.groups)
                    if (this.groups[id].indexOf(button) != -1)
                        return id;
            },            

            // Zobrazí text na displayi nebo vrátí jeho hodnotu
            display: function(text) {
                if (typeof text != 'undefined')
                    this.$display.val(text);
                else
                    text = this.$display.val();
                return text;
            },            
            
            // Přidá text na konec
            add: function(button) {
                var value = this.display();
                if (value[0] == '=' || (this.group(button) == 'digit' && value == '0'))
                    value = '';
                this.display(value + button);
                this.last = $.trim(button);
            },
            
            // Umaže jeden znak
            backspace: function() {
                var value = $.trim(this.display());
                if (value[0] == '=')
                    value = '';
                else {
                    value = $.trim(value.slice(0, -1));
                    if (this.group(value[value.length - 1]) == 'operator')
                        value += ' ';
                }
                this.display(value || '0');    
            },
            
            // Vynuluje display
            reset: function() {
                this.display('0');
            },
            
            // Provede výpočet
            calculate: function() {
                var value = this.display();
                if (value[0] != '=')
                    try {
                        var calculation = String(eval(value));
                        this.display('= ' + calculation.replace('Infinity', 'nekonečno'));
                    }
                    catch(e) {
                        alert('Zadání nelze vypočítat.');
                    }
            },

            // Zpracování stisku tlačítka
            press: function(button) {
                group = this.group(button);
                switch (group) {
                    
                    // Čísla a závorky
                    case 'digit':
                        this.add(button);
                        break;
                    
                    // Tečka
                    case 'dot':
                        var words = this.display().split(' ');
                        if (words[words.length - 1].indexOf('.') == -1)
                            this.add(button);
                        break;
                    
                    // Operátory
                    case 'operator':
                        if (this.display()[0] != '=' && this.group(this.last) != 'operator')
                            this.add(' ' + button + ' ');
                        break;
                    
                    // Backspace, reset, výpočet
                    case 'backspace':
                    case 'reset':
                    case 'calculate':
                        this[group]();
                }
                
            },
            
            // inicializace
            init: function() {
                var self = this;
                this.$display = $('#calc input');
                this.reset();

                // Stisknutí tlačítka
                $('#calc button').click(function() {
                    self.press($(this).text());
                });
                
                // Obsluha kláves
                $(document).keypress(function(e) {
                    var key = e.which;
                    switch (key) {
                        
                        // Backspace
                        case 8: key = 99; break;
                        
                        // Enter
                        case 13: key = 61;
                    }
                    self.press(String.fromCharCode(key).toLowerCase());
                    return false;
                });
            }
        };
            
        $(function() {
            calc.init();
        });
    </script>
    <style type="text/css">
        #calc {
            display: inline-block;
            border: 1px outset #888888;
            padding: 3px;
            background: #DDDDDD;
        }

        #calc input {
            width: 206px;
            text-align: right;
        }
        
        #calc button {
            width: 50px;
            height: 50px;
        }
        
        #calc div + div {
            margin-top: 4px;
        }
    </style>
    <body>
        <div id="calc">
            <div>
                <input
                    type="text"
                    readonly="readonly"
                />
            </div>
            <div>
                <button>(</button>
                <button>)</button>
                <button>c</button>
                <button>r</button>
            </div>
            <div>
                <button>7</button>
                <button>8</button>
                <button>9</button>
                <button>+</button>
            </div>
            <div>
                <button>4</button>
                <button>5</button>
                <button>6</button>
                <button>-</button>
            </div>
            <div>
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>*</button>
            </div>
            <div>
                <button>0</button>
                <button>.</button>
                <button>=</button>
                <button>/</button>
            </div>
        </div>
    </body>
</html>

Nahlásit jako SPAM

IP: 83.240.95.–

Carduus0

Návštěvník

4. 8. 2011 #10

No k JQuery jsem se zatím nedostal...ale docela to chápu, ale nikdy bych něco takového nenapsal Je to na mě moc propletené... jedna funkce využívá jiných 2 a ty zase využívají další 2 atd... až se zase dostaneme k té první. Jenom jsem moc nepochopil, proč jsou tam ty divy (myslím u každé řádky tlačítek). Já jsem je zatím nikdy nepoužil (začal jsem s JS zhruba před měsíce a zatím jsem nedokázal nic pořádného naprogramovat). Vím, že pro všechny elementy určují stejné věci (zarovnání atd..) nebo tak nějak, ale to je všechno.

Nahlásit jako SPAM

IP: 109.235.1.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

4. 8. 2011 #11

No k JQuery jsem se zatím nedostal

JQuery tam zas tolik není :-).

Jenom jsem moc nepochopil, proč jsou tam ty divy (myslím u každé řádky tlačítek)

Button je řádkový prvek, což znamená, že se skládají vedle sebe na řádek. Div je blokový prvek, což zase znamená, že každý div začíná na novém řádku. Takže jsou tam proto, aby se tlačítka rozdělila do řádků pod sebe, jako na normální kalkulačce. Kdyby tam nebyly, tak to bude jeden dlouhý řádek s tlačítky.

docela to chápu, ale nikdy bych něco takového nenapsal

Ale napsal. Taky jsem si to kdysi u spousty věcí říkal. Chce to jenom nevzdávat to a jak říkalo to hovado Lenin "Učit se, učit se, učit se".

začal jsem s JS zhruba před měsíce a zatím jsem nedokázal nic pořádného naprogramovat

Tak od někoho, kdo začal před měsícem, se nějaká mega aplikace ani neočekává. A taky v tom případě je ten můj příklad celkem přestřelený - večer kouknu i na ten tvůj původní kód a řeknu ti, co se tam dá vylepšit.

Nahlásit jako SPAM

IP: 83.240.95.–

Carduus0

Návštěvník

4. 8. 2011 #12

"Učit se, učit se, učit se". - problém je, že není moc z čeho....samozřejmě knihy nějaké jsou, jednu mám (je tady na foru o tom diskuze), ale více mě pomohli moje otázky na všech možných programovacích forech než ta kniha...

Byl bych moc rád, kdybyste se mi na to ještě jednou podíval, ale nemůže po vás chtít, abyste četl můj prasečinec, kde jsou i základní chyby jako vytváření proměnných bez var...nepoužívání regulárních výrazů a najde se mnohem mnohem více

Každopádně já se bude té kalkulačce věnovat, dokud ji nedodělám. (snad se toho dožiju)

Nahlásit jako SPAM

IP: 109.235.1.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

4. 8. 2011 #13

problém je, že není moc z čeho....samozřejmě knihy nějaké jsou, jednu mám (je tady na foru o tom diskuze), ale více mě pomohli moje otázky na všech možných programovacích forech než ta kniha...

Knihy se můžou hodit, ale nejvíc se toho naučíš vlastníma chybama a taky při vytváření programů, kde budeš muset řešit věci, se kterýma jsi ještě nepracoval. Když na ně narazíš příště, tak už je budeš umět použít nebo se podíváš do toho programu, kde jsi je použil minule. Jinak v podstatě všechno najdeš na Googlu, ale chce to dávat pozor na aktuálnost informací.

Byl bych moc rád, kdybyste se mi na to ještě jednou podíval, ale nemůže po vás chtít, abyste četl můj prasečinec

Nikdo učenej z nebe nespadl.

Každopádně já se bude té kalkulačce věnovat, dokud ji nedodělám.

Správnej přístup.

Nahlásit jako SPAM

IP: 83.240.95.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

5. 8. 2011 #14

Zajímavé

Nejlepší odpověď

http://www40.zippyshare.com/v/45914626/file.html

Moc jsem ti tam toho navíc nepřidával, spíš jsem to jenom zkulturnil a okomentoval. Soubor basic.css, ani obrázky jsi do toho archivu nepřibalil, takže jsem tagům img přidal atribut alt a do souboru basic.css jsem přidal základní styly, aby se s tím dalo pracovat.

Pár postřehů:

- Tabulkový layout frčel v roce 1995, pro rozmístění prvků na stránce používej prvky jako div, span, atd. Prvek table používej jenom pro tabulky.
- Atribut language u tagu script nemusíš používat.
- Na atribut style zapomeň, všechny styly zapisuj do souboru.
- Místo deseti funkcí, které jsou v podstatě stejné, stačí použít jedinou funkci s parametrem.
- Pokud na více místech v programu používáš nějaké číslo, u kterého je navíc pravděpodobné, že ho budeš v budoucnu chtít změnit - v tomhle případě třeba maximální délku textu - tak si ho ulož do proměnné a v programu jí používej místo toho čísla. Až jí budeš chtít změnit, tak to stačí udělat na jediném místě v kódu a nemusíš ho procházet celý.
- Někde jako uvozovky používáš ", jinde zase ' - vyber si jedny a ty používej všude.
- Názvy proměnných, funkcí, atd. měj buď v češtině nebo v angličtině, ale nemixuj to dohromady.
- Pro názvy nepoužívej zkratky jako zav, rovnou to pojmenuj jako zavorka.
- Dávej bacha na chybějící středníky - v některých prohlížečích ti to projde, jinde nemusí.

Nahlásit jako SPAM

IP: 83.240.95.–

Carduus0

Návštěvník

5. 8. 2011 #15

Moc moc děkuji. Muselo vám to dát hodně práce to po mně opravit...určitě si to několikrát pročtu, abych příště věděl jak co vyřešit. Chybám, na které jste mne upozornil se budu snažit vyvarovat.

Nahlásit jako SPAM

IP: 109.235.1.–

Carduus0

Návštěvník

5. 8. 2011 #16

Nejde mi editovat, tak musím takto: všiml jsem si, že není ke konci dodělaná funkce plusMinus() (nevím jestli schválně, nebo omylem každopádně je to dobře mohu si ji sám dodělat). Chtěl bych se ještě zeptat to se všechny (nevím, jak se ta skupina jmenuje) | & ^ zapisují u if 2x za sebou?

Nahlásit jako SPAM

IP: 109.235.1.–

1321645679876456

~ Anonymní uživatel
~ 27 příspěvků

5. 8. 2011 #17

Zapisují se zdvojeně a jmenuje se to logické operátory. && znamená "a zároveň", || znamená "nebo". Jedním znakem se zapisují bitové operátory(&, |, ^), ty ale zatím k ničemu nepotřebueš.

Nahlásit jako SPAM

IP: 83.240.95.–

← Zpět na seznam vláken ← Zpět do Fóra