I have two pages, signin1.html and index.html signin1.html has a form that when clicking on the button is reedirige to index.html but there the problem arises because it does not redirect it
var $ = window.jQuery
var page = window.page
page('/',home)
page('/signin1',signin)
page()
var hometemplate = ' <section class="Layout">
<section class="Layout-antagonist">
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
</section>
<section class="Layout-main">
<div class="Layout-status">
<div class="Status">
<div class="Status">
<h3 class="Status-player">usuario1</h3>
<p class="Status-points">100000</p>
</div>
<div class="Status">
<h3 class="Status-player">usuario2</h3>
<p class="Status-points">100000</p>
</div>
</div>
</div>
<div class="Layout-battle">
<div class="Battle">
<div class="Battle-antagonist">
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
</div>
<div class="Battle-player">
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
</div>
</div>
</div>
<div class="Layout-phases">
<div class="Phases">
<p>OMG ese ataque fue muy fuerte</p>
</div>
</div>
</section>
<section class="Layout-player">
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
<div class="card">
<h2 class="card-name">Wolverine</h2><img src="./public/images/Wolverine.jpg" alt="Wolverine" class="card-image"/>
<div class="card-description">Wolverine es muy poderoso</div>
<div class="card-attack">500 puntos de ataque</div>
</div>
</section>
</section>'
var signintemplate = ' <label>ingresa tu nombre</label>
<input type="text" id="firstName" name="firstName" tabindex="1" Placeholder="Ingrese el usuario" class="Signin-name-input"/>
<button tabindex="2" class="Signin-button">Ingresar</button> '
function home(){
console.log('estoy navegando al home')
debugger
let $templatehome = $(hometemplate)
$('.app-container').append($templatehome)
}
function signin(){
console.log('estoy navegando al Signin')
let $templatesignin = $(signintemplate)
$('.app-container').append($templatesignin)
$('.Signin-button').on('click',function(event){
event.preventDefault()
debugger
var username = $('.Signin-name-input')[0].value
if (!username) return alert('Ingrese un nombre valido!')
page('/')
})
}
este es signin1.html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/visionmedia/page.js/master/page.js"></script>
<!DOCTYPE html5>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title Marvel Game Card="Marvel Game Card"></title>
</head>
<body>
<label>ingresa tu nombre</label>
<input type="text" id="firstName" name="firstName" tabindex="1" Placeholder="Ingrese el usuario" class="Signin-name-input"/>
<button tabindex="2" class="Signin-button">Ingresar</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/visionmedia/page.js/master/page.js"></script>
<script src="./public/util/routes9.js"></script>
</body>
</html>this is index.html
<script src="https://cdn.rawgit.com/visionmedia/page.js/master/page.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
doctype html5
html(lang="es")
head
meta(charset="UTF-8")
title("Marvel Game Card")
link(rel="stylesheet",href="./public/css/app.css")
body
.app-container
script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")
script(src="https://cdn.rawgit.com/visionmedia/page.js/master/page.js")
script(src="./public/util/routes9.js")