Question

我希望构建一个简单的网页，可以检查字符串是否包含某些信息。我正在参加Java暑期课程，想尝试一下Javascript。也许是个坏主意？

我希望用户在表单中输入信息 - 姓名，电话号码和其他几个选项。然后我希望用户在文本区域中输入更多信息。文本区域将引用输入数据，如果匹配，它将提醒用户。

我的javascript体验有限，但我过去曾能用javascript操纵用户输入。

不确定我的问题是什么。任何提示（特别是关于风格和逻辑）非常感谢！ PS - 如果重要的话，我正在使用Bootstrap ......

提前致谢:)

HTML

       <div class="container">
        <div class="col-md-6">
         <form>
          <input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
          <input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
          <input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
          <input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
         </form>
        </div>

        <div class="col-md-6">

          <textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">  
          </textarea> <br />

        <input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="GetInput();Check();">
      </div>


        <div class="col-md-12">
         <h1>Output</h1>
            <div id="tOutPut" style="color:red;"></div>
          </div>
        </div>

JS

   GetInput()
    {
        var tNameValue = document.getElementById("Name").value;
        var tValue = document.getElementById("Number").value;
        var tArray = document.getElementById('LongText').value.split('\n');
    }
    Check( tArray, tNameValue, tValue )
    {
        for(var i = 0; i < tArray.length; i++ )
        {
        if( i === tNameVaue )
        {
            document.getElementById( 'tOutPut' ).innerText = "Name Match" <br />;
        }
        if( i === tValue )
        {
            document.getElementById( 'tOutPut' ).innerText = "Match" <br />;
        }
        }
    }

*

Answer 1

你的javascript有很多错误。这是HTML和Javascript。必须改进逻辑，但代码正在运行。

<div class="container">
    <div class="col-md-6">
     <form>
      <input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
      <input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
      <input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
      <input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
     </form>
    </div>

    <div class="col-md-6">

      <textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">  
      </textarea> <br />

    <input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="ExecuteAll();">
  </div>


    <div class="col-md-12">
     <h1>Output</h1>
        <div id="tOutPut" style="color:red;"></div>
      </div>
    </div>

这是Javascript：

var tNameValue;
var tValue;
var tArray;

function ExecuteAll()
{
    GetInput();
    Check();
}

function GetInput()
{
    tNameValue = document.getElementById("Name").value;
    tValue = document.getElementById("Number").value;
    tArray = document.getElementById('LongText').value.split('\n');
}

function Check()
{
    if (tArray != null) {
        for(var i = 0; i < tArray.length; i++ )
        {

        if( i == tNameValue )
        {
            document.getElementById( 'tOutPut' ).innerText = "Name Match <br />";
        }

        if( i == tValue )
        {
            document.getElementById( 'tOutPut' ).innerText = "Match <br />";
        }
      }
    }
}

我会告诉你我为修复错误做了什么：

为javascript函数添加了函数关键字。
将变量设置为全局变量，以便它们可用于整个代码。
验证tArray是否为空。
固定变量名称。

以下是小提琴代码：http://jsfiddle.net/3U6mE/6/

我希望它可以帮助你开始。

参考Textarea WITH / Input

1 个答案: