I am trying to create image overlays which can toggle on and off by clicking a button. Basically I have one main image then I want to click button A and have overlay A show up over the main image and click button B and have overlay A go away and show overlay B.
Currently I am trying to do this by creating a hidden div which has a background image on it. The current code works for the first button listed but not for any of the others.
<div class="hide schoolContent" id="schools"
</div>
<div class ="hide recreationContent" id="recreation">
</div>
<div class="hide restaurantsContent"id="restaurants">
</div>
<div class="hide banksContent" id="banks">
</div>
<div class="hide groceriesContent"id="groceries">
</div>
<div class="hide transportationContent"id="transportation">
</div>
<div class="hide libraryContent" id="library"></div>
<div>
<button class="alertName" name="schoolContent">Schools</button>
<button class="alertName" name="recreationContent">Recreation</button>
<button class="alertName" name="restaurantsContent">Restaurants</button>
<button class="alertName" name="banksContent">Banks</button>
<button class="alertName" name="groceriesContent">Groceries</button>
<button class="alertName" name="transportationContent">Study Transportation</button>
<button class="alertName" name="libraryContent">Library</button>
</div>
<script>var alertName = document.getElementsByClassName("alertName");
var myFunction = function() {
var hide = document.getElementsByClassName("hide");
for (var i =< 0; i < hide.length; i++) {
hide[i].style.display = "none";
}
var name = this.getAttribute("name");
var show = document.querySelector('.' + name);
if (show.style.display = "none") {
show.style.display = "block";
}
else {
show.style.display = "none";
}
};
for (var i = 0; i < alertName.length; i++) {
alertName[i].addEventListener('click', myFunction);
}</script>
Related
I want an accordion to drop down when a user clicks on the greater than sign.
<div class="row">
<div class="col-2">
<p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1"></i></button></p>
</div>
<div class="col-3">
<P>Omodeko Divine</P>
</div>
<div class="col-2">
<p>EE</p>
</div>
<div class="col-3">
<p>[ETHIOPE EAST]</p>
<P>DELSU HEALTH CENTER ABRAKA</P>
</div>
<div class="col-2">
<button class="btn btn-primary">GENERATE ID</button>
</div>
<div class="panel" onclick="document.getElementByclassname(panel).style.display='none'">
<p>No, but there must be adequate evidence that would help to support your claim.</p>
</div>
</div>
This is the javascript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("activee");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}});}
On click of the greater than sign, the .panel is supposed to dropdown.
Add onclick event to the greater than icon
Next add id to .panel div
Next in script write the logic for hide and show, please refer to below code snippet
function showDropDown(){
const targetDiv = document.getElementById("panelDivId");
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none";
} else {
targetDiv.style.display = "block";
}
}
<div class="row">
<div class="col-2">
<p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1" onclick="showDropDown()">greaterThanIcon</i></button></p>
</div>
<div class="col-3">
<P>Omodeko Divine</P>
</div>
<div class="col-2">
<p>EE</p>
</div>
<div class="col-3">
<p>[ETHIOPE EAST]</p>
<P>DELSU HEALTH CENTER ABRAKA</P>
</div>
<div class="col-2">
<button class="btn btn-primary">GENERATE ID</button>
</div>
<div class="panel" id="panelDivId" onclick="document.getElementByclassname(panel).style.display='none'">
<p>No, but there must be adequate evidence that would help to support your claim.</p>
</div>
</div>
I made a slider with a series of images. I created two buttons (prev and next) that allow browsing the images.
I created also two divs where I put the slide's number and title.
My goal is to change the image, number, and title of the slide simultaneously each time a click event on prev or next buttons occurs.
I have started programming some months ago and I am having difficulties associating images with corresponding titles and numbers.
Could someone help me complete my code?
Actually, the following code works for me to show the image on click but is not complete.
I would like to change all the elements (image, title and number) at the same time after click.
More details on the picture:Screen of the homepage
// Carousel
let sliderImage = document.querySelector(".sliderImage");
let images = [
"carousel1.jpg",
"carousel2.jpg",
"carousel3.jpg",
"carousel4.jpg",
"carousel5.jpg",
"carousel6.jpg",
"carousel7.jpg",
];
let i = 0; // Current image index
// I have already created in html file 2 btns with "onclick" event
// that trigger the following functions:
function prev() {
if (i <= 0) i = images.length;
i--;
return getSlideImg();
}
function next() {
if (i >= images.length - 1) i = -1;
i++;
return getSlideImg();
}
function getSlideImg() {
return sliderImage.setAttribute("src", "img/" + images[i]);
}
<!-- Carousel -->
<div class="carousel-container">
<div class="carousel-slide">
<img src="./img/carousel1.jpg" alt="" class="sliderImage"/>
<!-- Carousel card -->
<div class="carousel__card-container">
<div class="carousel__card-title">Soggiorno</div>
<div class="carousel__slide-data">
<div class="slide__number">01</div>
<div class="slide__loader">
<div class="loader__line-grey">
<div class="loader__line-white"></div>
</div>
</div>
</div>
</div>
<!-- Carousel buttons -->
<div class="carousel-btn">
<a href="#" class="button left-arrow bottone" id="prevBtn" onclick="prev()">
<i class="ri-arrow-left-s-line btn-icon-small"></i>
</a>
<a href="#" class="button right-arrow bottone" id="nextBtn" onclick="next()">
<i class="ri-arrow-right-s-line btn-icon-small"></i>
</a>
</div>
</div>
</div>
set all values inside getSlideImg function so everything will update with corresponding image
// Carousel
let sliderImage = document.querySelector(".sliderImage"),
container = document.querySelector(".carousel-container")
let images = [
"carousel1.jpg",
"carousel2.jpg",
"carousel3.jpg",
"carousel4.jpg",
"carousel5.jpg",
"carousel6.jpg",
"carousel7.jpg",
];
let i = 0; // Current image index
// I have already created in html file 2 btns with "onclick" event
// that trigger the following functions:
function prev() {
if (i <= 0) i = images.length;
i--;
return getSlideImg();
}
function next() {
if (i >= images.length - 1) i = -1;
i++;
return getSlideImg();
}
function getSlideImg() {
container.querySelector(".slide__number").innerText = i + 1
container.querySelector(".carousel__card-title").innerText = images[i]
return sliderImage.setAttribute("src", "img/" + images[i]);
}
// for onload
getSlideImg()
<!-- Carousel -->
<div class="carousel-container">
<div class="carousel-slide">
<img src="./img/carousel1.jpg" alt="" class="sliderImage"/>
<!-- Carousel card -->
<div class="carousel__card-container">
<div class="carousel__card-title">Soggiorno</div>
<div class="carousel__slide-data">
<div class="slide__number">01</div>
<div class="slide__loader">
<div class="loader__line-grey">
<div class="loader__line-white"></div>
</div>
</div>
</div>
</div>
<!-- Carousel buttons -->
<div class="carousel-btn">
<a href="#" class="button left-arrow bottone" id="prevBtn" onclick="prev()">
<i class="ri-arrow-left-s-line btn-icon-small">prev</i>
</a>
<a href="#" class="button right-arrow bottone" id="nextBtn" onclick="next()">
<i class="ri-arrow-right-s-line btn-icon-small">next</i>
</a>
</div>
</div>
</div>
When I type something in the first box, and click Next, the word I typed is inserted on my page. However, if I click Back and then click Next again, it is printed a second time.
I want the keyword appended after I've clicked Next to be deleted if I click Back so that if I click Next again it is printed only once (and updated if I have made any edit).
document.addEventListener("DOMContentLoaded", function() {
var stepOne = document.getElementsByClassName("step-1");
var stepTwo = document.getElementsByClassName("step-2");
var nextButton = document.getElementsByClassName("next");
var backButton = document.getElementsByClassName("back");
nextButton[0].onclick = function() {
stepOne[0].style.display = "none";
stepTwo[0].style.display = "block";
var inputKeyword = document.getElementById("inputJobTitle").value;
var newKeyword = document.createElement("p");
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
newKeyword.innerText = inputKeyword;
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
document.getElementById("retrievedFields").appendChild(newKeyword);
}
backButton[0].onclick = function() {
stepOne[0].style.display = "block";
stepTwo[0].style.display = "none";
}
})
.step-1 {
display: block;
}
.step-2 {
display: none;
}
<!--STEP 1-->
<div class="main step-1">
<div class="tab" id="tab-1">
<div class="inputFields">
<p id="jobtitle" class="inputFieldName">Job title</p>
<input type="search" id="inputJobTitle" class="inputBar" />
<p class="and">AND</p>
</div>
<div class="button">
<button class="next">Next ></button>
</div>
</div>
</div>
<!--STEP 2-->
<div class="main step-2">
<div class="tab" id="tab-1">
<div class="inputFields">
<div id="retrievedFields"></div>
<input type="search" class="inputBarAlternative" />
<div class="add">
<button class="addButton">+ Add Keyword</button>
<p id="addKeyword">
Add a skill or keyword that must be in your search results
</p>
</div>
</div>
<div class="buttons">
<button class="back">Back</button>
<button class="next">Next</button>
</div>
</div>
</div>
</body>
Each new click on the next button will trigger an append. So you just have to do the opposite of an append on the click on back. Just add this line in your onclick:
document.getElementById("retrievedFields").removeChild(document.getElementById("retrievedFields").lastElementChild);
You could also check to see if the element exists before you create it..
nextButton[0].onclick = function() {
stepOne[0].style.display = "none";
stepTwo[0].style.display = "block";
var inputKeyword = document.getElementById("inputJobTitle").value;
var newKeyword = document.getElementById("retrievedField-1")
if (!newKeyword) {
newKeyword = document.createElement("p");
newKeyword.setAttribute("id", "retrievedField-1");
newKeyword.setAttribute("class", "retrievedFieldName");
document.getElementById("retrievedFields").appendChild(newKeyword);
}
newKeyword.innerText = inputKeyword;
}
lets say, I have
<div class = "buttons">
<button onclick= "toggleFirst()"> Show me Hide me 1</button>
<button onclick= "toggleSecond()"> Show me Hide me 2</button>
<button onclick= "toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one" > Random Content1 < /div>
<div style="display: none" id="two" > Random Content 2< /div>
<div style="display: none" id="three" > Random Content 3< /div>
How can I write a JavaScript function or functions (no jquery please) that will toggle on and off content dynamically based on each button? if i click button 1, I want content in div id one to show, if i click it again, I want content in div id one to hide and or when i click button 2 , I want only content in dive id two to show and hide other stuff...so same patter and logic for all of them.
You've already started by giving each of those buttons a function to execute onClick. Just define those functions and check the display property of the style property of your divs.
I went ahead and made a simpler toggleId function as well to limit how much code is duplicated.
It's also worth noting that < /div> is invalid. You don't put a space in the front of a closing HTML tag. You can put one at the end, but there's no reason to. Just use </div>.
function toggleFirst()
{
toggleId("one");
}
function toggleSecond()
{
toggleId("two");
}
function toggleThird()
{
toggleId("three");
}
function toggleId(id)
{
var div = document.getElementById(id);
if(div.style.display == "none")
div.style.display = "block";
else
div.style.display = "none";
}
<div class = "buttons">
<button onclick= "toggleFirst()"> Show me Hide me 1</button>
<button onclick= "toggleSecond()"> Show me Hide me 2</button>
<button onclick= "toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one" > Random Content1 </div>
<div style="display: none" id="two" > Random Content 2</div>
<div style="display: none" id="three" > Random Content 3</div>
For that you can use the style.display property
function toggleFirst() {
let one = document.getElementById("one");
if (one.style.display == "none") {
one.style.display = "block"
} else {
one.style.display = "none"
}
}
function toggleSecond() {
let two = document.getElementById("two");
if (two.style.display == "none") {
two.style.display = "block"
} else {
two.style.display = "none"
}
}
function toggleThird() {
let three = document.getElementById("three");
if (three.style.display == "none") {
three.style.display = "block"
} else {
three.style.display = "none"
}
}
<div class="buttons">
<button onclick="toggleFirst()"> Show me Hide me 1</button>
<button onclick="toggleSecond()"> Show me Hide me 2</button>
<button onclick="toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one"> Random Content1
</div>
<div style="display: none" id="two"> Random Content 2
</div>
<div style="display: none" id="three"> Random Content 3
</div>
change the functions onclick like i did and you don't have to do 3 functions
, you just need one
function toggContent(content_id) {
const x = document.getElementById(content_id)
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div class="buttons">
<button onclick="toggContent('one')"> Show me Hide me 1</button>
<button onclick="toggContent('two')"> Show me Hide me 2</button>
<button onclick="toggContent('three')"> Show me Hide me 1</button>
</div>
<div style="display: none" id="one"> Random Content1
</div>
<div style="display: none" id="two"> Random Content 2
</div>
<div style="display: none" id="three"> Random Content 3
</div>
I just need some advice with my current code. I am trying to display a different div depending on the menu item clicked. I was thinking theoretically using some kind of indexing method. i think the if statement i am using for once does not work but also seems a little horrible in terms of coding.
anyway what do you think?
/**
* Lets get Menu container
*/
var menu = document.getElementById("configurator-menu");
/**
* Set Current Tab and Store which tab is Active
*/
var navitem = menu.querySelector(".configurator-menuitems div");
navitem.className += " " + "activeTab";
/**
* Add click events to Menu Tabs
*/
var tabs = menu.querySelectorAll(".configurator-menuitems div");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
/**
* Tabs Logic
*/
function displayPage() {
var items = menu.querySelectorAll(".configurator-menuitems div");
for (var i = 0; i < items.length; i++) {
items[i].classList.remove("activeTab");
}
this.className += " " + "activeTab";
if (this.classList.contains("mainMenu1")) {
var item = document.getElementByClassName("appCanvas1");
item.style.display = "block";
}
else if (this.classList.contains("mainMenu2")) {
var item = document.getElementByClassName("appCanvas2");
item.style.display = "block";
}
else if (this.classList.contains("mainMenu3")) {
var item = document.getElementByClassName("appCanvas3");
item.style.display = "block";
}
}
<div id="configurator-menu" class="appMenu" style="background-color:#001A35;">
<div class="appLogo">
Logo Here
</div>
<hr class="no-margin" />
<div class="configurator-menuitems">
<div class="mainMenu-btn mainMenu1">Shape</div><hr class="no-margin" />
<div class="mainMenu-btn mainMenu2">Size</div><hr class="no-margin" />
<div class="mainMenu-btn mainMenu3">Color</div><hr class="no-margin" />
</div>
<div class="menuspacer"></div><hr class="no-margin" />
<div class="currentSettings">
<p class="settings-title">Your Selection</p>
<p class="variant-config">Shape: </p>
<p class="variant-config">Colors: </p>
<p class="variant-config">Size: </p>
<p class="variant-config">Quantity: </p>
<p class="variant-config">Total Price: </p>
</div>
</div>
<div class="canvas-wrapper">
<div class="appCanvas1" style="background-color:#e7e7e7;">
<div class="shape-selection-bar">
<div class="shape-selector"><img src="'.plugins_url("pentant_conical.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("pendant_cyl.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("standing_lamp_conical.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("standing_lamp_cyl.png", __FILE__).'" alt="" /></div>
</div>
<div class="configurator-progressBtn"> Move On</div>
</div>
<div class="appCanvas2" style="background-color:#e7e7e7;">
<div class="configurator-progressBtn"> Move On</div>
</div>
<div class="appCanvas3" style="background-color:#e7e7e7;">
<div class="configurator-progressBtn"> Move On</div>
</div>
</div>