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>
You should change
searchBtn.onclick = "function One(); function Two();"
to
searchBtn.addEventListener('click', function() {
One();
Two();
})
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>