0

I'm very new to web development and am trying to work out the basics. I wrote a basic layout with a form consisting of a text input and a submit button, as well as a function that was supposed to take the input, flip it, and insert it into a div. After fiddling for a little bit I was able to make the form call the function, but the result only flashes on the screen for about half a second before dissapearing, instead of being properly inserted there.

This is what I'm working with, any help with figuring out what I'm missing is very much appreciated!

function reverseInput(word) {
    word = document.querySelector("#word").value;
    let inputArray = word.split('');
    let reverseArray = inputArray.reverse();
    let reverseWord = reverseArray.join('');

    return document.querySelector("div").innerText = reverseWord;  
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>hi</p>
    <form style="display: flex;" onsubmit="reverseInput()">
        <label> feed me a word <input type="text" id="word"></label>
        <input type="submit" id="submit" style="margin-left: 5px;">
    </form>
    <div id="result"></div>
<script src="scripts.js"></script>
</body>
</html>
Sven Eberth
  • 2,943
  • 12
  • 21
  • 27
J Ernst
  • 9
  • Your problem isn't with querySelector, but because the form automatically submits, and when it does that, the form redirects to another page. That's how forms work. – Rickard Elimää Jun 07 '21 at 20:21

0 Answers0