zachThePerson zachThePerson - 1 year ago 59
HTML Question

Everything changes back when i hit enter (javascript and html)

Here is a fiddle:


And here is my code:

<!Doctype HTML>

<meta charset="utf-8" />
<title>Add Players</title>
background: #414141;

background: #87828A;
padding: 20px;
width: 400px;
border-radius: 20px;

margin-bottom: 10px;

display: block;
float: left;
width: 20px;
height: 20px;
margin-right: 10px;

float: right;
<script src=""></script>
var players = {
playerCount : 1,
player1 : {
active: false,
name : '',
score : 0,
player2 : {
active: false,
name : '',
score : 0,
player3 : {
active: false,
name : '',
score : 0,
player4 : {
active: false,
name : '',
score : 0,

function addPlayer(){
var name = document.getElementById('playerName').value

if (name == ''){
alert('You have not entered anything in the name box!')
else if(players.playerCount <= 4){
var curPlayer = 'player' + players.playerCount
players[curPlayer].name = name;
players[curPlayer].active = true;


function updatePlayers(){
for (var i = 1; i <= 4; i++){
if (players['player' + i].active){
$('#player' + i).fadeIn('slow')
$('#player' + i).fadeOut('slow')

document.getElementById('player'+i+'name').innerHTML = players['player' + i].name
document.getElementById('player'+i+'score').innerHTML = players['player' + i].score

<div id="players" style="float: left;">

<div class="player" id="player1" style="display: none">
<div class="playersquare" style="background: green"></div>
<span class="playerName" id="player1name">Player</span>
<span class="score" id="player1score">0</span>

<div class="player" id="player2" style="display: none">
<div class="playersquare" style="background: red"></div>
<span class="playerName" id="player2name">Player</span>
<span class="score" id="player2score">0</span>

<div class="player" id="player3" style="display: none">
<div class="playersquare" style="background: blue"></div>
<span class="playerName" id="player3name">Player</span>
<span class="score" id="player3score">0</span>

<div class="player" id="player4" style="display: none">
<div class="playersquare" style="background: yellow"></div>
<span class="playerName" id="player4name">Player</span>
<span class="score" id="player4score">0</span>

<form action="" method="">
<input type="text" id="playerName"/>
<input type="button" value="add" onclick="addPlayer()"/>


I don't know why, but if I add some players, and then go to add another one, but hit enter while the text box is selected, everything vanishes. Why is that?

I am still sort of new to JS, so i don't even know where to start looking for an answer

Answer Source

When you hit enter the textfield parent form action attribute gets triggered & since actions="" is empty nothing really happens except you loose the page you were on.

You can do the following to fix this:

  • Add this onSubmit="return false;" in your form tag, like this:

    <form action="" method="" onSubmit="return false;">
  • But if you want to do something else on onSubmit but don't want the enter key from doing it use this script:

    $('#formid').bind("keyup keypress", function(e) {
        var code = e.keyCode || e.which; 
        if (code  == 13) {               
            return false;