2

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.

Community
  • 1
  • 1
kJo
  • 55
  • 1
  • 5
  • 5
    `reverse = s.split('').reverse().join('')` – hindmost Sep 17 '15 at 08:36
  • Try `var reversed = '';` – CD.. Sep 17 '15 at 08:39
  • some info http://stackoverflow.com/questions/31167222/debug-java-script-with-visual-studio-2015-on-chrome-or-firefox/31167845#31167845 – tech-gayan Sep 17 '15 at 08:39
  • 1
    Don't ask two (and more) questions in one post – hindmost Sep 17 '15 at 08:42
  • Re debugging: Use the debugger built into your browser. You can open it via your browser's menus, or using Ctrl+Shift+I or F12 on most browsers. – T.J. Crowder Sep 17 '15 at 08:48
  • 1
    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: http://stackoverflow.com/a/16776621/2505965 – Oka Sep 17 '15 at 08:49

3 Answers3

1

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>
gaelgillard
  • 2,483
  • 1
  • 14
  • 20
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;
    };
Community
  • 1
  • 1
tech-gayan
  • 1,373
  • 1
  • 10
  • 25
0
"use strict";
function reverseString(str) {
  let rev = "";
  let len = str.length;
  for (let i = len - 1; i >= 0; i--) {
    rev += str[i];
  }
  return rev;
}
console.log(reverseString("Reverse"));
Kathish Kumaran R
  • 34
  • 5