Me permito señalar que estás implementando una práctica no recomendada1, que consiste en poner funciones in-line dentro de los elementos HTML.
Esto dificulta el mantenimiento del código, por ejemplo, en programas grandes, donde tengas muchos HTML diseminados, si necesitaras cambiar algo tendrás que buscar/editar todos esos HTML.
Puedes aplicar la separación de código para este caso alcanzando todos los botones con la clase boton
mediante querySelectorAll()
, luego asignas un listener a los clicks de todos esos elementos y dentro de ese listener lanzas el window.open
. Puedes usar la propiedad value
de cada botón para indicar la URL a la que se debe navegar.
Aplicando esto el HTML quedaría así (observa que las llamadas in line ya no están):
<div class="boton">
<button value="sobre_mi.html">Sobre mi</button>
</div>
<div class="boton">
<button value="habilidades.html">Habilidades</button>
</div>
<div class="boton">
<button value="proyectos.html">Proyectos</button>
</div>
<div class="boton">
<button value="contacto.html">Contacto</button>
</div>
Y en Javascript:
//Todos los button en los div con la clase boton
var allButtons = document.querySelectorAll('div.boton > button');
//Asignamos el listener
allButtons.forEach(item => {
item.addEventListener('click', function(e) {
var theURL=e.target.value;
window.open(theURL,theURL.replace(".html", ""));
});
});
Fiddle
Aquí puedes ver un FIDDLE
completo.
Notas
- Leer al respecto el apartado Separation of structure and behaviour (Separación de estructura y comportamiento), en w3.org