Хорошо, это может быть довольно сложно объяснить, но я дам ему go. У меня две HTML страницы: форма. html и дисплей. html. Страница формы имеет вход, который получает значение и затем помещает его в локальное хранилище после отправки формы. После отправки формы пользователь будет перенаправлен на страницу отображения, которая затем извлечет значение ввода с предыдущей страницы из локального хранилища, а затем отобразит значение внутри поля ввода на странице отображения. Страница отображения позже будет действовать как страница работы, которая будет отображать список работ, которые можно фильтровать по значению внутри поля ввода на той же странице. Я могу заставить функцию фильтра работать, используя onkeyup в поле ввода, но я не могу заставить работать функцию фильтра со значением ввода с предыдущей страницы, используя что-то вроде onload. Причина, по которой я использую две страницы, заключается в том, что позже я буду использовать этот код на веб-сайте, который будет иметь поле поиска на целевой странице, а затем будет перенаправлен на страницу вакансий с отфильтрованными результатами. Извините, если это было действительно трудно понять, я выложу код ниже, чтобы вы могли лучше понять.
Огромное спасибо всем, кто не торопится со временем, чтобы помочь мне с этой проблемой, очень ценится.
форма. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function passValues() {
var firstName = document.getElementById("txt").value;
localStorage.setItem("textValue", firstName);
return false;
}
</script>
</head>
<body>
<form action="display.html">
<input type="text" id="txt" />
<input type="submit" value="Click" onclick="passValues();" />
</form>
</body>
</html>
дисплей . html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Tokyo Expat Job Search</h1>
<input onload="filter()" onkeyup="filter()" id="result" type="text">
<ul id="Menu">
<li><a href="#">English Techer</a></li>
<li><a href="#">Waiter/Waitress</a></li>
<li><a href="#">Developer</a></li>
<li><a href="#">Banker</a></li>
<li><a href="#">Designer</a></li>
<li><a href="#">Logistics</a></li>
</ul>
<script>
function filter() {
var filterValue, input, ul, li, a, i;
input = document.getElementById("result");
filterValue = input.value.toUpperCase();
ul = document.getElementById("Menu");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
document.getElementById("result").value = localStorage.getItem("textValue");
</script>
</body>
</html>