如何使用 JScript 制作搜索栏？答案

【问题标题】：How to use JScript to make a search bar?如何使用 JScript 制作搜索栏？
【发布时间】：2021-03-11 04:58:01
【问题描述】：

我有一个带有 CPanel 的域名。我试图创建一个搜索功能，其中 javascript 字符串将与输入 HTML 标记连接，该输入 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>

【问题讨论】：

标签： javascript html search

【解决方案1】：

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

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

另外你在使用时没有访问文本框的值：

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

你应该这样做：

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

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

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

  <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>

【讨论】：

谢谢！我将尝试代码并检查 media.asdfghjklzxcvbnm.ml
链接是：media.asdfghjklzxcvbnm.ml，我可能写错了。
虽然还在编码中
我认为昨天我处理答案时它已经失败了。现在起来了。祝你好运
我现在没有使用 asdfghjklzxcvbnm.ml 因为我可能被黑了或者之前的所有者还没有删除一些网页。