I am trying to enable a button ONLY during 5PM to 10PM every day, except Monday.
When the button is disabled, <p></p> should show up (like a notification to the visitor why it is disabled.)
I did try to write the JavaScript on my own, but it seem not to work correctly. I don't know anything about that language and did the script with aid of different sites.
Here is my script:
<input class="submit" type="submit" id="checktimer" value="Check"/>
<p id=timer style="display: none;">Lorem ipsum</p>
<script type="text/javascript" defer="defer">
<!--
var enableDisable = function(){
var UTC_hours = new Date().getUTCHours() +1;
var day = new Date().getDay();
if (day == 1){
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
else{
if (UTC_hours > 16 && UTC_hours < 22){
document.getElementById('checktimer').disabled = false;
document.getElementById('timer').style.display = 'none';
}
else
{
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
}
};
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>
This would work:
var enableDisable = function(){
var UTC_hours = new Date().getUTCHours(); //Don't add 1 here
var day = new Date().getUTCDay(); //Use UTC here also
if (day != 1 && UTC_hours >= 17 && UTC_hours < 22){
document.getElementById('checktimer').disabled = false;
document.getElementById('timer').style.display = 'none';
}else{
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
};
setInterval(enableDisable, 1000*60);
enableDisable();
Cheers
DEMO
Try setting the attribute on the element, instead of a property on the element object:
document.getElementById('checktimer').setAttribute('disabled');
To remove it, use
document.getElementById('checktimer').removeAttribute('disabled');
As others have mentioned, you should cache the checktimer element in a variable, instead of looking it up each time.
A couple of other minor things I changed:
Removed those Javascript comment things you had. You don't need those.
Added quotes around the value of the id attribute for your p element.
Actually, you shouldn't enable or disable the button based on JavaScript DateTime because it gets the client machine's date, meaning that if the user changes it's system date the button will be enabled. You should verify it on the server-side code, such as PHP or ASP. There, you can check for datetime validation, and write the button on the page, or not.
Just get rid of the HTML comment <!-- or comment it with //
<script type="text/javascript">
//<!--
var enableDisable = function(){
var UTC_hours = new Date().getUTCHours() +1;
var day = new Date().getDay();
if (day == 1){
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
else{
if (UTC_hours > 16 && UTC_hours < 22){
document.getElementById('checktimer').disabled = false;
document.getElementById('timer').style.display = 'none';
}
else
{
document.getElementById('checktimer').disabled = true;
document.getElementById('timer').style.display = 'block';
}
}
};
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>
Your script should then work normally
Related
enter image description hereScenario: Even if i select the image and date the code is not working.
Also if i select year 2020 n say am selecting the first image it should go the specified redirecting page... when i select the year 2021 n the same first image it should go to another page...If i use the else if giving the condition "2020 n img" it is not working.
Code: "For submit Button"
<p align=center>
<input type="submit" value="submit" id="button">
</p>
<script type="text/javascript">
let _img = document.getElementById("img");
let _img1 = document.getElementById("img1");
let _img2 = document.getElementById("img2");
let _picker = document.getElementById("picker");
let _btn = document.getElementById("button");
let isImgClicked = false;
let isDatePicked = false;
_img.addEventListener("click", function(){
isImgClicked = true;
});
_img1.addEventListener("click", function(){
isImgClicked = true;
});
_img2.addEventListener("click", function(){
isImgClicked = true;
});
_picker.addEventListener("click", function(){
isDatePicked = true;
});
_btn.addEventListener("click", function(){
if(!isImgClicked || !isDatePicked)
{
alert("select the Year and Click the car image");
}
else
{
if((isImgClicked == "img") && (isDatePicked == "2020"))
{
window.location.replace("sample.html");
}
else if((isImgClicked == "img") && (isDatePicked == "2019"))
{
window.location.replace("sample1.html");
}
else
{
if((isImgClicked == "img1") && (isDatePicked == "2019"))
{
window.location.replace("sample2.html");
}
else if((isImgClicked == "img1") && (isDatePicked == "2020"))
{
window.location.replace("sample3.html");
}
else
{
alert("!!!!")
}
}
}
});
</script>
For images:
<div class="swiper-container">
<div class="swiper-wrapper">
<form>
<div id="img" class="swiper-slide"
style="background-image: url(./img/nature.png)">
<b>nature</b>
</div>
</form>
<div id="img1" class="swiper-slide"
style="background-image: url(./img/nature1.png)">
<b>nature1</b>
</div>
<div id="img2 "class="swiper-slide"
style="background-image: url(./img/nature2.png)">
<b>nature2</b>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Date Picker:
<div id="picker">
<p align="center">
<b>Year:</b> <input type="text" id="datepicker">
</p>
</div>
<script>
$(function() {
$('#datepicker').datepicker({
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, 1));
}
});
$("#datepicker").focus(function () {
$(".ui-datepicker-month").hide();
$(".ui-datepicker-calendar").hide();
});
});
</script>[enter image description here][2]
Well, I think I have coded pretty much for you. There were lots of errors in there.
First of all, you simply could not check boolean with string like you did or I did.
Boolean only have true or false. This line of code was just so dummy mistake as I explained:
isImgClicked.equals("img1") // This will always be false as isImgClicked is boolean only
Now, here is what I have done, keeping that you have already embedded jquery in your page. Feel free to ask, if there is any doubt.
let _img = document.getElementById("img");
let _img1 = document.getElementById("img1");
let _img2 = document.getElementById("img2");
let _btn = document.getElementById("button");
let isImgClicked = false;
let isDatePicked = false;
/* If any event is clicked!!!! */
$(document).on('click', function(e){
clickId = e.target.id; // Get id of clicked element
pickedDate = $('#datepicker').val(); // Get value of date picked
// If picked date value is not null, means date is picked
if(pickedDate.length > 0){
isDatePicked = true;
}
if(clickId == 'img' || clickId == 'img1' || clickId == 'img2'){
isImgClicked = true;
selectedImg = clickId; // Get id of selected image
}
if(clickId == 'button')
{
if(!isImgClicked)
{
alert("select the Year and Click the car image");
}
else
{
if((selectedImg == "img") && (pickedDate == "2020"))
window.location.replace("sample.html");
else if((selectedImg == "img") && (pickedDate == "2019"))
window.location.replace("sample1.html");
else if((selectedImg == "img1") && (pickedDate == "2019"))
window.location.replace("sample2.html");
else if((selectedImg == "img1") && (pickedDate == "2020"))
window.location.replace("sample3.html");
else
alert("!!!!")
}
}
});
You should be able to fix any other problem by now. There may be div id's mix match to look upto. You could replace your js code for submit button with this one and check for the errors. Thank you!!!
Did you add the jquery and jqueryui libraries? If not, copy the following lines at the beginning, e.g. head section, of your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Moreover, correct this line:
<div id="img2 "class="swiper-slide"
with this line:
<div id="img2"class="swiper-slide"
<script language="javascript" type="text/javascript">
if (new Date().getHours() < 11)
{
document.getElementById("r1").checked = true;
} else if (new Date().getHours() < 16)
{
document.getElementById("r1").disabled = true;
document.getElementById("r2").checked;
}
else if (new Date().getHours() < 21)
{
document.getElementById("r1").disabled=true;
document.getElementById("r2").disabled=true;
document.getElementById("r3").checked;
}
</script>
<label class="label_radio" for="radio-01">
<input name="bdw" id="r1" type="radio"/>11:00 AM
<input name="bdw" id="r2" type="radio"/>4:00 PM
<input name="bdw" id="r3" type="radio"/>9:00 PM
</label>
how can i deactivate radio buttons base on the time as specified on my script? it looks like the one stated on the sample from the other part of this tutorial but it does not work. Am i lacking something?
Instead of using var date = new Date(); or var hours = date.getHours(); . you should use PHP to store time in a variable and than compare time from that variable. As JS track the client side time so comparing using JS time can be easily tricked if someone changes his computer-system time.
hours = <?php echo date("h"); ?>
hours+=1;
if(hours>23){
hours = 0;
}
It works, but you didn't set the values of checked to true. The default value of .checked is false. And you didn't disable the other radio buttons.
Check it out here: https://jsfiddle.net/qsuxp12h/
var date = new Date();
//var hours = date.getHours();
var hours = 10; // <- Mess around to test it
if (hours < 11) {
document.getElementById("r2").disabled = true;
document.getElementById("r3").disabled = true;
document.getElementById("r1").checked = true;
} else if (hours < 16) {
document.getElementById("r1").disabled = true;
document.getElementById("r3").disabled = true;
document.getElementById("r2").checked = true;
} else if (hours < 21) {
document.getElementById("r1").disabled = true;
document.getElementById("r2").disabled = true;
document.getElementById("r3").checked = true;
}
You are executing the script before the code is loaded so script should be done after page load.
<label class="label_radio" for="radio-01">
<input name="bdw" id="r1" type="radio"/>11:00 AM
<input name="bdw" id="r2" type="radio"/>4:00 PM
<input name="bdw" id="r3" type="radio"/>9:00 PM
</label>
<script language="javascript" type="text/javascript">
current_time = new Date().getHours();
if (current_time < 11)
{
document.getElementById("r1").checked = true;
} else if (current_time < 16)
{
document.getElementById("r1").disabled = true;
document.getElementById("r2").checked = true;
}
else if ( current_time < 21)
{
document.getElementById("r1").disabled=true;
document.getElementById("r2").disabled=true;
document.getElementById("r3").checked = true;
}
</script>
Trying to hid the following div everyday except Thursday using this script. Can't get it to work. JS is still new, so what did I do wrong?
<div class="row">
<script type="text/javascript">
onload=function(){
var rightNow = new Date();
var day = rightNow.getDay();
var hour = rightNow.getHours();
var newDisplay = 'none'; // unless we see otherwise
if(day==1 || day==2 || day==3 || day==5 || day==6 | day==7 ) { // days hidden
if((hour>= 1) && (hour<= 24)) {
newDisplay = 'block';
}
}
document.getElementById('thursday').style.display = newDisplay;
}
</script>
<div class="col-md-12" id="thursday">
<h3 style="font-family:Capture it;text-align:center">Warrior Pointe Radio - Live tonight on AllradioX - 1900 Pacific / 2200 Eastern</h3>
</div>
Since you are setting display to none initially, you'll want to only check if it's Thursday to set it to block. You can take out the hour stuff as well. Here's the final code:
onload = function(){
var day = (new Date()).getDay();
var newDisplay = 'none'; // unless it's Thursday
if(day == 4) newDisplay = 'block';
document.getElementById('thursday').style.display = newDisplay;
};
I've been trying to enable a button only in a certain period of time in a day, but I can't make it work..
What I've been trying to do:
The button should be enabled from 17:00 o'clock to 22:00 o'clock (GMT +1).
I wrote my script with the aid of sites where people were requesting a similar system, but I can't make it work.. I hope that you can help me
Sorry for my english^^
Here is the script:
<input class="submit" type="submit" id="checktime" value="Check"/>
<script type="text/javascript" defer="defer">
<!--
var enableDisable = function(){
var UTC_hours = new Date().getUTCHours() +1;
if ((UTC_hours == 17) && (UTC_hours == 18) && (UTC_hours == 19) && (UTC_hours == 20) && (UTC_hours == 21) && (UTC_hours == 22)){
document.getElementById('checktime').disabled = false;
else
document.getElementById('checktime').disabled = true;
}
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>
You had missing brackets and your id was wrong, this should work.
<input class="submit" type="submit" id="checktime" value="Check"/>
<script type="text/javascript" defer="defer">
<!--
var enableDisable = function(){
var UTC_hours = new Date().getUTCHours() +1;
if (UTC_hours > 16 && UTC_hours < 22){
document.getElementById('checktime').disabled = false;
}
else
{
document.getElementById('checktime').disabled = true;
}
};
setInterval(enableDisable, 1000*60);
enableDisable();
// -->
</script>
The if statement isn't going to work like that; you're testing if the hour is 17 AND 18 AND 19 AND..., which is obviously never going to be the case as it can't be all of those hours at once. It should be:
if (UTC_hours > 16 && UTC_hours < 22)
That will ensure that it's at least 5pm, but before 10pm.
Okay, so this is my problem. I'm creating a game of memory with some images in it. I cannot understand how I would be able to display the image after setting it to display='none' with the for-loop onLoad function.
I've tried for a couple of hours now without result. =(
Anyone that can help me?
And also elem.id points to a td id so it's dynamic. It's tricky because in every td there is an img.
I sincerely appreciate your help.
This is my code:
var clicked = true;
var firstClick;
var secondClick;
var firstPlayer = true;
var addPointPlayer1 = 0;
var addPointPlayer2 = 0;
var totalPoints = 8;
function clickCard(elem){
//document.getElementsByTagName('img').style.display = "";
if(clicked){
firstClick = document.getElementById(elem.id);
// document.getElementsByName(/.img/).style.visibility="visible";
firstClick.style.backgroundColor= "white";
clicked = false;
}
else{
secondClick = document.getElementById(elem.id);
secondClick.style.backgroundColor = "white";
if(firstClick.innerHTML == secondClick.innerHTML){
firstClick.style.backgroundColor="white";
secondClick.style.backgroundColor="white";
if(firstPlayer){
addPointPlayer1++;
totalPoints--;
}
else{
addPointPlayer2++;
totalPoints--;
}
}
else {
alert('This is not a pair, player change');
firstClick.style.backgroundColor="#7f1a1a";
secondClick.style.backgroundColor="#7f1a1a";
if(firstPlayer){
firstPlayer = false;
}
else{
firstPlayer = true;
}
}
clicked = true;
}
//Keeping control of the winner
if(totalPoints == 0){
if(addPointPlayer1 > addPointPlayer2){
alert("Game over! Player 1 wins with " + addPointPlayer1 + " points" + addPointPlayer2);
}
else if (addPointPlayer1 == addPointPlayer2){
alert("This is a draw press cmd+R for a rematch");
}
else{
alert("Game over! Player 2 wins with " + addPointPlayer2 + " points against " + addPointPlayer1);
}
}
}
//creates a blank game-plan
function hideGamePlan(){
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}
If you've set the display to none, then somewhere else you should be setting the display to something - ie block.
I recommend this for help: http://www.w3schools.com/cssref/pr_class_display.asp
After if(clicked){firstClick = document.getElementById(elem.id);
I guess your problem is to find the children image tag element
if that is the case You may use find("img")
I mean
if(clicked){
firstClick = document.getElementById(elem.id);
elemtochange = firstClick.find("img");
// Changing image style here
elemtochange.style.display ="block";
}
Or you may want to look into Jquery to do the same for you by just
if (clicked){
$(elem).children("img").show(); // elem = Clicked element
}
Instead of show you may use hide to hide the element or toggle to toggle the display between show and hide on every click
I've solved this with
function clickCard(elem){
if(!clicked){
firstClick = document.getElementById(elem.id);
firstClick.style.backgroundColor= "white";
findImage[firstClick.id-1].style.visibility="visible";
clicked = true;
//alert(findImage);
}
else{
secondClick = document.getElementById(elem.id);
secondClick.style.backgroundColor = "white";
findImage[secondClick.id-1].style.visibility="visible";
// firstClick.getAttribute('src');
// secondClick.getAttribute('src');
if(firstClick.innerHTML == secondClick.innerHTML){
firstClick.style.backgroundColor="white";
secondClick.style.backgroundColor="white";
if(firstPlayer){
addPointPlayer1++;
totalPoints--;
}
else{
addPointPlayer2++;
totalPoints--;
}
}
else {
alert('This is not a pair, player change');
firstClick.style.backgroundColor="#7f1a1a";
secondClick.style.backgroundColor="#7f1a1a";
findImage[firstClick.id-1].style.visibility="hidden";
findImage[secondClick.id-1].style.visibility="hidden";
if(firstPlayer){
firstPlayer = false;
//findImage[elem.id-1].style.visibility="hidden";
}
else{
firstPlayer = true;
}
}
clicked = false;
}
//Keeping control of the winner
if(totalPoints == 0){
if(addPointPlayer1 > addPointPlayer2){
alert("Game over! Player 1 wins with " + addPointPlayer1 + " points" + addPointPlayer2);
}
else if (addPointPlayer1 == addPointPlayer2){
alert("This is a draw press cmd+R for a rematch");
}
else{
alert("Game over! Player 2 wins with " + addPointPlayer2 + " points against " + addPointPlayer1);
}
}
}
function hideGamePlan(){
findImage = document.getElementsByTagName('img');
for (i = 0; i < findImage.length;i++ ) {
findImage[i].style.visibility = "hidden";
}
}
Thanks for all the response's! I ended up just placing the submit buttons up top..
<form action = "/memory-game/index.php" method = "POST">
<input type="submit" name="dog" value="Dog" />
<input type="submit" name="cat" value="Cat" />
<input type="submit" name="fish" value="Fish" />
<input type="submit" name="zoo" value="Zoo" />
<input type="submit" name="xmas" value="Xmas" />
<input type="submit" name="pen" value="Pengins" />
</form>
Then for the other page did this:
if(isset($_POST['dog'])){$currentArr = $dogArr;}
elseif(isset($_POST['cat'])){$currentArr = $catArr;}
elseif(isset($_POST['fish'])){$currentArr = $fishArr;}
elseif(isset($_POST['xmas'])){$currentArr = $xmasArr;}
elseif(isset($_POST['pen'])){$currentArr = $penginArr;}
elseif(isset($_POST['zoo'])){$currentArr = $zooArr;}