I have a rand that generates numbers from 0 to 5, I wanted to click a button to generate the number inside the input text. I did it in a way but when I click the generate button the number is generated outside the input, it follows the code:
<?php
session_start();
if(!empty($_SESSION['email'])){
}else{
echo"<script language='javascript' type='text/javascript'>alert('ArÊa Restrita.');
window.location.href='/bolao/index.php';</script>";
}
$nome=$_SESSION['nome'];
$placarc = substr(mt_rand (0,5),0,1); //gera números de para time casa 0 a 5
$placarf = substr(mt_rand (0,5),0,1); //gera números de para time fora 0 a 5
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do 'head'; qualquer outro conteÃēdo deve vir *apÃŗs* essas tags -->
<title>Lance Web</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim e Respond.js para suporte no IE8 de elementos HTML5 e media queries -->
<!-- ALERTA: Respond.js nÃŖo funciona se vocÃĒ visualizar uma pÃĄgina file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/*Aqui deixa a imagem de fundo responsiva*/
body{
background: url(../img/principal.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#font{
color:black;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
#fonttitulo{
color:black;
font-family: 'Open Sans', sans-serif;
font-size: 24px;
}
.img-responsive {
max-width:250px;
max-height:150px;
width: auto;
height: auto;
}
</style>
<!-- Aqui começa o script para gerar um placar para o time casa -->
<script>
function myFunction(){
document.getElementById("casa").innerHTML = <?php echo $placarc; ?>;
}
</script>
<!-- Aqui começa o script para gerar um placar para o time fora -->
<script>
function myFunction2(){
document.getElementById("fora").innerHTML = <?php echo $placarf; ?>;
}
</script>
</head>
<body>
<!--------------------------------------------------------- nav e o menu ------------------------------------------------------------------->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Aqui e como ira aparece em um telefone -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!-- Aqui no span, sÃŖo os 3 pontos ao abrir em um telefone -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Voltar</a>
</div>
<!-- Aqui se edita a parte do saldo -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class=""><a href="partidas.php">Cadastrar Partidas<span class="sr-only">(current)</span></a></li>
<li class=""><a href="editarpartidas.php">Editar Partidas<span class="sr-only">(current)</span></a></li>
</ul>
<!-- Aqui se edita a parte do sair -->
<ul class="nav navbar-nav navbar-right">
<li><a href="sair.php"><i class="glyphicon glyphicon-off"></i></a></li>
</ul>
</div><!-- fim da div collapse, ela faz com que abra um menu ao aumentar o site -->
</div><!-- /.container-fluid -->
</nav>
<!------------------------------------------------- Aqui começa o formulario de cadastrar os placares ------------------------------------->
<form class="form-group" action="" method="post">
<div class="container" align="center" >
<div class="col-md-4 col-md-offset-4"><br><br>
<label id="font">Time Casa</label>
<select class="form-control" name="timecasa" required>
<option selected></option>
<option value="Atletico-go">Atlético-GO</option>
<option value="Atletico-mg">Atlético-MG</option>
<option value="Atletico-pr">Atlético-PR</option>
<option value="Avai">Avaí</option>
<option value="Bahia">Bahia</option>
<option value="Botafogo">Botafogo</option>
<option value="Corinthians">Corinthians</option>
<option value="Coritiba">Coritiba</option>
<option value="Cruzeiro">Cruzeiro</option>
<option value="Chapecoense">Chapecoense</option>
</select><br>
<label id="font">Placar time Casa</label>
<div class="row">
<div class="col-md-3 col-md-offset-3 col-xs-3" id="casa">
<input class="form-control" type="text" name="placarcasa" maxlength="1" value="" style="text-align: center;" required></div>
<div class="col-xs-4">
<input class="btn btn-success submit-botao" type="submit" value="Gerar" onclick="myFunction()">
</div>
</div><hr><br><!-- Fim div row placar casa-->
<label id="font">Time Fora</label>
<select class="form-control" name="timefora" required>
<option selected></option>
<option value="Flamengo">Flamengo</option>
<option value="Fluminense">Fluminense</option>
<option value="Gremio">Grêmio</option>
<option value="Palmeiras">Palmeiras</option>
<option value="Ponte preta">Ponte Preta</option>
<option value="Santos">Santos</option>
<option value="Sao paulo">São Paulo</option>
<option value="Sport">Sport</option>
<option value="Vasco">Vasco</option>
<option value="Vitoria">Vitória</option>
</select><br>
<label id="font">Placar time fora</label>
<div class="row">
<div class="col-md-3 col-md-offset-3 col-xs-3" id="fora">
<input class="form-control" type="int" name="placarfora" maxlength="1" value="" style="text-align: center;" required></div>
<div class="col-xs-4">
<input class="btn btn-success submit-botao" type="submit" value="Gerar" onclick="myFunction2()">
</div>
</div><hr><br><!-- Fim div row placar fora-->
<div class="col-md-4 col-md-offset-1">
<a href="index.php"><input class="btn btn-danger btn-lg" type="button" value="Cancelar"></a>
</div>
<div class="col-md-5 col-md-offset-1">
<input class="btn btn-info btn-lg submit-botao" type="submit" value="Cadastrar" name="btnCadastrar">
</div>
</div><!-- Fim div mover-->
</div><!-- Fim div container -->
</form><!-- Fim formulario-->
</div><!-- Fim Div row-->
</div><!-- Fim Div container-->
<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
</body>
</html>