Execute two functions with one button click - javascript

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>

Related

script.js:23 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

I have 3 html files for this page. index.html, positive review page and negative review page. I already have my JavaScript redirected to the right pages after clicking the emojis feedback and then the button. After clicking the button depending on the emojis clicked it redirects to the negative review page, if the emoji selected is neutral or unhappy and, if the emoji selected is satisfied it redirects to the positive review page. I am now stuck with subject line error in the console. The below is my Javascript file, followed by index.html file. Kindly assist me, thanks in advance.
const sendButton = document.querySelector("#send");
const panelContainer = document.querySelector(".panel-container");
const ratings = document.querySelectorAll(".rating");
const experience = document.querySelectorAll(".active small");
const removeActive = () => {
for (let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove("active");
}
};
panelContainer.addEventListener("click", (e) => {
if (e.target.parentNode.classList.contains("rating")) {
removeActive();
e.target.parentNode.classList.add("active");
}
});
sendButton.addEventListener("click", () => {
const experience = document.querySelector(".active small");
console.log(experience);
if (
experience.innerHTML === "Unhappy" ||
experience.innerHTML === "Neutral"
) {
window.location = "negative_review.html";
} else {
window.location = "positive_review.html";
}
});
index.html
<!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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<h2>Welcome Text</h2>
<strong
>How was your experience <br />
with us?
</strong>
<div class="ratings-container">
<div class="rating">
<img
src="https://cdn-icons-png.flaticon.com/128/742/742752.png"
alt=""
/>
<small>Unhappy</small>
</div>
<div class="rating">
<img
src="https://cdn-icons-png.flaticon.com/128/725/725085.png"
alt=""
/>
<small>Neutral</small>
</div>
<div class="rating active">
<img
src="https://cdn-icons-png.flaticon.com/128/166/166549.png"
alt=""
/>
<small>Satisfied</small>
</div>
</div>
<form>
<label for="feedback">Please Tell Us About Your Experience</label>
<textarea name="" id="" maxlength="350" cols="30" rows="10"></textarea>
</form>
<button class="btn" id="send">Send Review</button>
</div>
<script src="script.js"></script>
</body>
</html>
negative review. html
<!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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<!-- <form> -->
<strong>Thank you!</strong> <i class="fa-solid fa-heart"></i>
<br/>
<br/>
One of our team members will review your comments <br />
and reach out to you to resolve any issues.
<!-- </form> -->
</div>
<script src="script.js"></script>
</body>
</html>

On the negative review page, there isn't a button with the id send, so your querySelector call in line 1 returns null. To fix this, you should conditionally add an event listener like so:
if (sendButton !== null) {
sendButton.addEventListener("click", () => {
const experience = document.querySelector(".active small");
console.log(experience);
if (
experience.innerHTML === "Unhappy" ||
experience.innerHTML === "Neutral"
) {
window.location = "negative_review.html";
} else {
window.location = "positive_review.html";
}
});
}

something happens when I add .value in different locations

so I tried to add .value in two differnet locations
and I just would like to know why
HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<input type="number" class="guess" name="number" />
<button class="btn check">Check!</button>
<script src="script.js"></script>
</body>
</html>
javascript code 1 :
var input = document.querySelector(".guess").value
const check = document.querySelector(".check")
const message = document.querySelector(".message")
var score = document.querySelector('.score')
var highScore = document.querySelector('.highscore')
check.addEventListener("click", function(){
console.log(input)
})
result : will not log the input's value
javascript code 2 :
var input = document.querySelector(".guess")
const check = document.querySelector(".check")
const message = document.querySelector(".message")
var score = document.querySelector('.score')
var highScore = document.querySelector('.highscore')
check.addEventListener("click", function(){
console.log(input.value)
})
result: will log the input's value

In the first case it gets the value when the page loads, in the second when you click the button it gets the value again, updated from the input

Javascript Input value returns undefined (To do list program)

For the past day ive been banging my head to the wall i just cant get this to work
every time i try to create a to do list it returns undefined and i cant seem to detect what went wrong with the code
Im still in the learning process so please go easy
function addToList() {
var item = document.getElementById("candidate").Value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<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>Document</title>
</head>
<body>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>

This must have been frustrating. You used a capital V for value.
.Value is an invalid property. You're looking for .value
function addToList() {
var item = document.getElementById("candidate").value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<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>Document</title>
</head>
<body>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>

JS printing img as if it already had src

I have these tests html/js files. What I'm trying to do is show that the original image doesn't have the src attribute, and then show that it is actually there, or that is the expected behavior.
What is actually happening is that it is printing the image as if it already had the src attribute.
<!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>Práctica DOM JS</title>
<script src="index.js"></script>
</head>
<body>
<h1 id="demo" class="clase1">Nada</h1>
<img id="imagen" />
<div class="clase1"></div>
</body>
</html>
function foo() {
document.getElementById("demo").innerHTML += " Hola Mundo!";
let imagen = document.getElementById("imagen");
console.log(imagen);
imagen.src = "../assets/accessible-icon-brands.svg";
console.log(imagen);
setTimeout(() => {
imagen.src =
"https://i1.wp.com/elanillounico.com/wp-content/uploads/2015/03/JRR-Tolkien15.jpg?fit=760%2C1076&ssl=1";
}, 5000);
}
window.onload = foo;

The browser console may be lazily evaluating the element object. You could log the outerHTML instead.
console.log(imagen.outerHTML);
imagen.src = "../assets/accessible-icon-brands.svg";
console.log(imagen.outerHTML);

JavaScript page reload timer with alert

What I am trying to do is after 59 minutes reload the page and after the page is reload display a message stating that the page has been reload. Then set the timer again and repeat the same thing. I am having trouble with hiding and displaying the alert and also a little lost on the logic after the first refresh.
This is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.Bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<script language="JavaScript"> <!--
function checkRefresh()
{
if( document.refreshForm.visited.value == "" )
{
// This is a fresh page load
document.refreshForm.visited.value = "1";
document.getElementById(a).style.visibility="hidden";
window.setTimeout(myalertfunction, 59 * 60 * 1000)
}
else
{
document.getElementById(a).style.visibility="visible";
// This is a page refresh
window.setTimeout(myalertfunction, 59 * 60 * 1000)
}
} -->
</script>
</head>
<body onLoad="JavaScript:checkRefresh();">
<div class="alert alert-info fade in" id="a">
×
<strong>Info!</strong> This Page has been reloaded!
</div>
<form name="refreshForm">
<input type="hidden" name="visited" value="" />
</form>
</body>
</html>

Try using <meta> tag
<meta http-equiv="refresh" content="5; URL=http://www.example.com/test.html">
OR JavaScript's setTimeout()
setTimeout(function(){
window.location.reload(1);
},60000)
JSFiddle Demo

Maybe you can try something like this :
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.Bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<script language="JavaScript">
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
$(document).ready(function() {
var visitedValue = getParameterByName('visited',window.location.href);
if (visitedValue === '1') {
$('#a').show();
}
setTimeout(function(){
$('#visited').val('1');
$('#refreshForm').action = window.location.href;
$('#refreshForm').submit();
},3540000);
});
</script>
</head>
<body>
<div class="alert alert-info fade in" id="a" style="display:none;">
×
<strong>Info!</strong> This Page has been reloaded!
</div>
<form name="refreshForm" id="refreshForm">
<input type="hidden" id="visited" name="visited" value="" />
</form>
</body>
</html>

Categories