Javascript 单击按钮时执行JS document.getElementById

我对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>

window.location.href=”http://www.thenewendurancefitness.com/“+document.getElementById（'test'）.value；

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

现在，当我加载页面时，它会自动执行并转到url。

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

函数fnc（）{
window.location.href=”http://www.thenewendurancefitness.com/“+document.getElementById（'test'）.value；
}

您需要将代码包装到函数中，然后根据事件调用函数。这里是按钮的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>

函数foo（）{
window.location.href=”http://www.thenewendurancefitness.com/“+document.getElementById（'test'）.value；
}

---

请注意，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>

document.getElementById（'button'）。addEventListener（'click'，function（）{
var val=document.getElementById（'test'）。值；
window.location.href=”http://www.thenewendurancefitness.com/“+val；
}，假）：

您有两个相同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);

这应该可以达到目的

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

函数提交（）{
location.href=”http://www.thenewendurancefitness.com/“+document.getElementById（'test'）.value；
}

@j08691-这是一个可怕的答案，我也会投反对票。当有onclick属性可用时，使用addEventListener是一个多么有用的工具啊！我需要一条毛巾来吸收滴水的讽刺。想好好笑一下吗？了解Connor对我的答案的评论。这里是我对“代码转储”的a-1，我感谢你的回答，但这无助于任何人解决根本问题，如果你能改进你的答案，我很高兴改变我的投票，并解释这是什么和为什么。你答案中的代码是错误的。必须删除onclick属性中的括号才能使其正常工作