I have 2 divs and I am trying to swap them around automatically every Sunday at 11:59. My divs:
Could anyone help please?
<html>
<head>
<title>HTML Title</title>
<script>
function changeDiv(){
var d = new Date();
if (d.getDay == 0 && d.getHours == 11 && d.getMinutes == 59) {
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
}
</script>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
This brother will be the right answer. The first code I have given you will only change the name of the div container but do not swap two divs to which one will display.
Give it a try by running this snippet (in this example it changes the div to display and indicate which div is displayed.
function changeDiv(){
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
<html>
<head>
<title>HTML Title</title>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
Related
Before I linked bootstrap to html file, the buttons were working. I got "uncaught typeerror cannot read property addeventlistener" error. after linking to bootstrap. I fixed the error after reviewing previous suggestions by linking jQuery and using $(document).ready() method. There are three buttons. First one to change color. The second one is to switch the list. The last one is to do a multiplication. Both first one and the third buttons are working except the second one. The style.css is saved in a separate file.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<div class="container">
<div class="row">
<body>
<div id="col1" class="col-md-4">
<p>Lorem Ipsum</p>
<button id="change-color">Change Color</button>
</div>
<div id="col2" class="col-md-4">
<ul id="colorlist">
<li>Red</li>
<li>Green</li>
</ul>
<ul id="animalist">
<li>dog</li>
<li>cat</li>
</ul>
<button type="button" id="switch-list">Switch</button>
</div>
<div class="col-md-4">
<input id="value1" type="text" value="5">
<input id="value2" type="text" value="6">
<button id="multiply">Multiply</button>
<hr>
<!--empty paragraph-->
<p id="result"></p>
</div>
<hr>
<div class="col-md-12">
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var btnSwitch = document.body.children[1].children[2];
var colorlist = document.body.children[1].children[0];
var animallist = document.body.children[1].children[1];
$(document).ready(function () {
btnSwitch.addEventListener("click", function (e) {
if (colorlist.style.display != "none") { // If #colorlist is displayed
colorlist.style.display = "none"; // Hide #colorlist
animallist.style.display = "block"; // Show #animallist
} else { // Else
animallist.style.display = "none"; // Hide #animallist
colorlist.style.display = "block"; // Show #colorlist
}
});
});
$(document).ready(function () {
var btnChange = document.getElementById("change-color");
btnChange.addEventListener("click", function (e) {
var col1 = document.getElementById("col1");
switch (col1.style.color) {
case "red":
col1.style.color = "green";
break;
case "green":
col1.style.color = "blue";
break;
case "blue":
col1.style.color = "black";
break;
case "black":
col1.style.color = "purple";
break;
default:
col1.style.color = "red";
break;
}
});
});
var btnMultiply = document.getElementById("multiply");
var inputValue1 = document.getElementById("value1");
var inputValue2 = document.getElementById("value2");
btnMultiply.addEventListener('click', function (e) {
var val1 = inputValue1.value;
var val2 = inputValue2.value;
if (isNaN(val1) || isNaN(val2)) {
//replace alert box with DOM manipulation
//alert("At least one of the values is not a number");
result.innerHTML = "one or both of the input values is invalid";
result.style.color = "red";
} else {
//alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
result.style.color = "green";
}
});
function validateNumber() {
if (isNaN(this.value)) {
this.style.border = "2px solid red";
} else {
this.style.border = "";
}
}
inputValue1.addEventListener("keyup", validateNumber)
inputValue2.addEventListener("keyup", validateNumber)
</script>
</body>
</html>
I appreciate your feedback.
Thanks
I used $(documnent).ready() to fix 2 errors out of three. I couldn't solve the third error by using the same method.
In your code snippet you only loaded the CSS of Bootstrap and this should not interfere with your JQuery. I don't know what did cause your issue, but my guess is you made some changes in your HTML structure and this interfered with how you have set up the manner in which to return page elements:
var btnSwitch = document.body.children[1].children[2];
The danger of selecting your elements this way is that a small change in your HTML can break it. Unless you specifically want to target a child or parent of a given element, the better way would be to use:
var btnSwitch = document.getElementById('switch-list')
It's also much easier to read code! Since you already use getElementById() in other parts of your code, I assume you know how it works.
Moving on.
You use $(document).ready(function () { ... }) twice in your code. Shouldn't be an issue, but if the first ready() method throws an error, the second block will not be executed. So if there is no specific need for it, just declare it once. And define your vars inside the (nameless) function, if you're using it.
You also have a mistake in your HTML, having div elements before the open <body> tag, but this might happened when you copied your code in your question.
Fixed example
$(document).ready(function() {
var btnSwitch = document.getElementById('switch-list')
var colorlist = document.getElementById('colorlist')
var animallist = document.getElementById('animalist')
var btnChange = document.getElementById("change-color")
var btnMultiply = document.getElementById("multiply")
var inputValue1 = document.getElementById("value1")
var inputValue2 = document.getElementById("value2")
btnSwitch.addEventListener("click", function(e) {
if (colorlist.style.display != "none") { // If #colorlist is displayed
colorlist.style.display = "none"; // Hide #colorlist
animallist.style.display = "block"; // Show #animallist
} else { // Else
animallist.style.display = "none"; // Hide #animallist
colorlist.style.display = "block"; // Show #colorlist
}
});
btnChange.addEventListener("click", function(e) {
var col1 = document.getElementById("col1");
switch (col1.style.color) {
case "red":
col1.style.color = "green";
break;
case "green":
col1.style.color = "blue";
break;
case "blue":
col1.style.color = "black";
break;
case "black":
col1.style.color = "purple";
break;
default:
col1.style.color = "red";
break;
}
});
btnMultiply.addEventListener('click', function(e) {
var val1 = inputValue1.value;
var val2 = inputValue2.value;
if (isNaN(val1) || isNaN(val2)) {
//replace alert box with DOM manipulation
//alert("At least one of the values is not a number");
result.innerHTML = "one or both of the input values is invalid";
result.style.color = "red";
} else {
//alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
result.style.color = "green";
}
});
function validateNumber() {
if (isNaN(this.value)) {
this.style.border = "2px solid red";
} else {
this.style.border = "";
}
}
inputValue1.addEventListener("keyup", validateNumber)
inputValue2.addEventListener("keyup", validateNumber)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="col1" class="col-md-4">
<p>Lorem Ipsum</p>
<button id="change-color">Change Color</button>
</div>
<div id="col2" class="col-md-4">
<ul id="colorlist">
<li>Red</li>
<li>Green</li>
</ul>
<ul id="animalist">
<li>dog</li>
<li>cat</li>
</ul>
<button type="button" id="switch-list">Switch</button>
</div>
<div class="col-md-4">
<input id="value1" type="text" value="5">
<input id="value2" type="text" value="6">
<button id="multiply">Multiply</button>
<hr>
<!--empty paragraph-->
<p id="result"></p>
</div>
<hr>
<div class="col-md-12">
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
is there anyone that can just write down the basics for database knowledge? i want to link a database to my html page but have no knowledge about it
this is my html page and i want the div background linked to a databse value that when the value is true the background is green if false background is red, now it works with a button input that if pressed it change to the opposite color
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<div id="cardheader">
(servername1)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<div id="cardheader">
(servername2)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<div id="cardheader">
(servername3)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
<script>
function toggleStatus(e) {
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if (bgColor == "darkred") {
parentDiv.style.backgroundColor = "green";
} else {
parentDiv.style.backgroundColor = "darkred";
}
}
// var green = false
// function toggleStatus()
// {
// if (green = !green)
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "red");
// });
// }
// else
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "#639919");
// });
// }
// };
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
</script>
</body>
</html>
I have been trying to create a like counter for a webpage. Currently, It only shows the number likes when someone presses the button. The code is written below.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML =localStorage.clickcount;
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button" style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>
</body>
</html>
I am aware that .innerHTML is the problem behind 'the number of likes' not being shown but I am not sure how to make it so that it always displayed and centred above the button.
Eg. If the page has 143 likes.
143
Please Like!
Please help me out - Thank You so much for reading
You have to display the counter initially, and then keep track each time it changes.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
showCounter();
}
}
function showCounter(){
if(typeof(Storage) !== "undefined") {
document.getElementById("result").innerHTML =localStorage.clickcount;
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button" style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>
<script>
showCounter(); //Fisrt call, Once the page is loaded.
</script>
</body>
</html>
I have got the following sample html.
Files variable is a simple array of integers, like [1,2,3,4,5,6]
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<!--<script src="../app.js"></script>
<script src="../Controller/applicationCtrl.js"></script>-->
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
$scope.showAll = false;
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
height: 70px;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" ng-class="{'J1': (files.length > 3) && !showAll}">
<div ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href ng-click="showAll = !showAll;">Show {{ showAll ? 'less':'more'}}</a>
</div>
</body>
</html>
If the length of files array is more than 3 then it adds the overflow css to the div. But I also set the height of the div to a fixed value. What I would like to do is to set the height of div based on the heights of the first 3 divs on the fly without setting a fixed value for it. How can I achieve this?
You may try this. I've added jquery CDN. You can do this with raw javascript though.
<!doctype html>
<html ng-app="Application">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('Application', []);
var applicationCtrl = function ($scope) {
$scope.files = [1,2,3,4,5,6];
/* Set the parent div's height */
$(function(){
$('.J1').height($('.each-button').outerHeight() * 3);
});
};
app.controller('vm', applicationCtrl);
</script>
<style>
.J1 {
overflow-y: scroll;
}
</style>
</head>
<body ng-controller="vm">
<div style="width: 100px;" class="J1">
<!-- new class has been added -->
<div class="each-button" ng-repeat="file in files" style="border-width: 1px; border-style: solid;">
<span>{{file}}</span>
<input type="button" value="{{'btn' + file}}"></input>
</div>
</div>
<br />
<div>
<a href>Show more</a>
</div>
</body>
</html>
The image should resize (up to max) but I need the navigation div to always be visible. At the moment it is being hidden when I resize the browser. Ideally it should move up with the image.
here is the code I have already. Also, is there a way of placing the image in the centre of the screen.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
This can be rectified using some scripting
<html>
<head>
<script type = "text/javascript">
window.onload = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
window.onresize = function(){
var hVal = window.innerHeight;
if(hVal>434){
document.getElementById("test").height = 400;
}
else{
document.getElementById("test").height = hVal-34;
}
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">
<img id="test" src="../Images/img-02.jpg" />
</div>
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>
I hope it works...!