<html>
<head>
<script>
function show_function() {
var example_image=document.getElementById("example_image");
example_image.src="example_one.png";
}
function hide_function() {
var example_image=document.getElementById("example_image");
example_image.src="example.png";
}
</script>
</head>
<body>
<div class="one" onmouseover="show_function()" onmouseout="hide_function()">
<img id="example_image" src="example.png">
</div>
<div class="two" onmouseover="show_function()" onmouseout="hide_function()">
<img id="example_image" src="example.png">
</div>
</body>
</html>
When I hover the mouse over first div,the image changes. But when I hover the mouse over second div then also the image from the first div changes.
Does anyone know how to do it only in javascript?
Like Danko said, ID must be unique. Next step will be to insert variables into your function:
<html>
<head>
<script>
function show_function(id, hide)
{
var example_image=document.getElementById(id);
if(hide){
example_image.src="example.png";
} else{
example_image.src="example_one.png";
}
}
</script>
</head>
<body>
<div class="one"
onmouseover="show_function('example_image1')"
onmouseout="show_function('example_image1', true)" />
<img id="example_image1" src="example.png">
</div>
<div class="one"
onmouseover="show_function('example_image2')"
onmouseout="show_function('example_image2', true)" />
<img id="example_image2" src="example.png">
</div>
</body>
</html>
Or you can go like this too:
<img src="example.png"
onmouseover="this.src='example_one.png';"
onmouseout="this.src='example.png';" />
Hope it helps!
You can do it like this:
show_function = function (container) {
container.childNodes[1].src = "example_one.png";
}
hide_function = function (container) {
container.childNodes[1].src = "example.png";
}
then in HTML, pass this to function:
<div class="one" onmouseover="show_function(this)" onmouseout="hide_function(this)">
<img id="example_image" src="example.png">
</div>
<div class="two" onmouseover="show_function(this)" onmouseout="hide_function(this)">
<img id="example_image" src="example.png">
</div>
I think you want the first child node [0] of the div. and pass the hovered object into the callback.
function show(e){
document.getElementById('label').innerHTML = e.children[0].id;
e.style.border = "solid 2px red";
}
function hide(e){
e.style.border = "0";
}
<div class="one" onmouseover="show(this)" onmouseout="hide(this)">
<img id="example_image" src="example.png" class="one" >
</div>
<div class="two" onmouseover="show(this)" onmouseout="hide(this)">
<img id="example_image" src="example.png" class="two">
</div>
<p id='label' ></p>
Related
The click of the button should toggle the visibility of that corresponding button's div. the first pic is what the code should look like from the start, and the second pic shows what the code should look like after clicking the submit button 1.
.toggleDiv{
background: gray;
max-width: 400px;
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<body>
<div class="toggleNav">
<div class="Button1">
<input onclick="toggleMain" type="image" src="images/vinylBtn.png">
Button1
</div>
<div class="Button2">
<input onclick="toggleMain" type="image" src="images/cdBtn.png">
Button2
</div>
<div class="Button3">
<input onclick="toggleMain" type="image" src="images/tapeBtn.png">
Button3
</div>
</div>
<div class="toggleDiv">
<div id="mainText">
<h2>main div</h2>
<p>This is where the different divs shouls be toggling
</div>
<div id="Button1">
<p>This is the first div</p>
</div>
<div id="Button2">
<p>This is the second div</p>
</div>
<div id="Button3">
<p>This is the third div</p>
</div>
</div>
</body>
</html>
You can find all you elements by tag a in toggleNav and then add event listener. See my example in playground https://jsfiddle.net/denisstukalov/ompaeL0d/29/:
const links = document.querySelectorAll("div.toggleNav div a");
for (var i = 0; i < links.length ; i++) {
const divId = links[i].innerText
links[i].addEventListener("click",
function (event) {
event.preventDefault();
document.getElementById(divId).style.display = 'block';
},
false);
}
I have 3 divs, there is content(images) inside of them. When you click on one of them content of it becomes visible and content of other two becomes hidden. I've been managed to achieve that with jquery code(you can check for it below), but the bad thing it's hardcoded, is there any other methods do do it?
P.S.: "https://solomia-gera.github.io/" is the site itself if you want to have a look.
---------------------------------------------------------THE CODE-----------------------------------------------------
<!-- Hide/Show DIV1 content-->
<script>
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content1").hide();
});
$("#mox3").on("click", function () {
$("#content1").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content1").show();
});
</script>
<!-- Hide/Show DIV2 content-->
<script>
$("#content2").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content2").hide();
});
$("#mox3").on("click", function () {
$("#content2").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content2").show();
});
</script>
<!-- Hide/Show DIV3 content-->
<script>
$("#content3").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content3").hide();
});
$("#mox1").on("click", function () {
$("#content3").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox3").on("click", function () {
$("#content3").show();
});
Given that all three have a common class mox, and if you add a common class content to each of the content divs you can do this:
$(".mox").click(function() {
$(this).children(".content").show();
$(".mox").not(this).children(".content").hide();
}
Explanation: the function is called whenever you click on any element with a mox class. this selector lets you select the particular instance of the class that was clicked, children() selects any child elements and when we put a selector as an argument for children(), it selects all child elements that match that selector. Second line works similarly, with an addition of not(this), so the second line reads hide all elements that match content class and are children of any element with class mox, but this one.
EDIT: If for some reason you do not want to assign a common class to all content divs, the following function will work as is:
$(".mox").click(function() {
$(this).children("[id^=content]").show();
$(".mox").not(this).children("[id^=content]").hide();
}
Here I used attributeStartsWith selector, read more here.
There is much better way for doing this
You can simply use the following code
$('.content').on('click', '.img-heading', function(){
$(this).parent('.content').siblings('.content').removeClass('active');
$(this).parent('.content').addClass('active');
})
Codepen link
if your content is outside mox, you can apply a same class for each element and add a data for show only what you want.
$(".mox").on("click", function () {
var content = $(".content")
content.hide();
content.eq($(this).attr("data-content")-1).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mox" data-content="1">Show one</div>
<div class="mox" data-content="2">Show two</div>
<div class="mox" data-content="3">Show three</div>
<div class="content" style="display:none;width:100px;height:100px; background:red" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:blue" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:green" ></div>
try this code
$('.mox').on('click', function(){
$('.image_list').hide();
var $index = $('.mox').index(this);
$('.image_list').eq($index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
<div id="mox1" class="mox">
<p class="hide">
O<br>V<br>E<br>R<br>V<br>I<br>E<br>W
</p>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ALBUMS -->
<div id="mox2" class="mox">
<p class="">
A<br>L<br>B<br>U<br>M<br>S
</p>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ABOUT -->
<div id="mox3" class="mox">
<p class="">
A<br>B<br>O<br>U<br>T
</p>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
</div>
Based on your code:
function myCustomHide(contentIds, moxsIds){
contentIds.forEach(function(element, index) {
index !== 0 ? $("#"+element).hide(): null;
moxsIds.forEach(function(moxElem, moxIndex){
if(index !== moxIndex){
$("#"+moxElem).on("click", function(){
$("#"+element).hide();
});
}
});
$("#"+moxsIds[index]).on("click", function(){
$("#"+element).show();
});
});
}
var contentsIds = [ "content1", "content2", "content3"];
var moxsIds = [ "mox1", "mox2", "mox3"];
myCustomHide(contentsIds, moxsIds);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="mox1">
Overview
</div>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ALBUMS -->
<div id="mox2">
Albums
</div>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ABOUT -->
<div id="mox3">
About
</div>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
or check the fiddle for slight different html: https://jsfiddle.net/oy7vj7fq/2/
I am trying to remove a div when the button inside of it is clicked.
HTML
<html>
<head>
<script src="test.js"></script>
</head>
<body>
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
</body>
</html>
Javascript
function registerClickHandler() {
// Register click event handler for button of class 'remove'
"use strict";
var node = document.getElementsByClassName("image");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
var listen = document.getElementbyClassName("remove");
listen.addEventListener("click", registerClickHandler());
So when I click the 'X' button inside of the div, I need it to remove the entire parent div, but it seems like nothing I've tried will work. I'm not sure if maybe I'm not using event handlers the right way or not, or if something I'm doing is just completely wrong. I would like to do this without using jQuery (because I don't really know it) if possible, but a lot of the solutions I've seen for vaguely similar problems have all used jQuery.
Edit:
I forgot to specify that I am looking for a way to accomplish this using eventHandlers.
Try Element.closest() you can change element selector by pref
"The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null."
mind that with a "proper selector" you don't have to worry about the parent or grandparent on elements selection
Here is an example.
function setup() {
var els = document.getElementsByClassName("remove");
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('click', function (e) {
e.preventDefault();
e.target.closest('div.image').remove();
});
}
}
setup();
img {
width:100px; height:100px;
}
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
<div class="image">
<div>
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
</div>
<div class="image">
<div>
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
</div>
<script>
function setup() {
var els = document.getElementsByClassName("remove");
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('click', function (e) {
e.preventDefault();
e.target.closest('div.image').remove();
//e.target.closest('.image').remove();
//this will not work on 2 last images cause parent div will be deleted
//leaving an empty <div class="image"></div> for each removed item
//e.target.closest('div').remove();
});
}
}
setup();
</script>
getElementbyClassName is the wrong syntax. You're looking for getElementsByClassName. This returns an array like object (HTMLCollection), not a node, and you will need to apply the event listener to each element individually. You also don't need to use removeChild. That's a bit redundant.
var els = document.getElementsByClassName('remove');
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('click', function () {
this.parentNode.remove();
});
}
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
This should work,
<html>
<head>
<script src="test.js"></script>
<script type="text/javascript">
function removeDiv(btn){
((btn.parentNode).parentNode).removeChild(btn.parentNode);
}
</script>
</head>
<body>
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove" onclick="removeDiv(this);">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove" onclick="removeDiv(this);">X</button>
</div>
</body>
</html>
Using Jquery
element = $(".remove");
for (var i in element) {
element.on('click', function() {
$(this).parent().remove();
});
}
<html>
<head>
<script src="test.js"></script>
</head>
<body>
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I prefer this approach:
<button type="button" onclick="return this.parentNode.remove();">Remove</button>
Also works if the parent element and its children were dynamically created.
Your javascript code is having issues.
The working code is
function registerClickHandler() {
// Register click event handler for button of class 'remove'
"use strict";
this.parentNode.parentNode.removeChild(this.parentNode);
}
var listen = document.getElementsByClassName("remove");
var i;
for (i = 0; i < listen.length; i++) {
listen[i].addEventListener("click", registerClickHandler);
}
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
Now, Issues
wrong function call at var listen = document.getElementbyClassName("remove");
Function returns an array. you have to loop over it.
To refer to clicked element in function need to use this
Last to remove parent element you need to refer parent of parent. Then remove this.parent.
.
You can try this
<html>
<head>
<script src="test.js"></script>
</head>
<body>
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
<script type="text/javascript">
function removeParent() {
this.parentNode.remove();
}
var buttons = document.getElementsByClassName('remove');
Array.prototype.forEach.call(buttons, function(d, i) {
d.addEventListener('click', removeParent);
});
</script>
</body>
</html>
Easiest way to remove the parent element
function removeParent(parent) {
parent.remove();
}
<html>
<head>
<script src="test.js"></script>
</head>
<body>
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove" onclick ="removeParent(this.parentNode)">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove" onclick ="removeParent(this.parentNode)">X</button>
</div>
</body>
</html>
It looks like the button tag does not have onclick function. For this, you need to self invoke function. Here is my answer.
(function registerClickHandler() {
var classLength = document.getElementsByClassName("remove").length;
for(var i = 0; i<classLength; i++){
document.getElementsByClassName("remove")
[i].addEventListener("click",function(current){
current.srcElement.parentElement.remove();
});
}
})();
try this...
const registerClickHandler = () => {
x = document.getElementsByClassName("remove")
for(var i = 0; i<x.length; i++){
x[i].addEventListener("click",function(current){
current.srcElement.parentElement.remove();
});
}
}
I am trying to get these pictures to swap when the button is pressed, the pictures are local to my computer and need to change in sequence. When I press the button, it just generates a new picture, I need them to interchange
<html>
<head>
<script>
var imgs=document.images;
function changeLight() {
var firstImage = imgs[0].src + "";
for(var i=0; i<imgs.length-1; i++){
imgs[i].src=imgs[i+1].src+"";
}
imgs[imgs.length-1].src=firstImage;
}
</script>
</head>
<body>
<div id="splash">
<img src="Traffic Light Red.gif" alt="" id="mainImg">
</div>
<body>
<div id="wrapper">
<div>
<img id="image" src="images/test" />
<br><br><br>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="Traffic Light Yellow.gif" hidden />
<img src="Traffic Light Green.gif" hidden />
<img src="Traffic Light Yellow2.gif" hidden />
</div>
</div>
</body>
Here is some code. It works by comparing the src attributes of the hidden images, not a very elegant technique, but it works. This method will also break if you add images before the last hidden image, so use with care.
Also remember to rename the files so that they have no spaces. On the web, spaces get turned into %20s when being requested, which tends to break things :)
Anyways, here’s the code.
<!doctype html>
<html>
<body>
<div id="splash">
<img src="TrafficLightRed.gif" alt="" id="mainImg">
</div>
<div id="wrapper">
<div>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="TrafficLightRed.gif" hidden>
<img src="TrafficLightYellow.gif" hidden>
<img src="TrafficLightGreen.gif" hidden>
</div>
</div>
<script>
function changeLight() {
var currentImg = document.getElementById("mainImg");
for(var i=1;i<3;i++) {
if(document.images[i].src == currentImg.src) {
currentImg.src = document.images[i + 1].src;
return;
}
}
currentImg.src = document.images[1].src;
}
</script>
</body>
</html>
A more robust technique would be to store an array of image links in your JavaScript, instead of the hacky hidden images. Brownie points for implementing that!
so you mean first come as third, second as first and third as second??
and again the same on next click??
check the fiddle http://jsfiddle.net/stdeepak22/hax3d8cv/
$(document).ready(
function(){
$('#nextImage').click(function(){
var firstImage = $('#AllImages img:first');
$(firstImage).remove();
$('#AllImages').append(firstImage);
});
});
UPDATE
pure JavaScript. for those who says "jQuery for just this? my my" ;)
http://jsfiddle.net/stdeepak22/0mcLcozk/
function f(){
var allImage = document.getElementById('AllImages');
var firstImage = allImage.getElementsByTagName('img')[0];
allImage.removeChild(firstImage);
allImage.appendChild(firstImage);
}
Refer the script :
<html>
<head>
<script>
var imgs=document.getElementsByTagName('img');
var init = 3;
console.log(imgs[2].src);
function changeLight(){
var target = document.getElementById('imaget');
var firstImage = imgs[0].src + "";
if(init < 5 ){
target.src = imgs[init].src;
init = init +1;
}
else{
init = 3;
target.src = imgs[init].src;
}
}
</script>
</head>
<div id="splash">
<img src="Traffic Light Red.gif" alt="" id="mainImg">
</div>
<body>
<div id="wrapper">
<div>
<img id="imaget" src="images/test" />
<br><br><br>
<button id="clickme" onclick="changeLight();">Click to change</button>
<img src="Traffic Light Yellow.gif" hidden />
<img src="Traffic Light Green.gif" hidden />
<img src="Traffic Light Yellow2.gif" hidden />
</div>
</div>
</body>
This works for me. I would like to suggest you to use array values (image srcs) set in javascript instead of using hidden images.
<html>
<head>
<title>Events!</title>
<!-- Loading my CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="box-container">
<div class="box" id="box1">I'm a box</div>
<div class="box" id="box2">I'm a box</div>
<div class="box" id="box3">I'm a box</div>
</div>
<div class="box" id="tricky-box">Tricky box</div>
<button id="secret-button">Super Secret</button>
<input id="secret-input"></input>
<!-- Ignore this stuff till later -->
<br>
<hr>
<hr>
<hr>
<br>
<div class="d1">1
<div class="d2">2
<div class="d3">3</div>
</div>
</div>
<!-- Loading my JS -->
<script src="js/myapp.js" type="text/javascript"></script>
So I want box2 to change color to red on mouseon and I was wondering this would be correct:
window.onload = function() {
box2.onmouseover = function(event){
box2.setAttribute = ("style", "background-color: red;");
}
The color did not change..so obviously, I'm doing something wrong. Anyone know the issue? Thanks.
setAttribute is a method, not an object property.
You can do either the DOM style object:
box2.style.backgroundColor = "red";
or the proper setAttribute method:
box2.setAttribute("style","background-color:red");
See the MDN for documentation.
Fixed you script. Check the snippet-
box2.onmouseover = function(event){
box2.style.backgroundColor = "red";
}
<div id="box-container">
<div class="box" id="box1">I'm a box</div>
<div class="box" id="box2">I'm a box</div>
<div class="box" id="box3">I'm a box</div>
</div>
<div class="box" id="tricky-box">Tricky box</div>
<button id="secret-button">Super Secret</button>
<input id="secret-input"></input>
<!-- Ignore this stuff till later -->
<br>
<hr>
<hr>
<hr>
<br>
<div class="d1">1
<div class="d2">2
<div class="d3">3</div>
</div>
</div>
You are making only one mistake. Just remove equal sign and your code will work.
Your Code
window.onload = function() {
box2.onmouseover = function(event){
box2.setAttribute = ("style", "background-color: red;");
}
Correct Code
window.onload = function() {
box2.onmouseover = function(event){
box2.setAttribute("style", "background-color: red;");
}
For more information please see following link.
document.setAttribute
You can achieve this using getElementById() and then set class name that refers to a css class, like in this working example:
<html>
<head>
<title>Events!</title>
<style>
.red {
background-color: red;
}
</style>
<script>
window.onload = function() {
box2.onmouseover = function(event){
alert("Hello");
var box = document.getElementById("box2");
box.className = box.className + " red";
}
}
</script>
</head>
<body>
<div id="box-container">
<div class="box" id="box1">I'm a box</div>
<div class="box" id="box2">I'm a box</div>
<div class="box" id="box3">I'm a box</div>
</div>
<div class="box" id="tricky-box">Tricky box</div>
<button id="secret-button">Super Secret</button>
<input id="secret-input"></input>
<!-- Ignore this stuff till later -->
<br>
<hr>
<hr>
<hr>
<br>
<div class="d1">1
<div class="d2">2
<div class="d3">3</div>
</div>
</div>
</body>
</html>
Just out of pure curiosity: Why wouldn't you do this just with CSS?
#box2:hover {
background: red;
}