javascript:windows.location在单击第一个按钮时不起作用

javascript: windows.location not working at the first button click

本文关键字：第一个 按钮 不起作用 单击 windows location javascript      更新时间：2023-09-26

我写了一个简单的HTML表单，其中有2个按钮和2个javascript代码。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function test(){
var addr=window.location.search;
alert(addr);
}
function validate(){
    var newaddr=window.location.search;
    alert(newaddr);
}
</script>
</head>
<body>
<form action="">
<input type="submit" id="input2" name="buttonupdate" value="update" onclick="test();"/>
<input type="submit" id="input1" name="buttosearch" value="search" onclick="validate();"/>
</form>
</body>
</html>

我想要的是，点击"更新"按钮时，警报应该显示更新按钮的名称和值，点击搜索按钮时，搜索按钮的名称或值应该由alert（）显示。但发生的情况是，第一次点击更新按钮时，警报为空，然后地址栏变为

http://localhost:8080/button_test/check.html?buttonupdate=update

稍后，如果我点击更新按钮，它会检索上面的url并显示正确的值。但如果我点击搜索按钮，同样的情况也会发生，即上面的url值会被检索，地址栏会更改为

http://localhost:8080/button_test/check.html?buttosearch=search

如何达到预期的结果：温馨提示：（

尝试

<input type="submit" id="input2" name="buttonupdate" value="update" onclick="test(); return false;"/>

最好将事件绑定到它，这样您就可以将事件作为目标传递。

在HTML、中

<input type="submit" id="input2" name="buttonupdate" value="update" />
<input type="submit" id="input1" name="buttosearch" value="search" />

js中，

function test(e){
    // obtain address ?
    var addr=window.location.search;
    // obtain value
    var value = e.target.getAttribute("value");
    // obtain name
    var name = e.target.getAttribute("name");
    // alert
    alert(name + " - " + value);
    // stop page load
    e.preventDefault();
}
function validate(e){
    var addr=window.location.search;
    var value = e.target.getAttribute("value");
    var name = e.target.getAttribute("name");
    alert(name + " - " + value);
    e.preventDefault();
}
// start
window.addEventListener('load', function() {
    //bind event to search
    var element = document.getElementById("input1");
    element.addEventListener('click', validate);
    // bind event to update
    var element = document.getElementById("input2");
    element.addEventListener('click', test);
});

问题是变量搜索一开始为空，并且在提交后更新（这意味着在调用函数后），您应该理解这一点
但作为一个解决方案，试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
function test(){
var addr=document.getElementById("input2").value;
addr+=" "+document.getElementById("input2").name;
alert(addr);
}
function validate(){
    var addr=document.getElementById("input1").value;
addr+=" "+document.getElementById("input1").name;
alert(addr);
}
</script>
</head>
<body>
<form action="">
<input type="submit" id="input2" name="buttonupdate" value="update" onclick="test();"/>
<input type="submit" id="input1" name="buttosearch" value="search" onclick="validate();"/>
</form>
</body>
</html>

使用this作为函数的参数怎么样：

<script>
function test(button){
    alert(button.name + " and " + button.value);
}
function validate(button){
   alert(button.name + " and " + button.value);
}
</script>
<input type="submit" id="input2" name="buttonupdate" value="update" onClick="test(this);"/>
<input type="submit" id="input1" name="buttosearch" value="search" onClick="validate(this);"/>
相关文章：