Question

我有以下脚本

<script type= 'text/javascript'>
        function displayPlayer() {
            var input = document.getElementById("player_stuff").elements;
            var position = input[0];
            var player_id = input[1];

            document.getElementById('disp_player').innerHTML = position + player_id
        }
</script>

和一个简单的HTML表单

<form id = 'player_stuff' onsubmit = 'displayPlayer()'>
                    Player's Position:<br>
                    <input type="radio" name="position" value="p1" checked>Position One
                    <input type="radio" name="position" value="p2" checked>Position Two
                    <input type="radio" name="position" value="p3" checked>Position Three
                    <input type="radio" name="position" value="p4" checked>Positin Four
                    <br/>
                    Add by Player ID:<br>
                    <input type='text' name='player_id'>
                    <input type="submit" value="Submit Player" id='smit' >
</form>

<div id = 'roster'>
    <h3>Current Roster</h3>
    <p id= 'disp_player'></p>
</div>

我的想法是，当我点击提交播放器按钮时，它会触发 displayPlayer（）功能，并将位置名称和玩家ID添加到 <p id= 'disp_player'></p>标记。

我做错了什么，因为什么都没有出现？

Answer 1

使用onsubmit事件。

您可以将onsubmit事件添加到form：

<form id = 'player_stuff' onsubmit="displayPlayer()">

从提交按钮中删除onclick：

<input type="submit" value="Submit Player" id='smit'>

修改

Javascript也有错误。变化：

document.getElementById('disp_player').innerHTML = position + player_id

为：

document.getElementById('disp_player').innerHTML = position.value + player_id.value;

Answer 2

您可以避免使用<button type="button">一起提交所有内容，然后绑定onclick的{{1}}事件。您可以通过使用button来避免输入列表来简化操作。

querySelector

然后使用<form id = 'player_stuff'> Player's Position:<br> <input type="radio" name="position" value="p1" checked>Position One <input type="radio" name="position" value="p2">Position Two <input type="radio" name="position" value="p3">Position Three <input type="radio" name="position" value="p4">Positin Four <br/> Add by Player ID:<br> <input type='text' name='player_id'> <input type="button" value="Submit Player" id='smit' > </form> <div id="disp_player"></div>和querySelector

querySelectorAll

查看小提琴here

Answer 3

您必须停止表单的默认操作，即提交表单。由于您没有在表单中声明方法，例如：

<form id = 'player_stuff' action="#" method="get">

表单将默认为get方法，您可以在提交表单时看到。您的网址将更改为“yourDomain.com/page.html?position=p4&player_id=1”

要阻止表单的默认操作，请在函数后添加：

document.getElementById("player_stuff").addEventListener("click", function(event){
    event.preventDefault();
});

这将继续运行您的函数，同时停止表单元素的默认函数。请注意，您将不会再看到添加了“？position = p4＆amp; player_id = 1”的网址，假设您只使用“yourDomain.com/page.html”重新加载了您的网页

将javascript onclick（）添加到HTML表单提交

3 个答案: