Question

按下搜索按钮后，我的代码应该将搜索栏的输入保存到变量中并将其附加到Google链接。该功能只应在按下按钮时执行。

之前我成功了但唯一不同的是，我把“onclick”放在了HTML标签中。看起来这个代码不起作用，因为虽然还没有点击按钮，但是执行了函数searchExplore()，因此，使搜索输入的值等于null或undefined。

当我使用Google Dev Tools对其进行调试时，它立即给了我一个错误：

无法获取未定义或空引用的属性“值”

这是在我点击按钮之前发生的。

document.getElementById('searchbtn').onclick = searchExplore();

function searchExplore(){
 var input = document.getElementById('searchbar').value;
 document.getElementById('searchform').action = "https://www.google.com/search?q="+input;
}

body{
}
.search{
  text-align:center;
  background: url("http://dash.ga.co/assets/anna-bg.png");
  background-size:cover;
  background-position: center;
  padding:20px;
  }
form{
  display:inline-flex;
}
#searchbar{
  font-size:35px;
  border: 0;
  padding: 0px 0 0 20px;
  border-radius:20px 0 0 20px;
  outline: 0;
  font-family: 'Bitter', serif;
  }
#searchbtn{
  font-size:35px;
  border: 0;
  padding: 10px;
  border-radius: 0 20px 20px 0;
  outline: 0;
  width: 90px; 
  cursor: pointer;
}

#searchbar:hover,#searchbar:focus{
  box-shadow:-3px 3px 15px;
}
#searchbtn:hover,#searchbtn:focus{
  box-shadow:-.1px 3px 15px 1px;
}

<!DOCTYPE html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="mypen1.css" type="text/css"/>
  <title>MJ Search</title>
  <script type="text/javascript" src="mypen1.js"></script>
</head>
<body>
  <div class="search">
    <form id="searchform" action="">
         <input id="searchbar" type= "search" placeholder="Search & Explore..."/>
         <button id="searchbtn"><i class="fa fa-search"></i></button>
    </form>
  </div> 
</body>

Answer 1

问题在于这一行。

document.getElementById('searchbtn').onclick = searchExplore();

您正在调用searchExplore，然后将结果返回给onclick处理程序。

您可能希望将函数本身分配给onclick处理程序 - 所以不要在此处调用您的函数。

document.getElementById('searchbtn').onclick = searchExplore;

Answer 2

该错误是由初始化按钮之前运行javascript引起的。要解决此问题，只需在表单下方转移您的Javascript代码即可。这是为了消除该错误。

见下面的脚本：

＆＃13;

<!DOCTYPE html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="mypen1.css" type="text/css"/>
  <title>MJ Search</title>
  <script type="text/javascript" src="mypen1.js"></script>
  <style>
    body{
        }
        .search{
          text-align:center;
          background: url("http://dash.ga.co/assets/anna-bg.png");
          background-size:cover;
          background-position: center;
          padding:20px;
          }
        form{
          display:inline-flex;
        }
        #searchbar{
          font-size:35px;
          border: 0;
          padding: 0px 0 0 20px;
          border-radius:20px 0 0 20px;
          outline: 0;
          font-family: 'Bitter', serif;
          }
        #searchbtn{
          font-size:35px;
          border: 0;
          padding: 10px;
          border-radius: 0 20px 20px 0;
          outline: 0;
          width: 90px; 
          cursor: pointer;
        }

        #searchbar:hover,#searchbar:focus{
          box-shadow:-3px 3px 15px;
        }
        #searchbtn:hover,#searchbtn:focus{
          box-shadow:-.1px 3px 15px 1px;
        }
        </style>
</head>
<body>
  <div class="search">
    <form id="searchform" action="">
         <input id="searchbar" type= "search" placeholder="Search & Explore..."/>
         <button id="searchbtn"><i class="fa fa-search"></i></button>
    </form>
  </div> 
</body>  
 
<script>    
document.getElementById('searchbtn').onclick = searchExplore();

function searchExplore(){
 var input = document.getElementById('searchbar').value;
 document.getElementById('searchform').action = "https://www.google.com/search?q="+input;
}
</script>

＆＃13;

单击后无法从搜索栏获取属性“值”

2 个答案: