Question

我希望在单击提交按钮时，脚本会检查bookDirectory对象中的输入，如果找到，则显示其指定的凭据。但是，它不会这样做，输入栏只是刷新。我做错了什么？

<!DOCTYPE html>
<html>
<head>
  <title>This is just a test</title>
  <script src="script.js"></script>

</head>

<body>
  <h1>This is going to be the search bar</h1>
  <form>
  <input type="text" id="BookName" name="Book1">
  <input type="submit" id="Searchbtn" onclick="algo()">
</form>
  <script>

  var search = document.getElementById('BookName');

  var bookDirectory = {};
  bookDirectory.book1 = {
    bookName : "book1",
    bookTag1 : "MAIT",
    bookTag2 : "3rd Semester"
  };

  bookDirectory.book2 = {
    bookName : "book2",
    bookTag1 : "NIEC",
    bookTag2 : "1st Semester"
  };

  bookDirectory.book3 = {
    bookName : "book3",
    bookTag1 : "USIT",
    bookTag2 : "5th Semester"
  };

  function algo(search){
      for(var name in bookDirectory){
          if(bookDirectory[name].bookName === search){
              alert(bookDirectory[name].bookTag1);
          }
      }
  };
  </script>
  <h2 id="Book1">This is going to be the book</h2>

</body>
</html>

Answer 1

您没有将参数传递给算法功能。从算法功能中删除参数。将您的算法功能更改为

function algo(){
      var search = document.getElementById('BookName').value;
      for(var name in bookDirectory){
          if(bookDirectory[name].bookName === search){
              alert(bookDirectory[name].bookTag1);
          }
      }
  };

Answer 2

将type="submit"更改为键入=＆＃34;按钮＆＃34; 提交就像发出服务器请求并刷新页面或使用<button>

<button id="Searchbtn" onclick="algo()"> Test </button>

您没有将搜索参数传递给algo函数

function algo（）{

    var search = document.getElementById("BookName").value;

    for (var name in bookDirectory) {
        if (bookDirectory[name].bookName === search) {
            alert(bookDirectory[name].bookTag1);
        }
    }
};

每次调用函数时从文本框中获取值

Answer 3

只需更改

onclick="algo()"

到

onsubmit="algo()"

为什么脚本不按预期迭代for循环？

3 个答案: