javascript - 更改后无法更新输入值

标签 javascript

我想在更改输入值时更新变量 searchUrl。但是,input.value 不会向 searchUrl 添加任何内容。另一方面,如果您在控制台上看到它,input.value 每次更新时都会有不同的值,但它不会添加到 searchUrl 中。我做错了什么?

let input = Array.prototype.slice.call(document.getElementsByClassName("searchbox__input"))[0];
let wikiUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&uselang=user&search=";

let searchUrl = wikiUrl + input.value;

$(".searchbox__input").on("changed keyup", function() {
    console.log(searchUrl);
    console.log(input.value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="wikipedia.css">
    </head>
    <body>
        <div class="searchbox">
            <input class="searchbox__input" type="text">
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="wikipedia.js"></script>
    </body>

最佳答案

将您的 searchUrl 移动到事件内,searchUrl 的值不会更新,因为您没有在 更改 keyup 期间添加输入的值 事件

let input = Array.prototype.slice.call(document.getElementsByClassName("searchbox__input"))[0];
let wikiUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&uselang=user&search=";
let searchUrl


$(".searchbox__input").on("changed keyup", function() {
 searchUrl = wikiUrl + input.value;
    console.log(searchUrl);
    console.log(input.value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="wikipedia.css">
    </head>
    <body>
        <div class="searchbox">
            <input class="searchbox__input" type="text">
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="wikipedia.js"></script>
    </body>

关于javascript - 更改后无法更新输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49835685/

相关文章:

javascript - 全局模板助手在meteor部署服务器上未定义

javascript - react native 相机检测人脸

javascript - 如何在 Vue 中切换要加密和未加密的输入字段的内容?

javascript - 使用 CSS 将 Muses 广播播放器居中

javascript - 使用 jquery 定位内联样式不起作用

javascript - 显示/隐藏密码弄乱了我的 CSS 代码

javascript - querySelector 方法参数放入反引号中,为什么?

javascript - 在 Javascript 中使用多功能数组

javascript - React.js 测试未能找到组件

javascript - nodejs + WebSockets - 通过消息拒绝连接