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;
}
Related
I'm not super great a javascript yet and I'm mostly a front end person. I am trying to have people's submissions be randomized across the screen but not entirely sure how to (it's okay if it wipes away everything with the refresh of the page). I have this so far:
<script>
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").innerHTML = x;
}
</script>
Which gives me an option where someone submits something and it appears on the bottom but I'm trying to have each response randomize somewhere on the screen.
I have the input displayed beneath the textbox but can't figure out how to have multiple answers show and then randomize across the screen.
Create multiple elements where you display the responses, then select one of them randomly when you're displaying.
function myFunction() {
var x = document.getElementById("myText").value;
let divs = document.querySelectorAll(".demo");
let chosen = divs[Math.floor(Math.random() * divs.length)];
chosen.innerText = x;
}
.demo {
height: 20px;
}
<input id="myText"> <button onclick="myFunction()">Enter</button>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></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 have a question similar to: Counting the number of clicks by pressing a button
The code works, however I cannot get the number of times clicked to save in the LabJS file. Can anyone please help?
var clicks = 0;
trigger = function() {
clicks += 1;
document.getElementById("display").innerHTML = clicks;
}
<main>
<button class="trigger" id="trigger" onclick="trigger()">READ IT!</button>
<div id="display">0</div>
</div>
</main>
I got a problem with one of the sites with JavaScript, and I need to automate a click and then find out how many turns I got before I run out of them. As in, for example, let's say I have 8 turns. So what I would need is to automatically have JavaScript to trigger said div id, 8 times. (As in, I add like this)
Link:https://jsfiddle.net/yxsgp8tc/
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<label><input type="text"/>00-99</label>
<button>
trigger it
</button>
</form>
</body>
in plain javascript, you would target unique elements (using an id) by using document.getElementById('<element_id'). If you wanted to target a class, you would document.querySelector('.<class_name>') for the first instance of the class, or document.querySeletorAll('.<class_name>')
Also, your input tag was misspelled "imput", and is a singleton tag so you don't have to close it off.
Assuming you wanted a way to trigger a click event, here's a basic example:
<head>
<script>
const test = document.getElementById('test');
const trigger = document.getElementById('trigger')''
test.addEventListener('click', () => {
const num_test = document.getElementById('num_tests').value;
for (let i = 0; i < num_test; i++) {
trigger.click();
}
});
trigger.addEventListener('click', () => {
console.log('trigger clicked');
});
</script>
</head>
<body>
<button id="test">Test</button>
<p>
On box should be number of tests
</p>
<form>
<input type="text" id="num_tests" value="">
<button id="trigger">
trigger it
</button>
</form>
</body>
https://jsfiddle.net/qr1z3d6e/2/
first in the jsfiddle.net link there are some errors such as imput instead of input.
I haven't tested it, but if I understand correctly is it something like this? try it.
<body>
<input id="myinput" type="text">00-99</input>
<button id="clickme">
</body>
<script>
var button = document.getElementById("clickme"),
count = 99;
var myInput = document.getElementById("myinput")
button.onclick = function(count){
count -= 1;
myInput.innerHTML = "00 " + count;
};
</script>
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.