Java script-textarea

pytanie zadane 23 czerwca 2020 w JavaScript przez Grzegorzko Obywatel (1,110 p.)

Wie ktoś jak pobrać dane z textarea i je wyświetlić w div-ie poniżej?

1	komentarz 23 czerwca 2020 przez Comandeer Guru (600,810 p.) Proszę wstawić kod poprawnie, zgodnie z regulaminem.

3 odpowiedzi

odpowiedź 23 czerwca 2020 przez creend Gaduła (4,700 p.)

W zmiennej dane siedzi cały text area jeśli interesuje cię sama wartość to powinieneś zrobić tak:

var dane = document.getElementById("pole").value;

Jeśli to zrobisz to powinno działać

Ogólnie to polecam się pouczyć nowszego i poprawniejszego JS'a bo używasz przykładowo varów zamiast let i const, tag script powinno się umieszczać się z dopiskiem defer lub na samym dole body. Zamiast addEvenListenerów używasz onclicków w HTML co jest bardzo złą praktyką

<script defer></script>

1	komentarz 23 czerwca 2020 przez Comandeer Guru (600,810 p.) Ogólnie to polecam się pouczyć nowszego i poprawniejszego JS'a A co jest poprawniejszego w nowym JS-ie? tag script powinno się umieszczać się z dopiskiem defer lub na samym dole body [defer] nie działa na skrypty wewnętrzne.

odpowiedź 23 czerwca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

const value = document.getElementById("pole").value
let newDiv = document.createElement("div");
newDiv.innerHTML = value

https://developer.mozilla.org/pl/docs/Web/API/Document/createElement

komentarz 23 czerwca 2020 przez Grzegorzko Obywatel (1,110 p.)

thx

odpowiedź 23 czerwca 2020 przez VBService Ekspert (252,740 p.)
edycja 23 czerwca 2020 przez VBService

        <script>
            window.onload = function() {
                const bt_oblicz = document.getElementById('oblicz');

                bt_oblicz.addEventListener('click', () => {
                    const pole = document.getElementById('pole');
                    const wynik = document.getElementById('wynik');
                    wynik.innerHTML = pole.value;
                });
            };
        </script>


<!-- test.html -->

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            #wynik {
                background-color: black;
                color: limegreen;
                width: 380px;
                margin: 5px 0;
                font-size: 20px;
                padding: 2px;
            }
            button {
                font-size: 20px;
                color: black;
                text-shadow: 1px 1px 0 black;
                font-variant: small-caps;
            }
            button:hover {
                cursor: pointer;
                color: limegreen;
            }
            button:active {
                transform: translateY(2px);
            }
        </style>
    </head>
    <body>
        <textarea id="pole" cols="50" rows="20">Test: (4.85 + 9) * 7.1</textarea>
        <div id="wynik">&nbsp;</div>
        <!-- <input type="submit" value="oblicz" onclick="oblicz()"> -->

        <!-- <input type="button" value="oblicz" onclick="oblicz()"> -->

        <button id="oblicz">Oblicz</button>
        <script>
            window.onload = function() {
                const bt_oblicz = document.getElementById('oblicz');

                bt_oblicz.addEventListener('click', () => {
                    const pole = document.getElementById('pole');
                    const wynik = document.getElementById('wynik');
                    wynik.innerHTML = pole.value;
                });
            };
        </script>
    </body>
</html>