Question

我知道这听起来很简单，但我希望将一行javascript合并到一些HTML中。 javascript代码是

String.prototype.reverse=function(){
            return this.split("").reverse().join("");
        }

html如下：

<!DOCTYPE html>
<html>
<head>
    <title>7.23</title>
    <meta charset= "utf-8">
</head>
<body>
    <p><label>Input
        <input type = "text" id = "s" size = "25">
        </label>
    </p>
    <input type = "button" id = "r" value = "Reverse" onclick="String.prototype.reverse(this);">
    <p id = "t"></p>
    <script>
        var s = document.getElementById("s").value;
        String.prototype.reverse=function(){
            return this.split("").reverse().join("");
        }
        document.getElementById("t").innerHTML = String.prototype.reverse(s);
    </script>   
</body>
</html>

任何帮助？

Answer 1

您的代码存在一些误解。

首先让我们修复“Reverse”按钮以调用正确的元素：

<input type = "button" id = "r1" value = "Reverse" onclick="String.prototype.reverse(this);">

对此：

<input type = "button" id = "r" value = "Reverse"
       onclick="document.getElementById('t').innerHTML = document.getElementById('s').value.reverse();">

第一个代码显式调用原型函数传递对this的引用（这是对按钮的引用，而不是您想要的文本）。

第二行调用一个新的原型函数作为s元素值的扩展（即文本框中的文本），并直接将其分配给p元素的内部HTML。

接下来，我们需要将脚本函数调整为原型函数。在页面中加载元素后，原始脚本正在调用document.getElementById("t").innerHTML = String.prototype.reverse(s);，因此s的值为空（因为它刚刚加载），并且该函数从未被再次调用以重新调整内部HTML p代码。

新脚本可能只是以下内容：

<script>
    String.prototype.reverse=function(){
        return this.split("").reverse().join("");
    }
</script>

现在这里是完整的HTML（对标签进行了一些调整）：

<!DOCTYPE html>
<html>
<head>
    <title>7.23</title>
    <meta charset= "utf-8">
    <script>
        String.prototype.reverse=function(){
            return this.split("").reverse().join("");
        }
    </script>
</head>
<body>
    <p>
        <label for="s">Input</label>
        <input type = "text" id = "s" size = "25">
    </p>
    <p id = "t"></p>
    <input type = "button" id = "r" value = "Reverse"
           onclick="document.getElementById('t').innerHTML = document.getElementById('s').value.reverse();">
</body>
</html>

希望可以提供帮助。

在html中反转一个字符串

1 个答案: