This question already has answers here:
Difference between var and this in Javascript functions?
(2 answers)
Closed 2 years ago.
I would like to create a new element with CSS properties every time I call the squareGenerator() function, but it doesn't do that.
function squareGenerator() {
var newSquare = document.createElement("div");
this.newSquare.css({"background-color": "yellow", "height": "200px", "width": "200px"});
$('.father').append(newSquare);
}
squareGenerator()
body{
padding: 0;
margin: 0;
}
.father{
width: 100%;
height: 1000px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NovaNote</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="father">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js" charset="utf-8"></script>
</body>
</html>
Your using jQuery so do this:
var newSquare = $("<div/>");
newSquare.css({"background-color": "yellow", "height": "200px", "width": "200px"});
In order to apply the .css() function, which is a jQuery function, you need to be operating on a jQuery object. Note in my example: $(newSquare).css().
function squareGenerator() {
var newSquare = document.createElement("div");
$(newSquare).css({"background-color": "yellow", "height": "200px", "width": "200px"});
$('.father').append(newSquare);
}
squareGenerator()
body{
padding: 0;
margin: 0;
}
.father{
width: 100%;
height: 1000px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NovaNote</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="father">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js" charset="utf-8"></script>
</body>
</html>
Related
I want to know .mydiv how far from the top of the body and for this purpose I used the code getBoundingClientRect() but it doesn't work, this is my code :
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Elemet.GetBoundingClientRect();</h1>
<div class="myDiv">blah balh balh</div>
<script type="text/javascript">
var div = document.querySelector(".myDiv");
var rect = div.getBoundingClientRect();
console.log(rect);
</script>
</body>
</html>`
This is the result :
`DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
bottom: 0
height: 0
left: 0
right: 0
top: 0
width: 0
x: 0
y: 0
__proto__: DOMRect`
The result only gives me zero numbers
how Can I solve this problem please help ???!
It is working. Try to remove the css and test again.
<h1>Elemet.GetBoundingClientRect();</h1>
<div class="myDiv">blah balh balh</div>
<script type="text/javascript">
var div = document.querySelector(".myDiv");
var rect = div.getBoundingClientRect();
console.log(rect);
</script>
I am having trouble with scroll using if statements.
How can I fix it and any helpful tips will be much appreciated.
if (window.scrollY == '100px') {
document.body.style.backgroundColor = "red";
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
You need to listen on scroll event first.
window.scrollY value is integer.
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
The condition needs to be >= 100, and you need to listen to the scroll event of the window.
Here is a working snippet:
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
.container {
position: absolute;
top: 200%;
font-size: 2rem;
}
<div class="container">hi</div>
You can do it as follows -
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}else{
document.body.style.backgroundColor = "white";
}
});
*{
transition-duration: 1s;
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<div> hi </div>
In your code, you had written the condition to be window.scrollY == 100px, so it was not working. But once you modify the condition, the code will work as expected.
Also, the else statement or transition effect are not needed, just added them for nice effect.
Want a circle to appear in my browser with the color listed in the sampleClr variable, however, the circle does not show at all. I have tried hard coding a color in place of sampleClr in the function:
gamePiece.style.backgroundColor = sampleClr;
However, it still does not work. I have included my entire code below. Any input as to what I am doing wrong?
let sampleClr = "blue"
const gamePiece = document.querySelector(#gamePiece);
gamePiece.style.backgroundColor = sampleClr;
#gamePiece {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-radius: 50%;
}
<!doctype html>
<head>
<title>Connect 4</title>
<link href="Test.css" rel="stylesheet">
</head>
<body>
<div id="gamePiece"> </div>
<script src="Test.js"></script>
</body>
</html>
The following will work -
let sampleClr = "blue"
const gamePiece = document.querySelector('#gamePiece');
gamePiece.style.backgroundColor = sampleClr;
#gamePiece {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-radius: 50%;
}
<!DOCTYPE html>
<head>
<title>Connect 4</title>
<link href="Test.css" rel="stylesheet">
</head>
<body>
<div id="gamePiece"> </div>
<script src="Test.js"></script>
</body>
</html>
It was just a minor error - you had to put the parameter given to querySelector as a string(with quotes) and with that change it works.
You could have also used document.getElementById('gamePiece') since you are selecting an element through its id and directly have a selector specifically for it. It's just an alternative. Both will work the same.
In the query selector, the argument should always be a string. You set the argument to #gamePiece when it had to be '#gamePiece'. This should work:
let sampleClr = "blue"
const gamePiece = document.querySelector('#gamePiece');
gamePiece.style.backgroundColor = sampleClr;
#gamePiece {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-radius: 50%;
}
<!doctype html>
<head>
<title>Connect 4</title>
<link href="Test.css" rel="stylesheet">
</head>
<body>
<div id="gamePiece"> </div>
<script src="Test.js"></script>
</body>
</html>
https://i.stack.imgur.com/LhvYb.png - This is the image that i want to work with
I made this so far,i made the position to change when i click on the button but i want to when i click the button again the first position to come back.
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div></div>
<button>Press me</button>
<script src="index.js"></script>
</body>
</html>
This is the css
div {
width: 125px;
height: 122px;
background-image: url(picture2.png);
background-repeat: no-repeat;
}
And this is the js
var image = document.getElementsByTagName('div')[0];
var button = document.getElementsByTagName('button')[0];
button.addEventListener('click',switchPic,false);
function switchPic (e){
image.style.backgroundPosition="-150px 0";
}
simply use classList.toggle
const myDiv = document.getElementById('my-div')
, myButton = document.getElementById('my-button')
;
myButton.onclick=()=>
{
myDiv.classList.toggle('right150')
}
div#my-div {
width: 125px;
height: 122px;
background-image: url(https://i.stack.imgur.com/LhvYb.png);
background-repeat: no-repeat;
}
div#my-div.right150 {
background-position-x: -150px;
}
<div id="my-div"></div>
<button id="my-button">Press me</button>
or, with an addEventListener...
const myDiv = document.getElementById('my-div')
, myButton = document.getElementById('my-button')
;
myButton.addEventListener('click',switchPic)
function switchPic (e)
{
myDiv.classList.toggle('right150')
}
currently working on a simple script that displays a nightime background if it's a certain time in the day and a daytime image if it's a different time of day. I am using jQuery to achieve this by adding a class if one is true, and adding a class if the other is true. Issue is... the code simply won't function properly. Curious about any possible solutions... thanks!
$(document).ready(function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
$("document.body").addClass("day");
$("document.body").removeClass("night");
} else {
$("document.body").addClass("night");
$("document.body").removeClass("day");
}
});
.night {
background-image: url('images/night.jpg');
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
</head>
<body>
<div class="app-wrapper">
<p id="date"></p>
</div>
</body>
Change:-
$("document.body").addClass("day");
$("document.body").removeClass("night");
to:-
$("body").addClass("day").removeClass("night");
(same for second-one too)
Working demo example:-
$(document).ready(function() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 20) {
$("body").addClass("day").removeClass("night");
} else {
$("body").addClass("night").removeClass("day");
}
});
.night {
background-color: black;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
.day {
background-color: grey;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>APP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-
hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-wrapper">
<p id="date"></p>
</div>
</body>
</html>
You need to replace $("document.body") with $("body")