Estoy teniendo un tiempo tratando de resolver esto. Primero, permítanme decir que soy un novato total en javascript, pero no me he dado cuenta de esto. Quiero ejecutar dos funciones separadas, ambas haciendo referencia al valor en el cuadro de búsqueda creado en el código. La idea es que el script buscará el valor en el cuadro de búsqueda, abriendo 2 nuevas pestañas, cada una buscando el valor acompañado de diferentes términos secundarios prescritos en el código. ¿Qué necesito para ejecutar este script?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Programmable Search Engine Two</title> <link rel="stylesheet" href="style.css" /> </head> <body> <section> <div class="main"> <div class="searchBox"> <input type="text" name="" class="query" value="" /> </div> <div class="button"> <button class="searchBtn">Search</button> </div> </div> </section> <script type="text/javascript"> let query = document.querySelector(".query"); let searchBtn = document.querySelector(".searchBtn"); searchBtn.onclick = "function One(); function Two();" function One() { let url = "https://www.google.com/search?q=" + query.value + " " + "hotels"; window.open(url, (target = "blank")) }, function Two() { let url = "https://www.google.com/search?q=" + query.value + " " + "hotels"; window.open(url, (target = "blank")) }; </script> </body> </html>deberías cambiar
searchBtn.onclick = "function One(); function Two();"a
searchBtn.addEventListener('click', function() { One(); Two(); })Puedes usar Element. setAttribute() para configurar el onclick de searchBtn para llamar tanto a One() como a Two() cambiando:
searchBtn.onclick = "function One(); function Two();"a:
searchBtn.setAttribute("onclick", "One(); Two();"); const query = document.querySelector(".query"); const searchBtn = document.querySelector(".searchBtn"); searchBtn.setAttribute("onclick", "One(); Two();"); function One() { console.log(`Called function One() when query=${query.value}`); }; function Two() { console.log(`Called function Two() when query=${query.value}`); }; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Programmable Search Engine Two</title> <link rel="stylesheet" href="style.css" /> </head> <body> <section> <div class="main"> <div class="searchBox"> <input type="text" name="" class="query" value="" /> </div> <div class="button"> <button class="searchBtn">Search</button> </div> </div> </section> </body> </html>