I created a div like so:
$(document).ready(function() {
$(document.createElement("div")).attr("id", "container").appendTo("body");
});
and then later, dynamically I want to append some stuff to it, so in another function I call
$(newElement).appendTo("#container");
but it doesn't do anything. The div is still there, but it is empty. If I change the code to
$(newElement).appendTo("body");
it works fine. Any ideas on what I'm doing wrong?
Here is a full example of my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document.createElement("div")).attr("id", "container").appendTo("body");
});
function add() {
var newElement = $(document.createElement("div")).attr("id", "inner");
$(newElement).appendTo("#container");
}
</script>
<style type="text/css">
#inner{
background-color: black;
height: 200px;
width:100px;
}
</style>
</head>
<body>
<script language="JavaScript" type="TEXT/JAVASCRIPT">
add();
</script>
</body>
</html>
Your add() function is being called before $(document).ready();
Change it to this and it should work:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document.createElement("div")).attr("id", "container").appendTo("body");
add();
});
function add() {
var newElement = $(document.createElement("div")).attr("id", "inner");
$(newElement).appendTo("#container");
}
</script>
<style type="text/css">
#inner{
background-color: black;
height: 200px;
width:100px;
}
</style>
</head>
<body>
</body>
</html>
Which could be condensed to:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function() {
$("<div/>", { id : "container" }).appendTo("body");
$("<div/>", { id : "inner"}).appendTo("#container");
});
</script>
<style type="text/css">
#inner{
background-color: black;
height: 200px;
width:100px;
}
</style>
</head>
<body>
</body>
</html>
Related
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>
I am trying to have multiple scripts run in my html sheet, and it seems to not be working. All the other scripts work except for the script for the blinking function. I don't see what the problem is. Can you find the issue with my code? Thanks in advance!
Here is my code below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
});
</script>
<script>
//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
</div>
<div class="text2">
-- : --
</div>
<button class="btn1">online</button>
</body>
</html>
The second script must be inside a JQuery function.
$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});
The second script's contents should be in the document ready handler otherwise the code attempts to locate and work with the .text2 element before that element has been parsed into memory.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<div class="text2">-- : --</div>
<button class="btn1">online</button>
</body>
</html>
I try my code but it is not working please check the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button>Click me</button>
<p style="width: 90px; background-color: #40FF08">This is a test peragraph</p>
</body>
</html>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
</script>
That is because the position property of the p element is static and left won't work on static elements - change it to say relative and it works - see demo below:
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
p {
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>
Add position: relative and your animation will work just fine.
p {
width: 90px;
background-color: #40FF08;
position: relative; <-- like this
}
$(document).ready(function() {
$("button").click(function() {
$("p").animate({
left: '400px'
});
});
});
p{
width: 90px;
background-color: #40FF08;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<p>This is a test peragraph</p>
I am trying to create a simple line, but it does not register s.line as a function, and i cannot see what i am doing wrong here. My code is posted below. Thanks!
<html>
<head>
<style type="text/css">
#svg{
width: 700px;
height: 700px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="svg"></div>
<script src="snap.svg-min.js"></script>
<script>
var s = Snap("#svg");
var metric = 24;
var ground = s.line(50,350,650,350);
</script>
</body>
You have to draw on a <svg> element, not a <div>
<html>
<head>
<style type="text/css">
#svg{
width: 700px;
height: 700px;
background-color: #ccc;
}
</style>
</head>
<body>
<svg id="svg"></svg>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<script>
var s = Snap("#svg");
var metric = 24;
var ground = s.line(50,50,650,50);
ground.attr({
stroke: "red",
strokeWidth: 10
});
</script>
</body>
In the below code,
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.background-color = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.background-color="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike">Like</button>
</body>
</html>
error is thrown at line document.body.lastElementChild.style.background-color = "#FF9966";. Error is Invalid left-hand side in assignment.
How do I resolve this error?
Note: yet to learn JQuery
First of all you need to use element.style.backgroundColor instead of element.style.background-color.
Here is a list of the JS equivalent of CSS attributes.
Your second problem is that your script executed before the <button> is loaded, thus making the script the current lastElementChildof body.
You can solve this by wrapping your script in window.onload:
(Also, selecting your button with document.body.lastElementChild is bound to give you errors since you most likely at some point will add something after the button)
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button {
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color: white;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var likeButton = document.getElementById("like-button");
likeButton.onclick = changeColor;
function changeColor() {
if (likeButton.innerHTML == "Like") {
likeButton.style.backgroundColor = "#FF9966";
likeButton.innerHTML = "Unlike";
} else {
likeButton.style.backgroundColor = "#00FFFF";
likeButton.innerHTML = "Like";
}
}
}
</script>
<button type="button" name="LikeUnlike" id="like-button">Like</button>
</body>
</html>
background-color is not a valid JavaScript identifier. For setting it with DOM style object, it should be backgroundColor in camel case.
More info on DOM style object at http://www.w3schools.com/jsref/dom_obj_style.asp
Check out my demo
JS
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
I think you should use document.body.lastElementChild.style["background-color"] to set color for element
not background-color but backgroundColor . Try this and see if works
document.body.lastElementChild.style.backgroundColor = "#FF9966";
the total code:
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
You use this code. It is working fine.
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor =
"#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike" onclick="changeColor
()">Like</button>
</body>
</html>
You can use Jquery for assign or remove a css class, to add color to your button, with this code:
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
the toggleClass function is to add and remove a css class,
"othercolor" is your class css with the styles to your button.
Include jquery with this script before </body> and before the code above:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
I hope it helps you.