Having difficulty with changing elements inside divs with events not understanding if i should use an for loop to go through div and make changes or put Events inside of divs and call them individually.
Also curious where i could use "this"
<html><head>
<script type='text/javascript'>
function changeBorder(){ //change all pics to red border
document.images.style.border="2px solid red";
}
function changeSize(){ //change pics in div1 to 100 onmouseover
pics = document.getElementById('div1');
for(i = 0; i < pics.length; i++)
{
pics[i].onmouseover.width = 100;
pics[i].onmouseover.height = 100;
}
}
function turnBlue(){ //paragraphs turn blue on doubleclick
alert("double click turn blue");
var paraBlue = document.getElementById.indexOf('p');
paraBlue.style.background="blue";
}
function yellowBack(){ //background on <p> to yellow onmouseover
var paraYell = document.getElementById.indexOf('p');
paraYell.style.background="yellow";
}
}
</script></head>
<body>
<div id="div1" onmouseover="changeSize()">
<img src="cat.jpg" id='im1' name='im1'/>
<img src="dog.jpg" id='im2' name='im2'/>
<img src="fish.jpg" id='im3' name='im3'/>
</div>
<div id="div2" ondblclick="turnBlue()">
<p id="p1">This is a paragraph</p>
<p id="p2">This is a paragraph</p>
<p id="p2">This is a paragraph</p>
</div>
<div id="div3" onmouseover="yellowBack()">
<p id="p4">This is a paragraph</p>
<p id="p5">This is a paragraph</p>
<img src="bird.jpg" id='im4' name='im4'/>
<img src="turtle.jpg" id='im5' name='im5'/>
</div>
</body>
</html>
too many problems to fix.
just one hint
function changeSize(){
var pics = document.querySelectorAll("#div1 img");
for(var i = 0; i < pics.length; i++){
pics[i].style.width = "100px";
pics[i].style.height = "100px";
}
}
Related
i just wanna ask how to change or display the different color with "getElementsByClassName() Method" in javascript,so here i want to change the bacground color blue from class "ex",and color red form class "example",but it doesnt work.
<!DOCTYPE html>
<html>
<head>
<style>
.example {
border: 1px solid black;
padding 8px;
}
</style>
</head>
<body>
<h1>The Document Object</h1>
<h2>The getElementsByClassName() Method</h2>
<p>Change the background color of all elements with class="example":</p>
<div class="example">
A div with class="example"
</div>
<br>
<div class="ex">
A div with class="example"
</div>
<p class="example">
A p element with class="example".
</p>
<p class="ex">
A p element with class="example".
</p>
<p>A <span class="example">span</span> element with class="example".</p>
<script>
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
const collection = document.getElementsByClassName("ex");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "blue";
}
</script>
</body>
</html>
your code works fine but you had two variables with the name collection rename one of them
<!DOCTYPE html>
<html>
<head>
<style>
.example {
border: 1px solid black;
padding 8px;
}
</style>
</head>
<body>
<h1>The Document Object</h1>
<h2>The getElementsByClassName() Method</h2>
<p>Change the background color of all elements with class="example":</p>
<div class="example">
A div with class="example"
</div>
<br>
<div class="ex">
A div with class="example"
</div>
<p class="example">
A p element with class="example".
</p>
<p class="ex">
A p element with class="example".
</p>
<p>A <span class="example">span</span> element with class="example".</p>
<script>
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
const collection2 = document.getElementsByClassName("ex");
for (let i = 0; i < collection2.length; i++) {
collection2[i].style.backgroundColor = "blue";
}
</script>
</body>
</html>
What does "doesn't work" mean? Is ex blue, and example uncolored? Are none colored?
Try checking the output in console (Developer tools - F12). I am certain you will receive an error using your snippet, as you redefine the collection variable twice. Use let instead of const if you plan on using a solution which changes a variable's value after assignment. Alternatively, define another variable for your second for-loop.
Here's your snippet corrected if you're still not sure:
let collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
collection = document.getElementsByClassName("ex");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "blue";
}
I am trying to access to children of body by getElementById using following code:
function myFunction() {
var body = document.getElementById("textBody");
var x = body.getElementsByClassName("myDIV");
for(var i=0; i < x.length; i++) {
var y = x[i].getElementsByTagName("h1");
var z = x[i].getElementsByTagName("mynode");
for (var i = 0; i < y.length; i++) {
y[i].setAttribute("class", "democlass");
z[i].setAttribute("class", "democlass");
}
}
}
.democlass {
color: red;
}
<body id="textBody">
<div class="myDIV">
<h1 name="demoNode">Hello World</h1>
<mynode> hi there </mynode>
</div>
<div class="myDIV">
<h1 name="demoNode">Hello World</h1>
<mynode> hi there </mynode>
</div>
<h1 name="demoNode">Hello World</h1>
<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>
<button onclick="myFunction()">Try it</button>
</body>
The code should color the header text into red color. But it seems not to be working for me. Would you please let me know why? What I know it could not have access to the exact nodes which I am waiting for.
In your styling you are referring to the democlass as a class whereas it is set as an id attribute. You can refer to my code for changes
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body class="textBody">
<div class="myDIV">
<h1 name="demoNode">Hello World</h1>
<mynode> hi there </mynode>
</div>
<div class="myDIV">
<h1 name="demoNode">Hello World</h1>
<mynode> hi there </mynode>
</div>
<h1 name="demoNode">Hello World</h1>
<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>
<button onclick="myFunction()">Try it</button>
</body>
<script>
function myFunction() {
//var body = document.getElementsByClassName("textBody"); (This code is not required)
var x = document.getElementsByClassName("myDIV");
for(var i=0; i < x.length; i++) {
var y = x[i].getElementsByTagName("h1");
var z = x[i].getElementsByTagName("mynode");
//initialise the second loop with a different variable
for (var j = 0; j < y.length; j++) {
y[j].setAttribute("id", "democlass");
z[j].setAttribute("id", "democlass");
}
}
}
</script>
<style type="text/css">
//Id reference for styling
#democlass {
color: red;
}
</style>
</html>
Whenever I click on a container which is also the h1. But I want to do when I click on the container. I want to make its h1 color blue. Im stuck on the part making the h1 blue.
var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');
// Put event listener on each container
for(var i = 0; i < container.length; i++) {
container[i].addEventListener('click', function() {
// This isn't working
h1[i].style.color = 'blue';
})
}
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
You are referring to the wrong element when you used h1[i].style...
Use this instead and it will work fine. See code below:
var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');
// Put event listener on each container
for(var i = 0; i < container.length; i++) {
container[i].addEventListener('click', function() {
// Get the 1st H1 inside current container
this.getElementsByTagName('h1')[0].style.color = 'blue';
})
}
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');
// Put event listener on each container
for(var i = 0; i < container.length; i++) {
container[i].addEventListener('click', function() {
this.firstElementChild.style.color="blue"
})
}
Inside the container[i].addEventListener('click', ....) this is the HTML Element of the container. Therefore, calling this.firstElementChild will grab the H1 of that container and change it's color to blue. If you add anything before the H1, just call the children function on this and grab the h1 element.
Neither of the answers that have been posted directly address the issue. They rely on changing the entire color of the .container element, or on the <h1> always being the immediate first child of .container.
The problem that you have is that you have is that your i variable is out of scope, and cannot be used inside the event handler you're defining. We can get around this by wrapping the handler function in a closure as follows:
var container = document.getElementsByClassName('container'),
h1 = document.getElementsByTagName('h1');
for(var i = 0; i < container.length; i++)
{
container[i].onclick = (function(i) {return function() {
h1[i].style.color = 'blue';
};})(i);
};
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
Notice that the above will only change the colour of the <h1>. Of course, this assumes that all of your <h1> elements are always matched in number and index by the .container elements (but I assume that they are, from your question).
Here is the code:
<script>
function myFunction() {
var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
}
</script>
<style>
div {
border: 1px solid black;
margin: 5px;
}
</style>
<div id="myDIV">
<p class="child">A p element with class="child" in a div.</p>
<p class="child">Another p element with class="child" in a div.</p>
<p>A p element in div with a <span class="child">span element with class="child"</span> inside of it.</p>
</div>
<p>Click the button to add a background color to all elements with class="child" inside the div element with id="myDIV".</p>
<button onclick="myFunction()">Try it</button>
https://jsfiddle.net/jmgrant15/3dcof7ox/14/
The "child" classes are supposed to turn red on the button click. Any thoughts why this isn't working?
Thanks!
How to show div multiple step using javascript ?
i want to create code for
click on CLICK HERE first time it's will show one
click on CLICK HERE second time it's will show two
click on CLICK HERE third time it's will show three
click on CLICK HERE fourth time it's will show four
click on CLICK HERE fifth time it's will show five
http://jsfiddle.net/x53eh96o/
<style type="text/css">
div{
display: none;
}
</style>
<div id="1">one</div>
<div id="2">two</div>
<div id="3">three</div>
<div id="4">four</div>
<div id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
function myFunction() {
document.getElementById("1").style.display = "block";
}
</script>
how can i do that ?
THANK YOU
First of all, it would be better to add a common class to your divs, in order to make the selection easier. Then you should select all of needed divs by class name, and pass through each of them, setting needed visibility.
http://jsfiddle.net/x53eh96o/7/
<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var i = 0;
function myFunction() {
var divs = document.getElementsByClassName("some_class");
var divsLength = divs.length;
for(var j = divsLength; j--;) {
var div = divs[j];
div.style.display = (i == j ? "block" : "none");
}
i++;
if(i > divsLength) {
i = 0; // for a cycle
}
}
</script>
UPDATE
And here is jquery example: http://jsfiddle.net/x53eh96o/8/
<div class="some_class" id="1">one</div>
<div class="some_class" id="2">two</div>
<div class="some_class" id="3">three</div>
<div class="some_class" id="4">four</div>
<div class="some_class" id="5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var i = 0;
function myFunction() {
var divs = $(".some_class");
divs.hide().eq(i).css({display: 'block'});
i++;
if(i > divs.length) {
i = 0;
}
}
</script>
id values should not start with a number.
div {
display: none;
}
<div id="show_1">one</div>
<div id="show_2">two</div>
<div id="show_3">three</div>
<div id="show_4">four</div>
<div id="show_5">five</div>
<div onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
var show = 0;
function myFunction() {
try {
document.getElementById('show_' + ++show).style.display = "block";
} catch (err) {
show--
for (i = show; i > 0; i--) {
document.getElementById('show_' + i).style.display = "none";
show--;
}
}
}
</script>