How to reverse a string in javascript?

Question

I'm trying to learn JavaScript through .html files in Visual Studio 2013.

I know there are easier ways to reverse a string in JavaScript, but my main aim is to understand interaction between html and JavaScript to provide such a solution.

Also, the IDE has to be Visual Studio as eventually I want to code this same logic using .aspx files.

So, for my initial learning attempt, I'm trying to implement the following logic:

get a string from input tag of form,
submit form resulting in the script submit() to run,
the script reverses the string, and then
displays reversed string in the same input tag which is now disabled

Code I've written is as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <script type="text/javascript">
        function reverseString() {
            var s = document.getElementById('reverseString').value;
            var reversed;

            for (var i = s.length - 1; i >= 0; i--) {
                reversed += s[i];
            }

            document.getElementById('reverseString').disabled = true;
            document.getElementById('reverseString').value = reversed;
        }

        function submit(form) {
            reverseString();
        }
    </script>

    <title>Play with Code</title>
</head>

<body>
    <form name="myform" onsubmit="submit();">
        Reverse String: <input type="text" id="reverseString"/><br/>
        <input type="submit" value="Submit"/>
    </form> 
</body>
</html>

It doesn't work and I'm really clueless as to how to solve it.

I unsuccessfully tried to debug following the instructions provided by these links:

How to debug (only) JavaScript in Visual Studio?

http://www.aspsnippets.com/Articles/Debug-JavaScript-and-jQuery-using-Visual-Studio-in-Internet-Explorer-browser.aspx

Please help me to fix this code and also, if possible, please advise or direct me on how to debug such a piece of code.

Thanks.

A note for everyone: Be careful naively reversing strings in JavaScript, as character encoding will bite you. Please read one of the best SO answers ever written on the topic: stackoverflow.com/a/16776621/2505965 — Oka
– Oka, Commented Sep 17, 2015 at 8:49

gaelgillard · Accepted Answer · 2015-09-17 08:41:14Z

Here's a working code with comments to explain you what you are doing wrong:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Play with Code</title>
</head>
<body>
    <form name="myform" id="form">
        Reverse String: <input type="text" id="reverseString"/><br/>
        <input type="submit" value="Submit"/>
    </form>
    <script>
        function reverseString() {
            var s = document.getElementById('reverseString').value;
            // reverse should initialized as a empty String
            // to prevent adding char to "undefined" string
            var reversed = '';

            for (var i = s.length - 1; i >= 0; i--) {
                reversed += s[i];
            }

            document.getElementById('reverseString').disabled = true;
            document.getElementById('reverseString').value = reversed;
        }

        function submit(ev) {
            // preventDefault prevent the form to do his automatic
            // behavior which submit the form with a new HTTP request
            ev.preventDefault();
            reverseString();
        }

        // Attach the event to the form
        document.getElementById('form').addEventListener('submit', submit);
    </script>
</body>
</html>

Community · Accepted Answer · 2017-05-23 12:24:51Z

0

Working Demo

More Info on Debugging

//HTML
Reverse String: <input type="text" id="reverseString"/><br/>
    <input type="button" value="Submit" onClick="funcreverse()"/>

//Script
 function funcreverse () {
        var s = document.getElementById('reverseString').value;
        var reversed = '';
        for (var i = s.length - 1; i >= 0; i--) {
            reversed += s[i];
        }

        document.getElementById('reverseString').disabled = true;
        document.getElementById('reverseString').value = reversed;
    };

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Sep 17, 2015 at 9:00

tech-gayan

1,4431 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to reverse a string in javascript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related