Question

我正在尝试创建一个简单的Web应用程序。当我输入“（Y）”时，就像在Facebook聊天中一样，它变成了竖起大拇指的图标。同样地，我试图用以下代码做类似的事情。但这对我不起作用。我不是JavaScript专家。我需要一些帮助，说明代码有什么问题？

我以一种方式制作代码，如果我输入“y”，它将返回LIKE。我想知道如何在“y”输入后显示一个图标。

 <html>
        <head>
            <title>Emogic</title>
        </head>
        <body>
        <input type="text" id="input">
        <input onclick="appear()" type="submit">
        <p id="output"></p>


        <script>
        function appear(){

            var value = document.getElementByid("input").value
            var result = document.getElementById("output").innerHTML
            if(value == "y"){
                result = "LIKE"
            }
            else if(value == ""){
                alert("You must enter a valid character.");
            }
            else{
                alert("Character not recognised.");
            }
        }

        </script>
        </body>
    </html>

Answer 1

您的代码中存在一些问题/拼写错误：
它是document.getElementById()，I中有一个大写Id result将是一个字符串，包含元素的innerHTML，但不是指向此innerHTML的指针：当您将result设置为其他值时，它会赢得' t按预期更改元素的innerHTML。因此，您需要创建指向该元素的指针，然后从指针设置其innerHTML。

您的代码的快速修复将是：

function appear() {

  var value = document.getElementById("input").value;
  var output = document.getElementById("output");
  if (value == "y") {
    output.innerHTML = "LIKE";
  } else if (value == "") {
    alert("You must enter a valid character.");
  } else {
    alert("Character not recognised.");
  }

}

<input type="text" id="input" value="y">
<input onclick="appear()" type="submit">
<p id="output"></p>

但您会发现，您的用户必须准确输入"y"并且只能输入"y"才能使用。

我认为你应该使用带有正则表达式的String.replace()方法来获取模式的所有出现，即"(Y)"它可能是

function appear() {
  
  var value = document.getElementById("input").value;
  var output = document.getElementById("output");
  // The Regular Expression we're after
  var reg = /\(Y\)/g;
  // your replacement string
  var replacement = 'LIKE';
  // if we found one or more times the pattern
  if (value.match(reg).length > 0) {
    output.innerHTML = value.replace(reg, replacement);
  } else if (value == "") {
    alert("You must enter a valid character.");
  } else {
    alert("Character not recognised.");
  }
  
}

<input type="text" id="input" value="I (Y) it (Y) that">
<input onclick="appear()" type="submit">
<p id="output"></p>

Javascript - 文本输入到图标

1 个答案: