html5與js的結合：搜索按鈕的點擊事件完成跳轉頁面

<div id="search">
    <div class="center"></div>
    <input type="text" id="searchtext" class="search" placeholder="請輸入景點" >
    <button class="button" onclick="search();">搜索</button>
</div>

很簡單的思路適合新手練手用，因爲這個旅遊網只是一個信息收集展示，就簡單將這個旅遊網的首頁的搜索功能跳轉到百度百科去展示搜索的景點。只需要添加一個onclick事件：onclick="search();"
然後在js裏寫這個函數，

function search(){
    var text=document.getElementById("searchtext").value;
    var url="https://baike.baidu.com/item/"+text;
    if(url="https://baike.baidu.com/error.html"){
        alert("請輸入正確的景點名!")
    }else{
        window.open(url, "newWindow",);
    }
}

最後再在首頁的html代碼的< /body>後導入js即可。

<script type="text/javascript" src="js/index.js">
</script>

即可完成輸入後搜索跳轉的功能。