Question

我对JavaScript非常陌生，所以请耐心等待。

我有以下代码：

<input id="test" name="test" type="text" value="" /> 
<input id="test" type="button" value="Go!" /> 
<script type="text/javascript">
    window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
</script>

我希望代码只能在按下按钮时执行。该功能是将用户输入数据添加到URL的末尾，然后在单击按钮时加载该URL。

截至目前，当我加载页面时，它会自动执行并转到网址。

Answer 1

你有两个具有相同ID的输入字段，这是不行的！将第二个改为不同的东西！

将您当前的javascript代码放入函数

function clickHandler(event) {
    // Your code...
}

将事件监听器附加到容器

var myContainer;

// assign element from DOM
myContainer = document.getElementById(ID_OF_CONTAINER);

// attach event handler
myContainer.addEventListener('click', clickHandler);

应该做的伎俩

Answer 2

<input id="test" name="test" type="text" value="" /> 
<input id="test2" type="button" onclick="fnc()" value="Go!" /> 
<script type="text/javascript">
function fnc(){
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}

</script>

Answer 3

您需要将代码包装在函数中，然后根据事件调用函数。这里，按钮的onclick事件。请注意，ID必须是唯一的。将您的代码更改为：

<input id="test" name="test" type="text" value="" /> 
<input id="test2" type="button" value="Go!" onclick="foo()" /> 
<script type="text/javascript">
function foo(){
    window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}
</script>

<强> jsFiddle example

Answer 4

请注意，ID是唯一的，您可以为该

使用事件侦听器

<input id="test" name="test" type="text" value="" /> 
<input id="button" type="button" value="Go!" /> 

<script type="text/javascript">
    document.getElementById('button').addEventListener('click', function() {
        var val = document.getElementById('test').value;
        window.location.href="http://www.thenewendurancefitness.com/" + val;
    }, false):

</script>

Answer 5

<form onsubmit="return submit()">
    <input id="test" name="test" type="text" value="" /> 
    <input id="submit" type="submit" value="Go!" />
</form>
<script type="text/javascript">
function submit() {
    location.href="http://www.thenewendurancefitness.com/"+document.getElementById('test').value;
}
</script>

JS document.getElementById执行按钮单击

5 个答案: