How do I pass input value to function parameter?

Question

I want to pass input field value to function parameter, reverse string and print it out.

I have figured out how to print input field text but I have not a clue how to pass it through a function.

<form>
  <p>Input your text here:</p>
  <input type="text" id="inputFieldValue" />
  <input type="button" id="buttonClick" value="Click me!">
</form>

<span id="resultHere"></span>

/* this one works but it just prints input field text*/

$('#buttonClick').click(function() { 
    print = $('#inputFieldValue').val();
    $('#resultHere').text(print);
}); 

/*I don't know how to make this work: */

someText = $('#inputFieldValue').val();

$('#buttonClick').click(function reverseMe(print) {
    var printMe = print.split('').reverse().join('');
    $('#resultHere').text(printMe);
});
reverseMe(someText);

I just want it to reverse string and print into HTML.

Example input: 'Hello, World!' Output: '!dlroW ,olleH'

I want to use JS or Jquery for this.

Answer 1

Try defining the function reverseMe outside the event handler, and declaring the variable someText inside the handler's function.

This should do it:

$('#buttonClick').click(function() {
  someText = $('#inputFieldValue').val();
  reverseMe(someText);
});

function reverseMe(print) {
    var printMe = print.split('').reverse().join('');
    $('#resultHere').text(printMe);
}

Answer 2

I suggest to first create a function that reverse a string and returns it, that will be his only purpose. Then use it inside the click event handler before displaying the text , like this:

 $('#buttonClick').click(function() { let print = $('#inputFieldValue').val(); $('#resultHere').text(reverseStr(print)); }); const reverseStr = (inputStr) => inputStr.split("").reverse().join(""); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <p>Input your text here:</p> <input type="text" id="inputFieldValue" /> <input type="button" id="buttonClick" value="Click me!"> </form> <span id="resultHere"></span> 

Why not to include the logic that also shows the text in the span element inside the reverseStr method? Because you will lose reusability of that method.

Note also, function arrow expression are not fully supported . So you may consider using a standard function declaration instead.

function reverseStr(inputStr)
{
    return inputStr.split("").reverse().join("");
}

Answer 3

Extract the method out of the event listener, and call it from the listener, passing in the value to reverse.

function reverseMe(print) {
    var printMe = print.split('').reverse().join('');
    $('#resultHere').text(printMe);
}

someText = $('#inputFieldValue').val();

$('#buttonClick').click(function(){
    reverseMe($('#inputFieldValue').val());
});

reverseMe(someText);