Creé una función usando getJson que permite a un usuario buscar un usuario específico y mostrar todos sus datos.
<body> <input id="search" type="text"> <button>Search</button> <div id="results"></div> <script> $('button').on('click', function() { var user = $('#search').val(); $.getJSON("https://api.github.com/users/" + user) .done(function(user) { var br = "<br>"; var p = $("<p id='users'></p>"); var name = "Username: " + user.login + br; var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br; var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "'>" + user.html_url + "</a>" + br; var location = "Location: " + "Null" + br; var admin = "Admin: " + user.site_admin; p.append("<p>" + name + pic + homeURl + location + admin + "</p>"); $("#results").empty().append(p); }) .fail(function(jqXHR) { console.log("Error: " + jqXHR.status); }) .always(function() { console.log("Random Users Request finished"); }); }); </script> </body>Por ejemplo, si el usuario escribe "mojombo", se muestra toda la información relevante para el usuario "mojombo".
Actualmente deseo modificar esta función de modo que se acceda a estos datos haciendo clic en el nombre de usuario en lugar de buscar. Por ejemplo, si se muestra el nombre de usuario "mojombo" y el usuario hace clic en el nombre, se abrirá una nueva pestaña que muestra toda la información relevante para el usuario mojombo.
¿Cómo sería capaz de lograr esto?
Editar: Basado en su pregunta específicamente. Solo necesita agregar el atributo de destino a la etiqueta que ya tiene.
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "' target='_blank'>" + user.html_url + "</a>" + br;Aquí hay un fragmento.
$('button').on('click', function () { var user = $('#search').val(); $.getJSON("https://api.github.com/users/" + user) .done(function (user) { var br = "<br>"; var p = $("<p id='users'></p>"); var name = "Username: " + user.login + br; var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br; var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "' target='_blank'>" + user.html_url + "</a>" + br; var location = "Location: " + "Null" + br; var admin = "Admin: " + user.site_admin; p.append("<p>" + name + pic + homeURl + location + admin + "</p>"); $("#results").empty().append(p); }) .fail(function (jqXHR) { console.log("Error: " + jqXHR.status); }) .always(function () { console.log("Random Users Request finished"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="search" type="text"> <button>Search</button> <div id="results"></div>$('button').on('click', function(e) { window.open($(e.currentTarget).attr('href')); }Por lo que pude entender tu pregunta
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <body> <input id="search" type="text"> <button>Search</button> <div id="results"></div> <script> const html = $("<html></html>"); $('button').on('click', function() { var user = $('#search').val(); $.getJSON("https://api.github.com/users/" + user) .done(function(user) { var br = "<br>"; var p = $("<p id='users'></p>"); var name = "Username: " + user.login + br; var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br; var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "'>" + user.html_url + "</a>" + br; var location = "Location: " + "Null" + br; var admin = "Admin: " + user.site_admin; p.append("<p>" + name + pic + homeURl + location + admin + "</p>"); html.append($('<body>').append(p)); var w = window.open(""); w.document.write(html.html()) }) .fail(function(jqXHR) { console.log("Error: " + jqXHR.status); }) .always(function() { console.log("Random Users Request finished"); }); }); </script> </body> </html>