How show different random Image with button without restarting the page? - javascript

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>

Related

Error in download a div as PDF using Javascript on button click

I am trying to download cv as pdf on button click in my cv builder using JS but unfortunately, the function instead of being called on button click is called as soon as the page loads. I tried some other ways including the arrow function and onclick attribute of the button although after that downloading starts on the button click but the pdf turns out to be empty.
Code:
HTML:
<div class="container profile-box" id="f">
<!-- Code of whole cv template -->
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary" id="pdf" >Download Pdf</button>
</div>
JS:
var btnpdf=document.getElementById("pdf");
async function generatepdf(){
var downloading=document.getElementById("f");
let width1 = downloading.offsetWidth;
let height1 = downloading.offsetHeight;
var doc=new jsPDF('p','pt');
await html2canvas(downloading,{
allowTaint:true,
useCORS:true,
width:width1,
height:height1
}).then((canvas)=>{
//canvas convert to png
doc.addImage(canvas.toDataURL("image/png"),'PNG',10,10);
})
doc.save("cv.pdf");
}
btnpdf.addEventListener("click",generatepdf());
It works for me.
What error are you getting?
Did you include the jspdf?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>

How to make the button clickable more than one time

I don't really know how to name this problem.
I made a simple code where clicking a button results in displaying a random number on screen. But I've run into an issue that every time you display the number then the button "locks" itself and you need to reload the page to click it again.
My problem is I don't want to reload everytime I click the button.
<div class="box" id="box">
<p id="p1">Generate a number</p>
<p id="p2"> <script src="main.js"></script></p>
<div class="container">
<button id="genbutton" class="button" onclick="generator()">Generate</button>
</div>
</div>
function generator() {
document.getElementById("p2").innerHTML = x;
document.write.innerHTML(x);
}
codepen demo
This is because you're only generating x (the random number) once. In your codepen example, move the generation of x into the event handler:
function generator() {
var x = Math.floor(Math.random() * 1001);
document.getElementById("p2").innerHTML = x;
}

simple slide show in JS- buttons are not working properly

I want to create a basic page in html that displays a single image.
I also added two buttons Previous and Next. These buttons should allow the user to move forward or backward. Have 6 images in total. When the user reaches the end (or beginning when clicking on the back button) of the slide show, the slide show should not wrap around to the beginning (or end).
button onclick function for both the cases is not working. Its only getting displayed the first image as what mentioned in the img src attribute.
This is what I have done so far. I put all the images into an array and try to travel the array forward and backward side based on the button click.
<body>
<img src="img1.jpg" id="demo" style="width:400px;height:600px"/img>
<br/>
<input type="button" onclick="preImage()" value="Previous
">
<input type="button" onclick = "nextImage()" value="Next
">
<script>
var slider_content = document.getElementById("demo");
var image = ['img1','img2','img3','img4','img5','img6'];
var i = image.length;
function nextImage(){
if(i<image.length){
i=i+1;
}else{
i=1;
}
slider_content.innerHTML="<img src="+image[i-1]+".jpg>";
}
function preImage(){
if(i<image.length+1 && i>1){
i=i-1;
}else{
i=image.length;
}
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
}
</script>
</body>
Create a wrapper div to your image and change the innerHTML of the div.
<div id="demo" style="width:400px;height:600px">
<img src="img1.jpg">
</div>
An error needs to be corrected in the preImage function:
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
to
slider_content.innerHTML = "<img src="+image[i-1]+".jpg>";
and also what Daniel said.

change only onclicked content and reset the rest

Sound Track List Image URL:
https://www.dropbox.com/s/2gtd4hrhfhxl4sm/song2.png?dl=0
I have list of sound track. If i click on the first song Play button will appear as well as click second one the play button should be moved to second song and first should be as usual. But output is not an expected result. Can anyone please guide me.??
My script is here
function loadSong(song_url, play_img, sequence_id){
var x = document.createElement("IMG");
x.setAttribute("src", "images/play.jpg");
document.getElementById(sequence_id).appendChild(x);
}
Since you didn't post the HTML structure, I'll assume it's something like:
<div id="container">
<div class="song">
<div class="songImgDiv"></div>
<div class="songTitle">Song 1</div>
</div>
<!-- other songs -->
</div>
And the img has class .activePlay.
$('.song').on('click', function () {
var imgSrc = "images/play.jpg";
$('.song img.activePlay').remove();
var img = $('<img/>').prop('src', imgSrc).addClass('activePlay');
$(this).find('.songImgDiv').append(img);
});
jsfiddle DEMO

How to change effects in Cycle 2?

I'm using cycle2 plugin for my website to change images in background. I need to change effect from tileBlind to scrollVert by clicking on button. This is what i created, but it's not working at all.
<div class="cycle-slideshow"
data-cycle-timeout=5000
data-cycle-fx="tileBlind" //here i need change it to data-cycle-fx="scrollVert"
id = "sli">
<img src="img/bg1.jpg" alt="background1">
<img src="img/bg2.jpg" alt="background2">
<img src="img/bg3.jpg" alt="background3">
</div>
<button type="button" onclick="fun1()" id="button1">click</button>
js:
function fun1(){
var slide = document.getElementById('sli');
var slide_data = slide.getAttribute('data-cycle-fx');
slide.setAttribute("data-cycle-fx","scrollVert");
}
I'm relatively new in programming, so i don't know how to fix it.

Categories

Resources