CODEWITHSUNDEEP
javascript
user17800250
user17800250

Reputation: 33

Execute two functions with one button click

I'm having a time trying to figure this one out. First, let me say I'm a total javascript novice, but I haven't figured this out. I want to run two separate functions, both referencing the value in the search box created in the code. The idea is, the script will search for the value in the search box, opening up 2 new tabs, each searching the value accompanied by different secondary terms prescribed in the code. What do I need to get this script to run?

<!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>

Upvotes: 2

Views: 117

Answers (2)

Sash Sinha
Sash Sinha

Reputation: 22360

You can use Element.setAttribute() to set the onclick of searchBtn to call both One() and Two() by changing:

searchBtn.onclick = "function One(); function Two();"

to:

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>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

You should change

searchBtn.onclick = "function One(); function Two();"

to

searchBtn.addEventListener('click', function() {
  One();
  Two();
})

Upvotes: 6

Related Questions