Untitled

<!DOCTYPE html>
<html>
<head>
<script>
function computeAnswers(){
	var a = add();
	document.getElementById("sum").innerHTML = a;


	var b = battle();
	document.getElementById("winner").innerHTML = b;
}

function battle(){
	var x = document.getElementById("player1").value;
	var y = document.getElementById("player2").value;
	{
	    if (x === "S") {
		    if (y === "C") {
		        return "Squirtle wins!";
		    } else if (y === "B") {
		            return "Bulbasaur wins!";
		    } else if (y === "S") {
		            return "It's a tie!";
		        }
	    }

	    else if (x === "C") {
		    if (y === "B") {
		        return "Charmander wins!";
		    } else if (y=="S"){
		    	return "Squirtle wins!";
		    } else if (y === "C") {
		            return "It's a tie!";
		        }
		    }

	    if (x === "B") {
		    if (y === "B") {
		        return "It's a tie!";
		    } else if (y=="S"){
		    	return "Bulbasaur wins!";
		    } else if (y=="C"){
		    	return "Charmander wins!";
		    }
		}
	}
}

function add(){
	var x = document.getElementById("number").value;
	var x = parseInt(x);
	return (x*(x+1))/2;
}

</script>
</head>
<body>
<h1> Let's Battle! </h1>

<form id="battle" method="get" onsubmit="computeAnswers()">
    Part 1: <br>
        <input type="number" id="number" min="1" max="10"> <br>
    Player 1:<br>
        <input type="text" id="player1"><br>
    Player 2:<br>
        <input type="text" id="player2">
    <input type="submit" value="Compute">
</form>
<p id="sum"></p>
<p id="winner"></p>
</body>
</html>