I have 2 images displayed on a page. I want a message to appear when I click 1 image and it to disappear when I click the alternate one, then vice versa.
The jQuery code I created below seems to be working fine, but I am continuously getting an [object HTMLImageElement] message on the alternate image every time I click the one that is displaying the text.
$(document).ready(function(){
$("#gimp").click(function(){
var gimp = "Gimp message.";
var i = $("#qInkscape").text(inkscape);
if (i == true) {
$("#qInkscape").hide();
$("#qGimp").text(gimp);
} else {
$("#qGimp").text(gimp);
}
});
$("#inkscape").click(function(){
var inkscape = "Inkscape message";
var g = $("#qGimp").text(gimp);
if (g == true) {
$("#qGimp").hide();
$("#qInkscape").text(inkscape);
} else {
$("#qInkscape").text(inkscape);
}
});
});
And the html
<div class="mf-container">
<div class="mf-content">
<div class="row">
<div class="mf-third mf-center">
<img src="img/qualifications/gimp_g.png" class="mf-pic-unique mf-pic-
shadow mf-margin-top" id="gimp" alt="about gimp">
<p id="qGimp" class="mf-off-black-text"> </p>
</div>
<div class="mf-third mf-margin-top">
<p class="mf-center mf-off-black-text">Click on an image to learn more
about each technology</p>
</div>
<div class="mf-third mf-center">
<img src="img/qualifications/inkscape_G.png" class="mf-pic-unique mf-
pic-shadow mf-margin-top" id="inkscape" alt="about inkscape">
<p id="qInkscape" class="mf-off-black-text"> </p>
</div>
</div>
</div>
</div>
Related
I'm trying to change the background of the body on my HTML doc using some basic JS functions. I have set the function to target a specific ID, and then the style.background tag, if it is the current background image, then set it to another one I specified, else keep the same image. I have tried changing the code countless times now, but still can't seem to get it to change the background. Any help with this would be appreciated.
HTML:
<div class="bg-image"
style="background-image: url('./img/frankie.jpg');
height: 100vh" id="bacgr"> <!--SETS BACKGROUND using id tag to change w/ JS-->
<main role="main" class="container d-flex justify-content-center">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
</div>
JS:
let myImage = document.getElementById('bacgr').style.backgroundImage; //have to target specific image(like an array ([0])), put inside div w/ id.
myImage.onclick = function() {
if(myImage === "url('./img/frankie.jpg')") {
myImage == "url('./img/jesus_mobile.jpg')";
} else {
myImage == "url('./img/frankie.jpg')";
}
}
Try this:
const el = document.getElementById('bacgr');
el.onclick = function() {
if(this.style.backgroundImage === "url('./img/frankie.jpg')") {
this.style.backgroundImage = "url('./img/jesus_mobile.jpg')";
} else {
this.style.backgroundImage = "url('./img/frankie.jpg')";
}
}
Here is the example
You are changing only the URL, but that will not be assigned back to the dom element.
const el = document.getElementById('bacgr');
let prev = 'url("https://images.unsplash.com/photo-1570215171323-4ec328f3f5fa")';
el.onclick = function() {
el.style.backgroundImage = prev === el.style.backgroundImage ? 'url("https://images.unsplash.com/photo-1583508915901-b5f84c1dcde1")' : prev;
}
<div class="bg-image" style="background-image: url('https://images.unsplash.com/photo-1570215171323-4ec328f3f5fa');
height: 100vh" id="bacgr">
<main role="main" class="container d-flex justify-content-center">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</main>
</div>
i want my popup (when a button is clicked) to show a random image out of my folder each time i click the button. I used html, css and javascript for my website.
The problem: it is the same random image each time. Only if i restart the page a different random image is showed.
What works right now: when i click the start-button a popup with a random image from that folder shows up (just how i want it) but if i click the close-button on my random picture and press the start-button again the same picture pops up again. Only if i restart my page then a new random picture will show when i press the start-button. But that picture stays the same, when i close the popup and want to start it again.
I want a random image everytime when i press the start-button without having to restart the page.
Do i use a boolean in javascript? Can i restart the function on its own? I have seen similar questions all the time but none of the solutions have worked for me kinda.
(the start-button is also a picture but it is a button) Sorry if the code is weirdly formatted, i am new to code <3
Thank you!!
My code:
HTML:
<div class="popup" id="popup-1">
<div class="overlay"> </div>
<div class="content">
<img class="imagelook"/> <!-- image is start-button -->
<div
class="close-btn"
onclick="togglePopup()"
onclick="generateRandomPicture(array)">× <!-- random image from folder -->
</div>
</div>
</div>
<body>
<button type="button" onclick="togglePopup()" class="imglook"></button> <!-- the start-button -->
</body>
Javascript:
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
const imageArray =[
"zettel/9.png",
"zettel/8.png",
"zettel/10.png",
"zettel/11.png",
"zettel/12.png",
"zettel/13.png"
];
const image = document.querySelector("img");
window.onload = () => generateRandomPicture(imageArray);
function generateRandomPicture(array){
let randomNum = Math.floor(Math.random() * imageArray.length);
image.setAttribute("src", imageArray[randomNum]);
}
Perhaps the following might help - coded to allow for multiple popup elements in conjunction with multiple button elements to trigger the display of different images in the respective popup div
const images = [
"zettel/9.png",
"zettel/8.png",
"zettel/10.png",
"zettel/11.png",
"zettel/12.png",
"zettel/13.png"
];
const _CN='active';
const bttnclickhandler=function(e){
// generate random image based upon array
let imgsrc=images[mt_rand(0,images.length-1)];
// assign image the new src
this.previousElementSibling.querySelector('img').src=imgsrc;
this.previousElementSibling.classList.add(_CN);
console.info(imgsrc)
};
const closeclickhandler=function(e){
e.target.closest('.popup').classList.remove(_CN);
this.previousElementSibling.src='';
console.clear();
};
// generate a random number between a & b
const mt_rand=(a,b)=>Math.floor( Math.random() * ( b - a + 1 ) + a );
// assign listeners to all pertinent elements
document.querySelectorAll('button.imglook').forEach(n=>n.addEventListener('click',bttnclickhandler));
document.querySelectorAll('div.close-btn').forEach(n=>n.addEventListener('click',closeclickhandler));
document.querySelectorAll('div.popup').forEach(n=>{
n.querySelector('img').src=images[mt_rand(0,images.length-1)]
})
.active{background:pink}
.popup{margin:1rem;}
.imglook{padding:1rem}
<div class="popup">
<div class="overlay"></div>
<div class="content">
<img class="imagelook" />
<div class="close-btn">×</div>
</div>
</div>
<button type="button" class="imglook"></button>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<img class="imagelook" />
<div class="close-btn">×</div>
</div>
</div>
<button type="button" class="imglook"></button>
I am trying to make an image change when I click on a piece of text on a website that I am building.
At this moment I have created a class called device with one of them being device active as shown below:
<div class="col-md-3">
<div class="device active">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
</div>
And then what i am currently trying to do is remove the class of active when I click on some text with the i.d of #search2. This is my whole jquery script so far:
$("#search2").click(function() {
var currentImage = $('.device.active');
var nextImage = currentImage.next();
currentImage.removeClass('active');
});
However this does not seem to remove the class of active and the image is still displayed? any ideas?
Your selection is done right and it is working for me (the active class is removed from that item). The problem must be somewhere else in your code.
Here is an alternative:
var activeDeviceIndex = 0;
$("#search2").click(function() {
var devicesContainer = $('.device');
$(devicesContainer[activeDeviceIndex]).removeClass('active');
activeDeviceIndex === devicesContainer.length - 1 ? activeDeviceIndex = 0 : activeDeviceIndex++;
$(devicesContainer[activeDeviceIndex]).addClass('active');
});
.device {
display: none;
}
.device.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="device active">
<p>Device 1</p>
</div>
<div class="device">
<p>Device 2</p>
</div>
<div class="device">
<p>Device 3</p>
</div>
</div>
<button id="search2">click</button>
Check on the following, the id on the button to click should be search2 and not #search2, may be just typo stuffs.
after that update your code as follows
/**
*#description - gets the next image to slide, if the last image is the current image, it will loop the sliding
*#param {Element} current - the currently active image
*#param {Boolean} islooped - boolean value indicating if a looping just started
*/
var nextImage = function(current, islooped) {
var next = islooped? current : current.nextSibling;
while(next && next.nodeName.toLowerCase() !== 'div') {
next = next.nextSibling;
}
next = next? next : nextImage(current.parentNode.firstChild, true);
return next;
};
$('#search2').bind('click', function(event) {
var current = $('.device.active').removeClass('active').get(0);
var next = nextImage(current, false);
$(next).addClass('active');
});
So I am trying to create pop up logic for a simple find an object game. So I created a an array of strings that I want to display 2 alert messages. The first alert stating hey you found [insertName].Then if you click on the same object again it display a generic message "you already found this". Then after all images have been clicked, I have a new page loaded based of the int count of items clicked. What I'm having trouble with is how to execute that first initial alert. I was thinking I would create another array for the initial alerts,but that when i got stuck.
<div id="b1" class="mybox">One</div>
<div id="b2" class="mybox">Two </div>
<div id="b3" class="mybox">Three </div>
<div id="b4" class="mybox">Four </div>
<div id="b5" class="mybox">Effortless Calls </div>
<div id="b6" class="mybox">Voicebot </div>
<script type="text/javascript">
//$('body').css('background','blue');
var Boxes = [];
var ttle = $('.mybox').length;
$('.mybox').click(function () {
alert('Blah ');
var bx = this.id;
if (Boxes.indexOf(bx) >= 0){
alert('You Already Found Object ');
}else{
Boxes.push(bx);
}
if (Boxes.length ==ttle)
window.location = "#/finishedgame";
});
</script>
Add a custom attribute to the your elements data-clicked="false"
When the user clicks the element set elem.setAttribute('data-clicked','true');
<div id="b1" class="mybox" data-clicked="false">One</div>
<div id="b2" class="mybox" data-clicked="false">Two </div>
<div id="b3" class="mybox" data-clicked="false">Three </div>
<div id="b4" class="mybox" data-clicked="false">Four </div>
<div id="b5" class="mybox" data-clicked="false">Effortless Calls </div>
<div id="b6" class="mybox" data-clicked="false">Voicebot </div>
$('.mybox').click(function (elem) {
var clicked = $(elem).data('clicked');
if(clicked){
alert(msg1);
} else {
alert(msg1);
elem.setAttribute('data-clicked','true');
};
});
You don't need another array, before you do Boxes.push(bx); why don't you just do alert(hey you found [insertName]);? this should be the first time a user is touching a box aka when you want the first alert at least from what I gathered from your post. So
var Boxes = [];
var ttle = $('.mybox').length;
$('.mybox').click(function () {
var bx = this.id;
if (Boxes.indexOf(bx) >= 0){
alert('You Already Found Object ');
}else{
var text = [get name of box here]
alert("hey you found" + text);
Boxes.push(bx);
}
if (Boxes.length ==ttle)
window.location = "#/finishedgame";
});
Oke, so I am trying to create an interactive menu.
Now I am really struggling to make the JavaScript access the child nodes of a div and change a specific css element.
The html code goes as follow:
<div id="navbar">
Control panel
<div class="button" onclick="openMe(self);">
Users
<div class="sub-button">
Profile
</div>
<div class="sub-button">
Ban
</div>
</div>
<div class="button">
Roles
<div class="sub-button">
Profile
</div>
<div class="sub-button">
Ban
</div>
</div>
</div>
And the JavaScript is :
function openMe(a)
{
child = a.document.getElementsByClassName('sub-button');
console.log("a is "+a);
console.log("child is "+$(child).get());
console.log(self);
for (i = 0; i < child.length; i++){
//
console.log("Key "+i+" is "+child[i]);
console.log("Display for "+i+" is "+child[i].style.display);
if (child[i].style.display == "" || child[i].style.display == "none"){
child[i].style.display = "block";
} else {
child[i].style.display = "none";
}
}
}
In the css sub-button is hidden.
Now I have been trying to google, but I haven't found anything even close.
How can I make it that if I press button, the sub-buttons within button change css elements?
gr,
Angels
edit :
jsfiddle http://jsfiddle.net/r7tzr6dm/
The error is in the first line. When you would open the error console, a error message will occur.
Change the line a.document.getElementsByClassName('sub-button'); to a.getElementsByClassName('sub-button');.
The second error is change onclick="openMe(self); to onclick="openMe(this);.