I'm trying to make a dynamic div element with styles including linear gradient. It should be displayed dynamically with a button, but the gradient does not get added.
var x = document.getElementById("btn");
x.addEventListener("click", addbox);
function addbox() {
var y = document.createElement("Div");
y.id = "div1";
y.style.border = "1px";
y.style.borderRadius = "20px";
y.style.height = "200px";
y.style.width = "500px";
y.style.backgroundImage = "linearGradient(to bottom right, yellow , cyan)";
document.getElementsByTagName("body")[0].appendChild(y);
}
#btn {
height: 50px;
width: 150px;
}
<button id="btn" onclick="addbox()"> CLICK ME TO DISPLAY </button>
Your code has a lot of little mistakes but here is something that works:
<!doctype html>
<html>
<head>
<title> ADD BOX ON CLICK FUNCTION </title>
<style>
#btn {
height: 50px;
width: 150px;
}
</style>
</head>
<body>
<script>
function addbox() {
var y = document.createElement("Div");
y.id = "div1";
y.style.border = "1px";
y.style.borderRadius = "20px";
y.style.height = "200px";
y.style.width = "500px";
y.style.background = "linear-gradient(to bottom right, yellow , cyan)";
document.getElementsByTagName("body")[0].appendChild(y);
}
window.addEventListener("DOMContentLoaded", (event) => {
var x = document.getElementById("btn");
x.addEventListener("click", addbox);
});
</script>
<button id="btn"> CLICK ME TO DISPLAY </button>
</body>
</html>
Your document.getElementById("btn") cannot work before the page has finished loading, so you have to put this inside a window.addEventListener("DOMContentLoaded") event that will fire only when your div is there
Remove the onclick="addbox()" from the div because it would fire twice per click
linearGradient spelling is wrong. It's linear-gradient
The property to apply the linear gradient is not y.style.backgroundImage but y.style.background
Related
For my Website, I have a set background-color of the div class "coverbg", for example
cover{
background-color: #FFFFFF;
}
I also have a button defined in the .html-File (Let's say it has the ID "triggerbg"), and I want the Background-Color of the div to change (to for example #000000;) when the button is being hovered over with a mouse and change back when the mouse isn't on the button anymore. Is there a way to do this?
I also tried a code from stackoverflow, I tried replacing "body" with div class "cover" but it is not working,
var button = document.getElementById('hover');
var body = document.body;
button.onmouseover = function() {
body.className = 'hovered';
}
button.onmouseout = function() {
body.className = '';
}
body {
background: #000;
}
body.hovered {
background: #ff0;
}
<button id="hover">button</button>
Sorry, I am new to JS.
if you want to change the body background
modifying Ran Turner's post you get
function over(){
document.getElementsByTagName("BODY")[0].className = 'hovered';
}
function out(){
document.getElementsByTagName("BODY")[0].className = ' '
}
.hovered{
background:#000000;
}
<html>
<head></head>
<body>
<button onmouseover="over()" onmouseout="out()">hover</button>
</body>
</html>
or if you want a div
var trigger=document.getElementById("triggerbg");
var cover=document.getElementsByClassName("cover");
trigger.onmouseover=function(){
for (var i = cover.length-1; i >= 0; i--) {
cover[i].className="hovered";
}
cover=document.getElementsByClassName("hovered");
}
trigger.onmouseout=function(){
for (var i = cover.length-1; i >= 0; i--) {
cover[i].className="cover";
}
cover=document.getElementsByClassName("cover");
}
.cover{
background-color:yellow;
}
.hovered{
background-color:#000000;
}
<button id="triggerbg">hover</button>
<div class="cover">here</div>
<div class="cover">there</div>
<div class="cover">and</div>
<div class="cover">everywhere</div>
You also need to get the div element and on onmouseover/onmouseout events add/remove the class from that div respectively
var button = document.getElementById('hover');
var div = document.getElementById('your-div');
button.onmouseover = function() {
div.className = 'hovered';
}
button.onmouseout = function() {
div.className = '';
}
.hovered{
background-color: #000000;
}
<button id="hover">button</button>
<div id="your-div">
hover button to change color
</div>
In this Code, onmouseover and onmouseout event is used to change the class of div.
<html lang="en">
<head>
<title>Document</title>
<style>
/* hover class to change the background when hover on button */
.hover{
background-color:#aaaaaa
/* color=red */
}
</style>
</head>
<body>
<button id="hover" class="demo">button</button>
<div id='div' >Hover on button to see the effect on div</div>
<script>
let button = document.getElementById('hover');
let div = document.getElementById('div');
button.onmouseover = () =>{ // onmouseover event which executes when the mouse hover on element button
div.className ='hover'; // change the class name of div
}
button.onmouseout = () =>{
div.className ='';
}
</script>
</body>
</html>
Here is the code snippet you use to change the background of a button on the mouse hover.
In this Code, we use the hover property of a class that changes the background of a button when hover. You can use the style in your external CSS file or internal CSS in the HTML file in the tag.
<html lang="en">
<head>
<title>Document</title>
<style>
.demo:hover{
background-color: #FFFFFF;
}
</style>
</head>
<body>
<button id="hover" class="demo">button</button>
</body>
</html>
So I have a list of elements that originally have white backgrounds and my goal is when I click one of it it changes color to blue, but only one element can by chosen and have color - if another element was clicked earlier it background return to white
I was trying with this code but it doesn't work
var prevDiv=null
function change_color_to_blue_click(){
if(prevDiv) {
prevDiv.style.backgroundColor = "white";
}
var target = event.currentTarget
target.style.backgroundColor="blue"
selected = true
prevDiv = target;
}
The only thing I can think of is that you didn't pass event into the function.
Was there a reason why you didn't accept an event argument in your function? (Maybe because Internet explorer used to use a global event object.)
This worked for me:
function change_color_to_blue_click(event){
if(prevDiv) {
prevDiv.style.backgroundColor = "white";
}
var target = event.currentTarget
target.style.backgroundColor="blue"
selected = true
prevDiv = target;
}
var prevDiv=null
function changeColor(){
if(prevDiv) {
prevDiv.style.backgroundColor = "white";
}
var target = event.currentTarget
target.style.backgroundColor="blue"
selected = true
prevDiv = target;
}
.box {
width: 50px;
height: 50px;
border: solid black 2px;
margin: 20px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="click">
<div onclick="changeColor()" class="box"></div>
<div onclick="changeColor()" class="box"></div>
<div onclick="changeColor()" class="box"></div>
<div onclick="changeColor()" class="box"></div>
</div>
</body>
</html>
var prevDiv = null;
function changeColor() {
var target = event.currentTarget;
if (prevDiv) {
prevDiv.style.backgroundColor = "white";
target.style.backgroundColor = "blue";
prevDiv = target;
} else {
target.style.backgroundColor = "blue";
prevDiv = target;
}
}
This website's purpose is to display maps using buttons, and then have the user click on a country to visit a website via invisible <a> tags. This is achieved by creating a canvas that becomes unhidden onclick and changing the canvas background according to the button. The end goal is to have the <a> tags appear when its corresponding button is clicked and then disappear when another button is pressed. However, when the button is pressed, the <a> tags spawn above the canvas and not in it.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
<link rel="stylesheet" href="style.css">
<script src="map.js"></script>
</head>
<body>
<h1>Where do you wanna go?</h1>
<table>
<!--North America-->
<tr><td><button id="nA" onclick="northAmerica()">North America</button></tr></td>
<td><button id="nA2" onclick="nNorthAmerica()">Northern North America</button></td>
<td><button id="nA4" onclick="cenAmerica()">Central America</button></td>
HELLO
hello
<td><canvas class="map" id="c"></canvas></td>
</table>
map.js
//NORTH AMERICA
function northAmerica(){
let nA2 = document.getElementById("nA2");
let nA3 = document.getElementById("nA3");
let nA4 = document.getElementById("nA4");
let x = document.getElementById("x");
let y = document.getElementById("y");
nA2.style.display = "block";
nA3.style.display = "block";
nA4.style.display = "block";
var c = document.getElementById("c");
c.style.display="block";
}
function nNorthAmerica(){
c.style.backgroundImage = "url('https://i.imgur.com/ipPrjz1.jpg')";
c.style.backgroundSize = "65em 45em";
c.style.display="block";
x.style.display = "block";
}
function cenAmerica(){
c.style.backgroundImage = "url('https://i.imgur.com/84LVJaY.gif')";
c.style.backgroundSize = "65em 45em";
y.style.display = "block";
}
/*The purpose of this block is to hide the elements until they are called upon*/
#nA2, #nA3, #nA4, #c, #x, #y{
display:none;
}
button{
width:10em;
height:5em;
font:sans-serif;
}
.map{
width:65em;
height:35em;
}
I expect that function nNorthAmerica spawns the element x onto the page since by default it is hidden, and same for cenAmerica and y. However, I do not know how to have the <a> tags appear within the canvas.
I assume you want to overlay the links - HELLO & hello - on top of the canvas?
This can be done by wrapping the canvas and the a elements in a div. If you then set the position attribute af the canvas to relative and the a elements absolute it's origin will be the top-left corner of the canvas.
Here's an example:
function northAmerica() {
let nA2 = document.getElementById("nA2");
let nA3 = document.getElementById("nA3");
let nA4 = document.getElementById("nA4");
let x = document.getElementById("x");
let y = document.getElementById("y");
nA2.style.display = "block";
nA3.style.display = "block";
nA4.style.display = "block";
var c = document.getElementById("c");
c.style.display = "block";
}
function nNorthAmerica() {
c.style.backgroundImage = "url('https://i.imgur.com/ipPrjz1.jpg')";
c.style.backgroundSize = "65em 45em";
c.style.display = "block";
x.style.display = "block";
}
function cenAmerica() {
c.style.backgroundImage = "url('https://i.imgur.com/84LVJaY.gif')";
c.style.backgroundSize = "65em 45em";
y.style.display = "block";
}
#nA2,
#nA3,
#nA4,
#c,
#x,
#y {
display: none;
position: absolute;
}
button {
width: 10em;
height: 5em;
font: sans-serif;
}
.map {
width: 65em;
height: 35em;
position: relative;
}
<table>
<tr>
<td><button id="nA" onclick="northAmerica()">North America</button></tr>
</td>
<td><button id="nA2" onclick="nNorthAmerica()">Northern North America</button></td>
<td><button id="nA4" onclick="cenAmerica()">Central America</button></td>
</table>
<div><canvas class="map" id="c"></canvas>
HELLO
hello</div>
I'm trying to clone a <div> in an <iframe>, and append the cloned div to the parent DOM. I keep the div as display: none to start (when in the iframe), and I make it visible when I clone it in the parent. This all works fine, and here's a minimal snippet:
The parent (top.html):
<iframe src=foo.html></iframe>
The iframe (foo.html)
<html>
<HEAD>
<style>
#myid {
display: none;
}
</style>
</HEAD>
<body onload="onload()">
<script>
function onload() {
var div = document.getElementById("myid");
var newdiv = div.cloneNode(true);
var body = parent.document.getElementsByTagName("body")[0];
newdiv.id = "new" + div.id;
newdiv.style.display = "block";
newdiv.style.position = "absolute";
newdiv.style.top = "100px";
newdiv.style.left = "100px";
newdiv.style.width = "100px";
newdiv.style.height = "100px";
newdiv.style.background = "red";
body.appendChild(newdiv);
};
</script>
<div id=myid>
<p>foo
</div>
</body></html>
My issue that I would like to use internal css to define #myid WHEN THE DIV IS CLONED INTO THE PARENT. But, once the the div is cloned, it only references the CSS in the parent... I'm not (readily) able to modify the CSS of the parent.
Can I make the internal CSS "stick" to the div when it gets cloned?
For example, if I delete the line above:
newdiv.style.background = "red";
And instead add to the internal CSS:
background: red;
The red doesn't stay once I clone the div to the parent.
My only other solution is to just do it all inline, by changing the div, like:
<div id=myid style="background: red;">
And that works, its just that I have a lot of CSS and it's a mess to maintain that way.
My solution to this (from #charlietfl's suggestion) was to add:
newdiv.style.cssText = window.getComputedStyle(div).cssText;
to copy the computed CSS to the cloned div. Now I can add background: red to the internal CSS, and it is "stuck" to the clone.
The final solution is below:
<html>
<HEAD>
<style>
#myid {
/* Added style here */
background: red;
display: none;
}
</style>
</HEAD>
<body onload="onload()">
<script>
function onload() {
var div = document.getElementById("myid");
var newdiv = div.cloneNode(true);
var body = parent.document.getElementsByTagName("body")[0];
/* Copy styles here */
newdiv.style.cssText = window.getComputedStyle(div).cssText;
newdiv.id = "new" + div.id;
newdiv.style.display = "block";
newdiv.style.position = "absolute";
newdiv.style.top = "100px";
newdiv.style.left = "100px";
newdiv.style.width = "100px";
newdiv.style.height = "100px";
body.appendChild(newdiv);
};
</script>
<div id=myid>
<p>foo
</div>
</body></html>
I dont know why this code is not working!
html, css, javascript is not working in same html page
plz help I cant figure out this.. is it problem on browser or my code is wrong
every thing seems to be fine...
function render() {
var winW = window.innerWidth;
var winH = window.innerHeight;
alert('hello');
var overlay = document.getElementsByClassName('overlay');
var alert = document.getElementsByClassName('alertbox');
overlay.style.display = 'block';
overlay.style.background = 'blue';
overlay.style.height = winH + 'px';
overlay.style.width = winW + 'px';
overlay.style.border = '10px solid black';
}
.overlay{
display: none;
opacity: 0.8;
position: fixed;
background: #ccc;
z-index: 10;
width: 100%;
height:100%;
}
.alertbox{
display: none;
position: fixed;
background: magenta;
z-index: 10;
border-radius: 8px;
width: 500px;
}
<html>
<head>
<title></title>
</head>
<body>
<h3>Custom Alert Box Demo</h3>
<button type="button" onclick="alert('hello world')">render overlay</button>
<button type="button" onclick="render()">render overlay</button>
<div class="overlay"></div>
<div class="alertbox">
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div>
</body>
</html>
See this fiddle
Your script has two errors. Please replace your script with the below given one
function render() {
var winW = window.innerWidth;
var winH = window.innerHeight;
var overlay = document.getElementsByClassName('overlay')[0];
var alert = document.getElementsByClassName('alertbox')[0];
overlay.style.display = 'block';
overlay.style.background = 'blue';
overlay.style.height = winH + 'px';
overlay.style.width = winW + 'px';
overlay.style.border = '10px solid black';
}
First error was in the line,
alert('hello');
because, you have a variable with name alert in your script and thus you will get an error alert is not a function in your console. If you want the alert to be shown, then you should rename your variable with name alert to some other name, may be for eg, rename it to alert1. Please see the fiddle.
Second error was in the line
var overlay = document.getElementsByClassName('overlay');
because document.getElementsByClassName() always returns an array.
According to the docs
getElementsByClassName() Returns an array-like object of all child elements which have all of
the given class names. When called on the document object, the
complete document is searched, including the root node. You may also
call getElementsByClassName() on any element; it will return only
elements which are descendants of the specified root element with the
given class names.
What I have done in the fiddle is that, I've selected the first element with the class name overlay using the index position 0. Similarly for the class alertbox.