0

Tengo 4 botones a los que que quiero enlazar un html cada uno, y que se abran en pestaña nueva.

    <div class="boton">
        <button onclick="window.open('sobre_mi.html')">Sobre mi</button>
    </div>
    <div class="boton">
        <button onclick="window.open('habilidades.html')">Habilidades</button>
    </div>
    <div class="boton">
        <button onclick="window.open('proyectos.html')">Proyectos</button>
    </div>
     <div class="boton">
        <button onclick="window.open('contacto.html')">Contacto</button>
    </div>

Bueno, pues solo funciona el primero. Alguien sabe por qué?

1
  • 1
    A mi se me abren los cuatro, cada uno con su pestañita
    – masterguru
    Commented el 14 jun. 2022 a las 17:23

2 respuestas 2

1

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

  1. Leer al respecto el apartado Separation of structure and behaviour (Separación de estructura y comportamiento), en w3.org
1

Primero que nada te recomiendo que le asignes un ID a cada botón

<button id="aboutme" onclick="window.open('sobre_mi.html')">Sobre mi</button>

y revisa si no te arroja algún error de ejecución en el inspector del navegador, sería bueno que nos compartieras que botón no funciona y el código de la referencia que debería abrir te dejo un código a ver si te sirve:

<a href="AntSdoNeg.asp?Usr=<%=Usuario%>" target="_blank" onclick="window.open(this.href, this.target, 'width=1100,height=500,top=50,left=100'); return false;">Antigüedad de Saldos por Negocio</a></li>

el código es solo para que te des un ejemplo, no lo implementes tal cual por que usa VBScript.

1
  • Genial, no se que ha pasado pero solo he quitado div que no usaba para nada y he puesto id como indicabas y al refrescar funciona. Genial, muchas gracias
    – Jose L.
    Commented el 14 jun. 2022 a las 17:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.