Question

我想将输入字段值传递给函数参数，反转字符串并将其打印出来。

我已经弄清楚了如何打印输入字段文本，但是我不知道如何通过函数传递它。

<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>

/ *此功能有效，但仅打印输入字段文本* /

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

/ *我不知道该如何做：* /

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

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

我只希望它反转字符串并打印为HTML。

示例输入：“世界，您好！” 输出：'！dlroW，olleH'

我想为此使用JS或Jquery。

Answer 1

尝试在事件处理程序外部定义函数reverseMe，并在处理程序的函数内部声明变量someText。

这应该做到：

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

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

Answer 2

我建议首先创建一个反转string并返回它的函数，这将是他唯一的目的。然后在显示click之前，在text事件处理程序中使用它，如下所示：

$('#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>

为什么不包括在span方法内的reverseStr元素中也显示文本的逻辑？因为您将失去该方法的可重用性。

还请注意，function arrow expression是not fully supported。因此，您可以考虑使用标准函数声明。

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

Answer 3

从事件侦听器中提取方法，然后从侦听器中调用该方法，并传递要反转的值。

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

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

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

reverseMe(someText);

如何将输入值传递给功能参数？

3 个答案: