guess the number game js

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Guess the number</title>
    <style>
      	p{
  		color: rgb(3, 68, 46);
		}
		.inputBox{
  		font-family: Arial, Helvetica, sans-serif
		}
      	.button{
  	background-color: black;
  	color: blueviolet;
  	display: inline-block;
  	font-family: sans-serif;
  	padding: 7px;
  	border: blueviolet;
  	border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <p>I am thinking of a number between 1 and 100. Try and guess it.</p>
    <div class="form">
      <label for="guessField"><p>Enter a guess: </p></label> 
    <input type = "text" id="inputField" class = "inputBox"> 
    <input type = "submit" value = "Submit guess" 
           class = "button" id="submitbutton"> 
    <p id="output">Guess a number from 1 to 100!</p>
</div> 
<script>
var magicnumber = Math.floor(Math.random() * 100 + 1);
var guesses = 1
document.getElementById("submitbutton").onclick = function(){
  var playerguess = document.getElementById("inputField").value;
  if playerguess == magicnumber{
    if guesses == 1{
      document.getElementById("output").innerHTML = "Well done! You guessed my number in" + guesses + "guess! Awsome!"
    }
    else{
    document.getElementById("output").innerHTML = "Well done! You guessed my number in " + guesses + " guesses!"
    }
  if playerguess > magicnumber{
    document.getElementById("output").innerHTML = "oops! " + playerguess + " is too high! Try a lower number"
    guesses++
  }
  if playerguess < magicnumber{
    document.getElementById("output").innerHTML = "oops! " + playerguess + " is too low! Try a higher number"
    guesses++
  }
}
    </script>
  </body>
</html>
Source