您好我创建了一个简单的应用程序,允许我进行数据库搜索。我用javascript创建了一个带有函数的html页面。这是显示我的index.html的内容
<hmtl>
<body onload="initialize()">
<h1>Choose your route:</h1>
<form action="/find" method="POST" autocomplete="on">
<td><input type="text" name="mypos" placeholder="Your Position" size="20" /></td>
<td><input type="text" name="yourpos" placeholder="Destination" size="20" /></td>
<td><button type="submit">Search</button></td>
<button type="Reset" value="Reset">Reset</button>
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
在更改中插入坐标然后搜索之后,我的输出将是一个单独的行,如果路径存在与否,我可以打印到屏幕,即:找不到路线或找到路线。我的问题是在搜索中插入一个按钮返回到这一点,以便返回到起始页面或index.html。问题是我只有一个html页面(index.html),所以任何命令只能将它插入搜索页面而不是结果页面(结果页面只是一个打印的字符串不是另一个html页面)。该页面还与烧瓶相互作用。我希望我很清楚。非常感谢您的关注。
据我所知,你所拥有的是index.html
做回发,并且该回发的响应使用插入结果重新定义了一个不同的页面。这就是你要回到index.html
的结果页面。嗯,你有两个选择:
1.在结果页面中,创建一个如下按钮:
<button class="backbutton">Back</button>
<script>
// Somewhere in your initialization code:
const backbutton = document.querySelector('.backbutton');
backbutton.addEventListener('click', function(){
window.history.back();
});
</script>
这为您提供了一些灵活性,因为它不依赖于您的index.html
页面的路线。
2.只需在结果页面中包含指向index.html
页面的链接:
<a href="index.html">Back to search form</button>
如果要在提交(并清除)表单后使用表单输入中的值,则需要事先在某处记住该值。一种方法是为blur
事件添加(到输入)一个监听器(当输入失去焦点时发生,这意味着用户已完成编辑输入)。
在侦听器函数中,您可以将值存储在javascript变量中以供日后使用,例如
const firstMyPosInput = document.getElementsByName("myPos")[0];
let myPosValue = firstMyPosInput.value;
现在你可以添加一个新的按钮元素(比如<button id="myBtn">Try again</button>
并给它一个点击监听器,将输入的值设置回像之前的firstMyPosInput.value = myPosValue
那样。