我创建了一个应用程序,允许用户在YouTube上检索观看次数最多的视频。我想包含一个验证功能,该功能将警告用户他们需要在搜索栏上输入输入,以及一个功能,该功能将清除所有搜索结果和搜索栏上的输入。我对JavaScript有点陌生,所以我一直坚持如何在代码中包含这些功能。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<script src="search.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
</head>
<body>
<input id="query" placeholder="Enter video right here" type="text"/>
<button onclick="search()">Search</button>
<pre id="response"></pre>
</body>
</html>
<!--Code from tpl/item.html-->
<div class="item">
<h2>{{title}}</h2>
<iframe class="video w100" width="640" height="360" src="//www.youtube.com/embed/{{videoid}}" frameborder="0" allowfullscreen></iframe>
</div>
答案 0 :(得分:1)
该功能将警告用户他们需要在以下位置输入输入 搜索栏
在search()函数中,添加条件以检查是否已输入值。如果为true,请运行列出的代码。如果为假,则使用alert()。
function search(){
if(document.getElementById('query').value.trim().length > 0){
// your code
} else {
alert('please enter a value into the search');
}
}
该功能将清除所有搜索结果和搜索栏上的输入
要清除元素的任何值或内部HTML,请将element.value或element.innerHTML设置为等于空。范例:
document.getElementById('query').value = '';
document.getElementById('response').innerHTML = '';
答案 1 :(得分:0)
HTML:
<div class="search-wrap">
<input id="query" placeholder="Enter video right here" type="text"/>
<button onclick="search()">Search</button>
<pre id="response"></pre>
</div>
JS:
$(document).ready(function() {
// get submit button DOM
const buttonSubmit = $('yourSubmitButton');
// when you click the submit button
buttonSubmit.click(function() {
const searchValue = $(this).parent('.search-wrap').find('#query').val();
if(searchValue === '') {
alert('You must input something');
return false;
}
/* Do whatever you want in here*/
search();
/* clear result after search */
$(this).parent('.search-wrap').find('#query').val('');
})
})
我将HTML代码包装在“ .search-wrap”中,如果需要,请最终使用jQuery。有关更多信息,请搜索jQuery DOM树遍历