Zawartość inputów wpływająca na paragraf

Question

Chcę, by zawartość wpisywana do inputów na bieżąco oddziaływała na zdanie umieszczone poniżej inputów. Moje rozwiązanie z jakiegoś powodu nie działa:

<label for="name">Name</label>
    <input type="text" placeholder="Insert your name" id="name"><br>
    <label for="age">Age</label>
    <input type="text" placeholder="Insert your age" id="age"><br>
    <label for="city">City</label>
    <input type="text" placeholder="Insert your city" id="city">
    <p>Your name is <span id="spanName">Tom</span>, you're <span id="spanAge">20</span> years old and you live in <span id="spanCity">London</span>.</p>
    <script>
        let insertName = document.querySelector("#name");
        let insertAge = document.querySelector("#age");
        let insertCity = document.querySelector("#city");

        let spanName = document.querySelector("spanName");
        let spanAge = document.querySelector("spanAge");
        let spanCity = document.querySelector("spanCity");

        insertName.addEventListener('keyup', function() {
            spanName.textContent = this.value;
        }); // nast 2 zdarzenia chciałem ofc analogicznie
    </script>

 

Answer 1

W querySelector zabrakło znaku #

        let spanName = document.querySelector("#spanName");
        let spanAge = document.querySelector("#spanAge");
        let spanCity = document.querySelector("#spanCity");