为什么脚本没有按预期迭代for循环?

Why is the script not iterating the for loop as expected?

本文关键字:迭代 for 循环 脚本 为什么      更新时间:2023-09-26

我希望在单击提交按钮时,脚本检查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>

您没有向算法函数传递参数。从算法函数中删除参数。将算法函数更改为

function algo(){
      var search = document.getElementById('BookName').value;
      for(var name in bookDirectory){
          if(bookDirectory[name].bookName === search){
              alert(bookDirectory[name].bookTag1);
          }
      }
  };
  1. type="submit"改为type="button"提交就像发出服务器请求并刷新页面或使用<button>

<button id="Searchbtn" onclick="algo()"> Test </button>
  • 您没有向algo函数传递搜索参数
  • 函数algo() {

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

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

    just change

    onclick="algo()"
    

    onsubmit="algo()"