时间戳

首页 > 解决方案 > 如何使用 JScript 制作搜索栏？

javascript - 如何使用 JScript 制作搜索栏？

问题描述

我有一个带有 CPanel 的域名。我正在尝试创建一个搜索功能，其中一个 javascript 字符串将与一个输入 HTML 标签连接，该标签使用document.getElementById(). 还有一个带有 onlick 事件的按钮，<button id="btn-js" onclick="location.href=text_2">Search</button> 其中 text_2 是网站 URL 字符串和输入 ID 的组合。但是当我运行它时，它会转到我的网站 URL，但在错误页面上。我试图在 onclick 事件之后添加它，但它不起作用。

完整代码：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta name="author" content="PoopyPooper">
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="icon" href="http://img.asdfghjklzxcvbnm.ml/icons/mainIcon.png">
        <meta charset="utf-8">
        <meta name="description" content="The place where we store images, icons and many more media for easy use.">
        <title>The place where we add media!!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
        var search_feature_text1 = 'http://media.asdfghjklzxcvbnm.ml/';
            var lol = document.getElementById("id") //LOL
            var text_2 = search_feature_text1+lol;
        </script>
    </head>
    <body>
        <p class="head">MEDIA!!</p><br><br><br>
        <p class="body-1">Type the url on your web or just type in the image directory(All the text with slashes (if there 
        are) After media.asdfghjklzxcvbnm.ml/)
            here: <br></p>
        <p class="content-change">http://media.asddfghjklzxcvbnm.ml/<input type="text" id="id" placeholder="Your directory here">
        <button id="btn-js" onclick="location.href=text_2">Search</button></p>
    </body>
</html>

标签： javascripthtmlsearch

解决方案

我不确定您在代码“http://media.asddfghjklzxcvbnm.ml/”中使用的 URL

我尝试直接导航到“http://media.asddfghjklzxcvbnm.ml/”，但收到“无法访问此站点”

此外，当您使用时，您不会访问文本框的值：

 var lol = document.getElementById("id");

你应该做：

 var lol = document.getElementById("id").value;

如果用户没有在文本框中输入任何内容，则对应的值为 null

我更新了您的代码，只是作为调用单击搜索按钮的事件侦听器的演示

  <button id="btn-js" onclick="navigate()">Search</button></p>

所以在按钮单击时，将调用导航功能（它是按钮单击事件监听器）

导航功能在脚本标签中声明，它将捕获用户输入并将其连接到您的硬编码字符串变量“http://media.asddfghjklzxcvbnm.ml/”，但为了演示我替换它与“http://www.google”一起让用户在文本框中强制键入“.com”以显示谷歌页面

TODO：检查您的域并替换代码中的硬编码域，至少在捕获值之后和导航到目标 url（使用 if 语句）之前，确保用户输入不为空或不为空。

签出此代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta name="author" content="PoopyPooper">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- <link rel="icon" href="http://img.asdfghjklzxcvbnm.ml/icons/mainIcon.png"> -->
    <meta charset="utf-8">
    <meta name="description" content="The place where we store images, icons and many more media for easy use.">
    <title>The place where we add media!!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    

    function navigate(){
        var search_feature_text1 = 'http://www.google';
        var textVar = document.getElementById("textVarId").value; //LOL
        var text_2 = search_feature_text1+textVar;
        location.href=text_2
    }
        
    </script>
</head>
<body>
    <p class="head">MEDIA!!</p><br><br><br>
    <p class="body-1">This is a demo!! Just type the '.com' in the text box and search to navigate to 'http://www.google.com': <br></p>
    <p class="content-change">http://www.google<input type="text" id="textVarId" placeholder="Your directory here">
    <button id="btn-js" onclick="navigate()">Search</button></p>
</body>
</html>

推荐阅读