• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JavaScript - tablica jako liczby? - sprawdzenie kodu

VPS Starter Arubacloud
0 głosów
326 wizyt
pytanie zadane 8 kwietnia 2019 w JavaScript przez PoProstuLis Nowicjusz (120 p.)
otagowane ponownie 8 kwietnia 2019 przez PoProstuLis

Cześć Wam

Chciałbym poprosić o sprawdzenie tego co sobie napisałem w ramach zabawy. Co chciałem osiągnąć? Dać możliwość dodania X liczb do siebie. Na starcie, podaje liczbę i generuje na jej podstawie odpowiednią ilość inputów. Do których później będę wpisywał liczby a na końcu je do siebie dodam.

Kod który stworzyłem:

<!DOCTYPE html>
<html lang="pl">
<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-Ua-Compatible" content="IE=edge">
    <meta name="robots" content="noindex">

    <title>Prosty Kalkulator</title>
    <meta name="description" content="Opis">

    <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="normalize.css" / >
    <link rel="stylesheet" href="main.css" / >

    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="container">
        <h2>Podaj ile liczb</h2>
        <div id="liczby">
            <input type="text" id="ile_liczb" />
            <input type="submit" value="WYGENERUJ" onclick="wypisz()" />  
        </div>

        <div id="liczby_do_wpisania"></div>

    </div>

<script type="text/javascript" src="java.js"></script>
</body>

</html>
body
{
	background-color: #343f3e;
	color: #dfdfdf;
	text-shadow: 1px 1px 0px black;
}

#container
{
	width: 80%;
	height: 100vh;
	margin: 0px auto;
	border-left: 3px solid #E2C044;
	border-right: 3px solid #E2C044;
	text-align: center;
	padding-top: 20px;
	box-sizing: border-box;
}

#liczby
{
	margin-bottom: 20px;
}

#liczby_do_wpisania
{
	width: 200px;
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
}

.licz
{
	margin-bottom: 5px;
}

#sumowanie
{
	margin-top: 10px;
}
function wypisz()
{
    var do_wypisania = "";
    var ile_liczb = document.getElementById("ile_liczb").value;

    for (i=0; i<ile_liczb; i++)
    {

        do_wypisania = do_wypisania+'<input type="text" id="liczba'+i+'" class="licz" />';

        if (i==(ile_liczb-1))
        {
            do_wypisania = do_wypisania + '<input type="submit" value="SUMA" id="sumowanie" onclick="suma()"/>';
        }

        document.getElementById("liczby_do_wpisania").innerHTML = do_wypisania;
    }
}


var ile = document.getElementById("ile_liczb").value;

function suma()
{

    var suma=0;
    var tablica = [];

    for (i=0; i<ile; i++)
    {
        tablica.push(document.getElementById("liczba"+i).value)
    }
    
    const tablica2 = tablica.map(x=> x*1);

    for(i=0; i<tablica2.length; i++)
    {
        suma = suma + tablica2[i];
    }

    alert(suma);
}

Więc tak...

1: Prosiłbym o informacje co zrobiłem źle i dlaczego powinienem zrobić inaczej.

2: Gdy 4 linijke JS wytne z funkcji i wkleje przed funkcje wypisz() - skrypt nie do końca działa, raz generuje inputy, raz nie generuje, innym razem generuje poprzednio wpisaną liczbę (tak jakby przeglądarka miała to w pamięci?) Nie jestem pewien jak to wyjaśnic :)

3: Nie miałem problemu z wypisaniem odpowiedniej ilości inputów, głowiłem się jednak później jak je do siebie dodać. Stworzyłem pusta tablice.w funkcji suma() i pętlą dodałem do niej wartości z wczesniej wygenerowanych inputów - czy tak jest poprawnie?

4: To nie rozwiązało problemu bo tablica miała w sobie stringi a nie liczby. Znalazłem w internecie takie coś jak w linijce 34... i szczerze? działa, ale nie rozumiem jak :) Gdyby ktoś wyjaśnił było by super - albo może podpowiedział inny sposób na to?

mam też to tutaj:

https://github.com/poprostulis/proste_dodawanie

Nigdy z githuba nie korzystałem, wiec nie wiem tak na prawde do czego konkretnie służy, ale wrzuciłem tam ten kod żeby mieć do niego dostęp w różnych miejscach. ;)

Z góry dzięki za pomoc, i mam nadzieje że tworzeniem tego tematu nie popełniam jakiegoś faux-pas. :)

Dodam jeszcze ze jestem totalnym newbie jeżeli chodzi o programowanie :) Dopiero się uczę więc proszę nie być zbyt surowym :)

 

EDIT
Chwilkę jeszcze pogrzebałem i znalazłem coś takiego:

parseFloat, dzięki temu zamieniłem linijke 34 -- const tablica2 = tablica.map(x=> x*1); na:

    for (i=0; i<ile; i++)
    {
        tablica[i] = parseFloat(tablica[i]);
    }


I oczywiscie resztę zmiennych itd też zmieniłem.

Która opcja jest lepsza? (jedna i druga działa) :)

1 odpowiedź

0 głosów
odpowiedź 8 kwietnia 2019 przez Tomek Sochacki Ekspert (227,490 p.)

Tu masz odemnie małego codepena do zabawy jak chcesz: https://codepen.io/anon/pen/YMpNWe?editors=1010 Nie jest to idealny kod, ba, daleko mu od ideału ale masz tam kilka elementów które warto wg mnie abyś sobie przećwiczył jak tworzenie elementów DOM, operacje na referencjach itp.

A tak z ciekawości, skoro wszedłeś już w Array.prototype i umiesz użyć metodę map to czemu nie pokusiłeś się o Array.prototype.reduce :) ?

Podobne pytania

+2 głosów
1 odpowiedź 1,468 wizyt
0 głosów
1 odpowiedź 126 wizyt
pytanie zadane 4 maja 2020 w JavaScript przez primole Obywatel (1,130 p.)
0 głosów
0 odpowiedzi 145 wizyt
pytanie zadane 14 listopada 2018 w JavaScript przez ptaku19 Użytkownik (800 p.)

93,078 zapytań

142,041 odpowiedzi

321,445 komentarzy

62,422 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...