Dodawanie liczb w formularzu

pytanie zadane 19 stycznia 2021 w JavaScript przez Martita Bywalec (2,470 p.)

Uczę się JavaScript. Proszę o pomoc. Nie dodają się liczby w formularzu.

Użytkownik wprowadza pierwszą w I polu i drugą w II polu liczbę w formularzu i klika przycisk Dodaj. Po znaku = widać wynik działania. Nie chce dodawać do kodu w HTML żadnych innych znaczników typu span.

HTML

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="sumowanie.js"></script>
</head>

<body>
    <form id="oblicz" action="" method="post">
        <div>
            <input type="text" name="a">
            <span>+</span>
            <input type="text" name="b">
            <span>=</span><br><br>
            <input name="button1" type="button" value="Dodaj" onclick="dodaj()">
        </div>
    </form>

</body>

</html>

JavaScript

function licz() {
     const a = document.forms['oblicz'].a;
     const b = document.forms['oblicz'].b;
     const dodaj = parseInt(a) + parseInt(b); // dodawanie
     document.getElementById('dodaj').innerHTML = dodaj; // dodawanie
     return false;
 }

}

3 odpowiedzi

odpowiedź 19 stycznia 2021 przez VBService Ekspert (252,740 p.)
wybrane 19 stycznia 2021 przez Martita

Najlepsza

Wystarczy ten fragment

<span>=</span><br><br>

<input name="button1" type="button" value="Dodaj" onclick="dodaj()" id="d">

na np.:

            <span id="d">=</span><br><br> 
            <input type="button" value="Dodaj" onclick="dodaj()">

i w js-ie (ten zapis parseInt('a') , próbujesz znak, literę a "zamienić" na liczbę , bez apostrofów - "zawartość" zmiennej a na liczbę)

function dodaj() {
    const a = document.getElementById('a').value;
    const b = document.getElementById('b').value;
    const d = parseInt(a) + parseInt(b); // dodawanie
    document.getElementById('d').textContent = '= ' + d;
    return false;
}

w Twoim kodzie ten zapis document.getElementById('d'), będzie się odwoływał do <span id="d">

można zapisać tak

document.getElementById('d').textContent = '= ' + d;

document.getElementById('d').innerHTML = '= ' + d;

document.getElementById('d').innerText = '= ' + d;

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)

Wielkie dzięki działa i teraz rozumiem.

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)

Czy jest możliwość uzyskania wyniku bez

ale tylko z

+ js?

komentarz 19 stycznia 2021 przez VBService Ekspert (252,740 p.)

Jest możliwe uzyskanie wyniku, bez <span id="d">, tutaj ten znacznik <span> służy za "kontener" do prezentacji obliczeń.

komentarz 20 stycznia 2021 przez Martita Bywalec (2,470 p.)

ok dzięki

odpowiedź 19 stycznia 2021 przez Anedroid Obywatel (1,530 p.)

function licz() {
     const a = document.forms['oblicz'].a;
     const b = document.forms['oblicz'].b;
     const dodaj = parseInt(a) + parseInt(b); // dodawanie
     document.getElementById('dodaj').innerHTML = dodaj; // dodawanie
     return false;
 }

Jeżeli chcesz aby wynik działania pokazał się w przycisku, zamiast innerHTML daj value lub zmień przycisk z <input type=button> na <button></button>.

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)

Pogubiłam się. Nie chce aby wynik był na przycisku.

HTML

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="sumowanie.js"></script>
</head>

<body>
    <form id="oblicz" action="" method="post">
        <div>
            <input type="text" name="a">
            <span>+</span>
            <input type="text" name="b">
            <span>=</span><br><br>
            <button value="dodaj" type="button" onclick="dodaj()"></button>
        </div>
    </form>

</body>

</html>

function licz() {
     const a = document.forms['oblicz'].a;
     const b = document.forms['oblicz'].b;
     const dodaj = parseInt(a) + parseInt(b); // dodawanie
     document.getElementById('dodaj').innerHTML = dodaj; // dodawanie
     return false;
 }

Zmieniłam na button.

komentarz 19 stycznia 2021 przez Anedroid Obywatel (1,530 p.)

Jeżeli wynik ma być po =, to wstaw tam div, span lub output i tam wyświetlaj wynik.

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)
edycja 19 stycznia 2021 przez Martita

To ja już nic z tego nie wiem. Możesz to jaśniej wytłumaczyć?

komentarz 19 stycznia 2021 przez Anedroid Obywatel (1,530 p.)

<!DOCTYPE html>
<html lang="pl">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="sumowanie.js"></script>
</head>
 
<body>
    <form id="oblicz">
        <div>
            <input type="text" name="a">
            <span>+</span>
            <input type="text" name="b">
            <span>=</span>
            <output id="wynik"></output><br><br>
            <button value="dodaj" id="dodaj"></button>
        </div>
    </form>
 
</body>
 
</html>

function licz() {
     const a = document.forms['oblicz'].a;
     const b = document.forms['oblicz'].b;
     const dodaj = parseInt(a) + parseInt(b); // dodawanie
     document.getElementById('wynik').innerHTML = dodaj; // dodawanie
     return false;
 }
document.getElementById('dodaj').addEventListener("click", licz);

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)

Nadal nie działa po wpisaniu 6 + 2 i kliknięciu w przycisk wyskakuje NAN.

odpowiedź 19 stycznia 2021 przez wizarddos Nałogowiec (25,930 p.)

Może spróbuj zamiast document.forms pobierz do a i b wartości za pomocą getElementById i nadaj inputom id. np tak:

const a = document.getElementById("tu id nadane inputowi").value

Pokaż 6 poprzednich komentarzy

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)

Kod debuguje w visual studio code chrome.

komentarz 19 stycznia 2021 przez wizarddos Nałogowiec (25,930 p.)

zmień inupt z type="text" na type="number"

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)

Nadal nie działa

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="dodawanie.js"></script>
</head>

<body>
    <form id="oblicz" action="" method="post">
        <div>
            <input type="number" id="a">
            <span>+</span>
            <input type="number" id="b">
            <span>=</span><br><br>

            <input name="button1" type="button" value="Dodaj" onclick="dodaj()" id="d">
        </div>
    </form>

</body>

</html>

function oblicz() {
    const a = document.getElementById('a').value;
    const b = document.getElementById('b').value;
    const d = parseInt('a') + parseInt('b'); // dodawanie
    document.getElementById('d').value = d;
    return false;
}

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)

Teraz w przycisku wyświetla się NAN po kliknięciu w przycisk Dodaj a powinien wyświetlić się wynik po =.

HTML

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="dodawanie.js"></script>
</head>

<body>
    <form id="oblicz" action="" method="post">
        <div>
            <input type="number" id="a">
            <span>+</span>
            <input type="number" id="b">
            <span>=</span><br><br>

            <input name="button1" type="button" value="Dodaj" onclick="dodaj()" id="d">
        </div>
    </form>

</body>

</html>

function dodaj() {
    const a = document.getElementById('a').value;
    const b = document.getElementById('b').value;
    const d = parseInt('a') + parseInt('b'); // dodawanie
    document.getElementById('d').value = d;
    return false;

komentarz 19 stycznia 2021 przez Martita Bywalec (2,470 p.)

W końcu działa, ALE wynik wyświetla się w przycisku a ma się wyświetlić po =.

function dodaj() {
    const a = document.getElementById('a').value;
    const b = document.getElementById('b').value;
    const d = parseInt(a) + parseInt(b); // dodawanie
    document.getElementById('d').value = d;
    return false;
}