Dodawanie liczb w formularzu

0

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 = wyświetla się wynik działania. Nie chce dodawać do kodu w HTML żadnych innych znaczników typu span jeśli jest to możliwe.

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="text" id="a">
            <span>+</span>
            <input type="text" id="b">
            <span>=</span><br><br>
 
            <input name="button1" type="button" value="Dodaj" onclick="dodaj()" id="d">
        </div>
    </form>
 
</body>
 
</html>

JS

function licz() {
    const a = document.getElementById('a').value;
    const b = document.getElementById('b').value;
    const d = parseInt(a) + parseInt(b); // dodawanie
    document.getElementById('d').value.innerHTML = d;
    return false;
}
0
  1. Nie ma takiej funkcji jak dodaj() - pewine chodzi o funkcję oblicz()
  2. Wartość dla pól formularza (input) ustawiamy przez value
    document.getElementById('d').value = d;
    ten innerHtml nie jest tutaj potrzebny.
0

Nadal nie działa. Co jest źle?

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="text" id="a">
            <span>+</span>
            <input type="text" id="b">
            <span>=</span><br><br>

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

</body>

</html>

JS

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;
}
0

Teraz w przycisku wyświetla się NAN po kliknięciu w przycisk Dodaj a powinien wyświetlić się wynik 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;
1

Zmieniasz ciąg znaków 'a' na liczbę, a że nie może zostać sparsowany, to dostajesz NaN. Tak samo b. Usuń cudzysłów, użyj zmiennych a i b.

0

Teraz w ogóle nie wyświetla wyniku.

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;
}
0

Bo usunęłaś cudzysłowy z argumentów getElementById. Tam muszą zostać, ponieważ id to łańcuch znaków. Patrz niżej, jak pobierasz element o id 'd';

0

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;
}
0

Bo mu wskazujesz, że tam ma wyświetlić: id="d".

<span id="wynik">=</span>

document.getElementById("wynik").innerHTML = "= " + d;

Powinno być git.

Pozdrawiam
Radosław Głębicki

1 użytkowników online, w tym zalogowanych: 0, gości: 1