Question

我写了一个简单的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

稍后如果我点击更新按钮，它会重新检索上面的网址并显示正确的值。但是，如果我单击搜索按钮，则会发生同样的情况，即上述网址的值将被重新执行并且地址栏将更改为

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

如何达到预期效果:( 善意的指导:(

Answer 1

尝试

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

Answer 2

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

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);
});

Answer 3

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

<!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>

Answer 4

如何使用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);"/>

javascript：windows.location无法在第一个按钮单击时工作

4 个答案: