Brand new to web development.
I was following this tutorial: https://www.youtube.com/watch?v=cVyhH3t49fs
Having trouble getting the at the end of index.html to function properly, despite having copied it exactly (my 'images' folder is called 'imgs' instead). Specifically, nothing happens when I click on the numbered buttons to swap images in the gallery.
Project files: https://drive.google.com/drive/folders/1R32WhB-oWDybyNZ3NtAVRMp370QKXJiX?usp=sharing
<div class="container">
<div class="navbar">
<img src="./imgs/logo.png" class="logo" />
<nav>
<ul>
<li>Home</li>
<li>Office</li>
<li>Hotels</li>
<li>Contact Us</li>
</ul>
</nav>
<img src="./imgs/menu.png" class="menu-icon" />
</div>
<div class="row">
<div class="col">
<div class="text-box">
<h5>Our Products</h5>
<h1>
<b>Simplicity</b> <br />
is the <b>ultimate</b> sophistication
</h1>
</div>
<img src="./imgs/circle.png" class="small-icon1" />
<img src="./imgs/circle.png" class="small-icon2" />
<img src="./imgs/square.png" class="small-icon3" />
</div>
<div class="col" class="col-right">
<div class="gallery-box">
<img src="./imgs/pic2.jpg" id="gallery" />
<ul>
<li class="btn">01</li>
<li class="btn active">02</li>
<li class="btn">03</li>
<li class="btn">04</li>
</ul>
</div>
</div>
</div>
<img src="./imgs/circle.png" class="small-icon4" />
<img src="./imgs/square.png" class="small-icon5" />
</div>
<script>
var btn = document.getElementsByClassName('btn');
var gallery = document.getElementById('gallery');
var imgs = new Array(
'imgs/pic1.jpg',
'imgs/pic2.jpg',
'imgs/pic3.jpg',
'imgs/pic4.jpg',
);
for (let i = 0; i < btn.legnth; i++) {
btn[i].onclick = function () {
gallery.src = imgs[i];
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
};
}
</script>
Any help would be apprecaited. Thanks!
I was reading you code and find the mistake. You write 'length' wrong in the loop. Here how te right code looks like:
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
gallery.src = imgs[i];
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
};
}
Related
I have a website with multiple image galleries on different parts of the website. When you click on the image of specific gallery it changes to next one of that gallery and so on.
What I am trying to achieve is to reset the previous gallery to image 1 when you start clicking on a different gallery. So when the user goes back to the previous gallery, it would start from the first image.
Code used for the galleries:
let projectIndexes = {
project1: 1,
project2: 1,
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);
function plusDivs(project, n) {
showDivs(project, projectIndexes[project] += n);
}
function showDivs(project, index) {
let i;
let x = document.getElementById(project).getElementsByClassName("slidess");
if (index > x.length) { index = 1 }
if (index < 1) { index = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
projectIndexes[project] = index;
let elements = document.getElementById(project).querySelector('.imgslide').children;
let imgNames = [];
for (let i = 0; i < elements.length; i++) {
imgNames.push(elements[i].children[0].children[0].alt);
}
}
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project1', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project1">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project2', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project2">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
<!-- <div class="img-name"></div> -->
</div>
</div>
</div>
</div>
I know a way to force show the first element, but it turns out it does that for all projects.
What I was not able to find is a way to recognise when clicking on a new project, that the previous and only previous project needs to reset to first image.
I have been struggling with this for a while now and cannot make it work, so any help would be highly appreciated. And if something is not clear, let me know and I will clarify things.
If I'm following you correctly, the following should do it.
function resetPriorGalleries(currentProject) {
var projectDivs = document.getElementsByClassName("projects");
for (let i = 0; i < projectDivs.length; i++) {
if (projectDivs[i].id === currentProject)
return;
showDivs(projectDivs[1].id, 1);
}
}
The best place to call it would probably be in the onclicks.
onclick="plusDivs('project2', 1); resetPriorGalleries('project2');"
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
So I'm bored so I decided to learn javascript an I came across this weird bug where one of my variables wont display even though it is the same code for both of them.
var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function() {
document.getElementById("wheatFarms").innerHTML = wheatFields;
document.getElementById("numWheat").innerHTML = numWheat;
document.getElementById("wheatNum").innerHTML = wheat;
};
function addWheatFarm() {
wheatFields++;
document.getElementById("wheatFarms").innerHTML = wheatFields;
//wheatHandler();
}
function wheatHandler() {
var lifespan = Math.floor(Math.Random() * 50) + 10;
for (var i = 0; i <= lifespan; i++) {
wheat++;
document.getElementById("wheatNum").innerHTML = wheat;
}
}
<div data-role="page" id="start">
<div class="header">
<h1>Farming Game</h1>
</div>
<div data-role="main" class="ui-content">
<button id="wheatButton" onclick="addWheatFarm()">
Add a wheat farm.
</button>
</br>
<br>
<div id="fieldContainer" class="containers">
<ul data-role="listview" id="farms" data-count-theme="b" data-insert="true">
<br>
<li id="fieldCounter">
<p>Wheat Fields
<var id="wheatFarms"></var>
</p>
</li>
</ul>
</br>
</br>
</div>
<div id="inventoryContainer" class="containers">
<ul data-role="listview" id="inventory" data-count-theme="b" data-insert="true">
<li id="wheatCounter">
<p>Wheat <span id="wheatNum"></span>
<!--<p id = "wheatNum"></p>-->
</p>
</li>
</ul>
</div>
</div>
</div>
I'm not quite sure where I am going wrong. I did the same thing for both of them and I don't know why it works for one and not the other. The number of wheat farms displays and will update when I click the button. but the number of wheat wont even show the 0 starting value.
You should check out the console, when it says on this line:
document.getElementById("numWheat").innerHTML = numWheat;
Throws this error because there's no element there with id="numWheat":
Uncaught TypeError: Cannot set property 'innerHTML' of null
So all the code after that got stopped working. Remove that line and everything works.
Also, Math.Random() is not right. It's Math.random().
Fully Corrected Code
var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function(){
document.getElementById("wheatFarms").innerHTML = wheatFields;
document.getElementById("wheatNum").innerHTML = wheat;
};
function addWheatFarm() {
wheatFields++;
document.getElementById("wheatFarms").innerHTML = wheatFields;
wheatHandler();
}
function wheatHandler(){
var lifespan = Math.floor(Math.random() * 50) + 10;
for (var i = 0; i <= lifespan; i++) {
wheat++;
document.getElementById("wheatNum").innerHTML = wheat;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="Scripts.js"></script>
</head>
<body>
<div data-role = "page" id = "start">
<div class = "header">
<h1>Farming Game</h1>
</div>
<div data-role = "main" class = "ui-content">
<button id = "wheatButton" onclick = "addWheatFarm()">
Add a wheat farm.
</button>
</br>
<br>
<div id = "fieldContainer" class = "containers">
<ul data-role = "listview" id = "farms" data-count-theme = "b" data-insert = "true">
<br>
<li id = "fieldCounter">
<p>Wheat Fields
<var id = "wheatFarms"></var>
</p>
</li>
</ul>
</br>
</br>
</div>
<div id = "inventoryContainer" class = "containers">
<ul data-role = "listview" id = "inventory" data-count-theme = "b" data-insert = "true">
<li id = "wheatCounter">
<p>Wheat <span id = "wheatNum"></span>
<!-- <p id = "wheatNum"></p> -->
</p>
</li>
</ul>
</div>
</body>
</html>
Try this it will work
https://jsfiddle.net/debashishkumar/4mf1mvkc/
<div data-role="page" id="start">
<div class="header">
<h1>Farming Game</h1>
</div>
<div data-role="main" class="ui-content">
<button id="wheatButton" onclick="addWheatFarm(12)">
Add a wheat farm.
</button>
<br>
<div id="fieldContainer" class="containers">
<ul data-role="listview" id="farms" data-count-theme="b" data-insert="true">
<br>
<li id="fieldCounter">
<p>Wheat Fields
<var id="wheatFarms"></var>
</p>
</li>
</ul>
<div id="inventoryContainer" class="containers">
<ul data-role="listview" id="inventory" data-count-theme="b" data-insert="true">
<li id="wheatCounter">
<p>Wheat <span id="wheatNum"></span>
<p id = "wheatNum"></p>
</p>
</li>
</ul>
</div>
</div>
</div>
<script>
var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function() {
document.getElementById("wheatFarms").innerHTML = wheatFields;
document.getElementById("numWheat").innerHTML = numWheat;
document.getElementById("wheatNum").innerHTML = wheat;
};
function addWheatFarm() {
wheatFields++;
document.getElementById("wheatFarms").innerHTML = wheatFields;
wheatHandler();
}
function wheatHandler() {
var lifespan = Math.floor(Math.random() * 50) + 10;
for (var i = 0; i <= lifespan; i++) {
wheat++;
document.getElementById("wheatNum").innerHTML = wheat;
}
}
</script>
i have an onclick function that that calls a changeName function anytime a click event on that element happens.
function changeName() {
var frag = $('<span class="Name">change me</span>');
$( ".list" ).prepend(frag);
var x =[];
$('.ch-gname').each(function(index, obj)
{
x.push($(this).text());
for(i=0; i<x.length; i++) {
$('.Name').text(x[i]);}}});
$('#action').on('click', changeName);
HTML
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">Greenhouse</span>
</div>
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">tree house</span>
</div>
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">light house</span>
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>
i want to able to change the text of the class Name to the text of class ch-gname. My function gives me only the last text text(lighthouse) for the three links.Any help please
The function changeName() has $('#action').on('click', changeName); but i do not see any element with id 'action'. Anyhow i've made necessary changes in order to make it work.
Added Action id to the elements
Changed the $('.Name').text(x[i]); to $('.Name')[i].innerHTML = x[i];
Look at the below example
function changeName() {
var frag = $('<span class="Name">change me</span>');
$(".list").prepend(frag);
var x = [];
$('.ch-gname').each(function(index, obj) {
x.push($(this).text());
});
for (i = 0; i < x.length; i++) {
$('.Name')[i].innerHTML = x[i];
}
}
$('#action').on('click', changeName);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">Greenhouse</span>
</div>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">tree house</span>
</div>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">light house</span>
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>
I have the following html:
<div id="prog" class="downloads clearfix">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label id="pr1"></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a id="pdfdocument" class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
I want build HTML which is inside the <div id="prog"> with Javascript:
<div id="prog" class="downloads clearfix"></div>
I'm trying to use this Javascript, but without success:
var tmpDocument, tmpAnchorTagPdf, tmpAnchorTagXls, parentContainer, i;
parentContainer = document.getElementById('prog');
for (i = 0; i < documents.length; i++) {
tmpDocument = documents[i];
tmpAnchorTagPdf = document.createElement('a id="pdfdocument" ');
tmpAnchorTagPdf.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagPdf.innerHTML = 'start Download';
tmpAnchorTagXls = document.createElement('a');
tmpAnchorTagXls.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagXls.innerHTML = 'start Download';
parentContainer.appendChild(tmpAnchorTagPdf);
parentContainer.appendChild(tmpAnchorTagXls);
}
If this is a section of code that you will be using more than once, you could take the following approach.
Here is the original div without the code you want to create:
<div id="prog" class="downloads clearfix">
</div>
Create a template in a hidden div like:
<div id="itemtemplate" style="display: none;">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
Then duplicate it with jquery (OP originally had a jquery tag; see below for JS), update some HTML in the duplicated div, then add it to the document
function addItem() {
var item = $("#itemtemplate div.item").clone();
//then you can search inside the item
//let's set the id of the "a" back to what it was in your example
item.find("div.link a").attr("id", "pdfdocument");
//...the id of the label
item.find("div.title label").attr("id", "pr1");
//then add the objects to the #prog div
$("#prog").append(item);
}
update
Here is the same addItem() function for this example using pure Javascript:
function JSaddItem() {
//get the template
var template = document.getElementById("itemtemplate");
//get the starting item
var tempitem = template.firstChild;
while(tempitem != null && tempitem.nodeName != "DIV") {
tempitem = tempitem.nextSibling;
}
if (tempitem == null) return;
//clone the item
var item = tempitem.cloneNode(true);
//update the id of the link
var a = item.querySelector(".link > a");
a.id = "pdfdocument";
//update the id of the label
var l = item.querySelector(".title > label");
l.id = "pr1";
//get the prog div
var prog = document.getElementById("prog");
//append the new div
prog.appendChild(item);
}
I put together a JSFiddle with both approaches here.
I have four divs, each div contain images and contents. one next and previous button. at a time only div will show. on click of next the second div have to be shown and first will hide. same upto fourth div. Need to use pure Javascript. No jquery or javascript plugins is allowed.... :(. Can anyone help me to do this?.
Thanks!
My html Code:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="theProduct">
<div id="slides"> <img src="img/prev.jpg" width="29" height="29" alt="Arrow Prev"> <img src="img/next.jpg" width="29" height="29" alt="Arrow Next">
<!-- Show/hide Div strating here -->
<div class="slides_container">
<div class="div1">
<div class="img1">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div2">
<div class="img2">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div3">
<div class="img3">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div4">
<div class="img4">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
</div>
<!-- Show/Hide Div ending here -->
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div>
</div>
</body>
</html>
Practical with this below
<style type="text/css" media="screen">
#container{position:relative;width:120px;height:120px;}
#container div{position:absolute;width:120px;height:120px;}
#box-red{background:red;}
#box-yellow{background:yellow;display:none;}
#box-green{background:green;display:none;}
#box-maroon{background:maroon;display:none;}
</style>
Javascipt
<script type="text/javascript">
var $c =0;
function next(){
var boxes = document.getElementsByClassName("box");
$c +=1;
if($c >= boxes.length) $c = 0;
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev(){
var boxes = document.getElementsByClassName("box");
$c -=1;
if($c < 0) $c = (boxes.length-1);
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
</script>
HTML
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
previous next
I think this is what you are loking for:
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript
But you could put that in one function:
<script language="JavaScript">
function ShowHide(divId){
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
function toggleImage(forwrad){
var imageConainer = document.getElementByID(Your Parent div id);
var images = imageContainer.childNodes;
var showIndex = '';
for(var i=0; i<images.length;i++){
if(images[i].style.display == 'block'){
images[i].style.display == 'none';
if(forwrad){
showIndex = 1+1;
}
else{
showIndex = 1-1;
}
}
}
images[showIndex].style.display = true;
}
technically it's possible with pure CSS as well. with the :target pseudo class. but that would pollute your url with # tags. But you may actually want that.
Also Selectivizr is a good polyfill for old browsers