我想在更改输入值时更新变量 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/