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>
Related
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>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am completely new to JavaScript, and I can't figure out why I'm getting this error: Uncaught TypeError: Cannot read property 'addEventListener' of null.
I followed the advice posted in response to a similar question and put the file containing my JavaScript in the bottom of my body, but that didn't fix it. I also tried making the button onclick=checkValidity(), but that didn't work either.
document.getElementById("loginButton").addEventListener("click",
checkValidity);
function checkValidity() {
var usrName = document.getElementById("inputUsername").value;
var usrPswd = document.getElementById("inputPswrd").value;
if(usrName == "admin" && usrPswd == "123"){
window.open("HtmlPage2.html");
}
else {
alert("Your username and password are incorrect.");
}
}
and the HTML:
<!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" type="text/css" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class=wrap>
<input type="text" id="inputUsername">
<p>Username</p>
<input type="password" id="inputPswrd">
<p>Password</p>
<button id="loginButton">Log in</button>
<p id="login"></p>
</div>
<script type="text/javascript" src="Script.js" async></script>
</body>
</html>
What I want the code to do is check whether the input in the inputUsername and inputPswrd match that specified in the if...else function, and if so, open a new window; otherwise alert an error message.
EDIT: If I move all the code above to the top of my JS file, it will work as intended and open a new window, but then the code for that new page won't run (but the new page code does run it's at the top of my JS file). The error message I get when the new window opens is line 1: Uncaught TypeError: Cannot read property 'value' of null at Script.js:1.
Additional code:
JS for HTML page 2:
document.getElementById("greeting").innerHTML="Welcome";
document.getElementById("productButtonOne").addEventListener("click",
addToCart);
document.getElementById("productButtonTwo").addEventListener("click",
addToCart);
document.getElementById("productButtonThree").addEventListener("click",
addToCart);
var clicks = 0;
function addToCart() {
clicks = clicks + 1;
document.getElementById("cartProductsTotal").innerHTML = "You have " +
clicks + " items in your shopping cart.";
}
Beginning of HTML for page 2:
<!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" type="text/css" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class=wrap>
<h1 id="greeting"></h1>
<div id="productOne" class="cartItem">
<button id="productButtonOne" class="cartItems">Add to cart</button>
<img src="monaLisa.jpg" id="monaLisaImage">
<h2 class="productDescriptions">Mona Lisa</h2>
<p>This painting is great.</p>
<span class=price>This item costs $10.</span>
</div>
Place the scirpt tag after body it will work
<!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" type="text/css" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class=wrap>
<input type="text" id="inputUsername">
<p>Username</p>
<input type="password" id="inputPswrd">
<p>Password</p>
<button id="loginButton">Log in</button>
<p id="login"></p>
</div>
<script type="text/javascript" src="Script.js" async></script>
</body>
<script>
document.getElementById("loginButton").addEventListener("click", checkValidity);
function checkValidity() {
var usrName = document.getElementById("inputUsername").value;
var usrPswd = document.getElementById("inputPswrd").value;
if(usrName == "admin" && usrPswd == "123"){
window.open("HtmlPage2.html");
}
else {
alert("Your username and password are incorrect.");
}
}
</script>
</html>
remove this line <script type="text/javascript" src="Script.js" async></script>, I think your code loads the wrong script.
I am relatively new to javascript and Im trying to create a banner that will display if textbox is empty. But it doesn't show. How can I make an alert using bootstrap banners?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
function validateForm() {
var uname = document.getElementById("uname").value;
if (uname == ""){
bootstrap_alert.warning = function(message) {
$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>'+message+'</span></div>')
}
$('#clickme').on('click', function() {
bootstrap_alert.warning('Please enter your name');
});
return false;
}
}
</script>
</head>
<body>
Name: <input type: "text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>
</body>
</html>
Well there are several things that you should consider while writing JS code:
Always include $(document).ready(function(){}); if you want your Jquery
code to wait for html body to load. and once it is loaded you want to
use your JS code.
Another thing that you have created a validateform() which is never calling from your code and your main code exists within that function.
I've modified your code to work perfectly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('#clickme').on('click', function() {
bootstrap_alert('Please enter your name');
});
bootstrap_alert = function(message) {
var uname=$("#uname").val();
if (uname.length==0){
$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>'+message+'</span></div>')
}
else{
$('#alert_placeholder').html('');
}
}
});
</script>
</head>
<body>
Name: <input type="text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>
</body>
</html>
Let me know.. if you need any help in this regard.. I would be gald to help you. Thanks
I created a Node.js application and dont want that the Client is able to refresh the page or atleast give him a warning before he refresh it.
Here is my code for the client.html:
<!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="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.2.2/pusher.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script src="mainClients.js"></script>
<title>Clients</title>
</head>
<body onload="RunOnBeforeUnload()">
<div id ="main">
<div class="container" id = "1">
<h1 id="questionIndex"></h1>
<p id="question"></p>
<form id="vote-form">
</form>
<br><br>
</div>
<script type="text/javascript">
let url = window.location.search;
code = url.substr(url.indexOf("=")+1);
generatePageContents('questionIndex', 'question', 'vote-form', 'http://localhost:5000/QueryQuestion', code, 1)
</script>
<script type="text/javascript">
if(typeof(form) == 'undefined') {
const form = document.getElementById('vote-form');
vote(form, 'os', 'submitId', 'http://localhost:5000/poll');
}else {
vote(form, 'os', 'submitId', 'http://localhost:5000/poll');
}
</script>
<script type="text/javascript">
questionListener('topic-change', 'topic-change', 'questionIndex', 'question', 'vote-form', 'http://localhost:5000/QueryQuestion', code);
</script>
<script language="javascript">
function RunOnBeforeUnload() {window.onbeforeunload = function(){ return '!'; } }
</script>
</div>
</body>
</html>
Does anyone here know how to handle this task? I think it should be pretty easy but I cant find anything on the Internet
I have a problem: I am changing the text of a button depending on a click from the previous page, so I tried using JavaScript to update the innerHTML of the button in the new page using the onload() event for the body of the new page. But, it appears for the user when it changes its text. I just want it to appear directly without the change being noticeable to the user. Has anyone got the answer for this?
function myFunction(){
var x=document.getElementById("GymName");
x.innerHTML="hesham";
}
<!DOCTYPE html>
<html>
<head>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body onload="myFunction()" >
<button class="btn btn-danger" id="GymName">Omar</button>
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/login.js"></script>
</body>
</html>
Start the button hidden with display: none, and only show it after the value is changed. Or, if you're looking for a smoother transition you could fade it in with jQuery.
function myFunction(){
var x = document.getElementById("GymName");
x.innerHTML = "hesham";
x.style.display = "inline";
}
#GymName {
display: none;
}
<body onload="myFunction()" >
<button class="btn btn-danger" id="GymName">Omar</button>
</body>
Make the function invoke immediately as it's defined:
(function () {
document.getElementById("GymName").innerHTML = 'hesham';
}());
As in:
<!DOCTYPE html>
<html>
<head>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<button class="btn btn-danger" id="GymName">Omar</button>
<script>
(function () { document.getElementById("GymName").innerHTML = 'hesham'; }());
</script>
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/login.js"></script>
</body>
</html>