I want html/Js/css code for a webpage of atleast 5-10 sentences wherein each sentence should appear on click.
Moreover, as all the content of that page appears, it should lead to another similiar page on the next click.
Can you help?
Try this, click inside the top area this is the body in this snippet here
let textelements = document.querySelectorAll(".text");
let counter = 0;
function clicker(){
if(counter < textelements.length){
textelements[counter].style.visibility = "visible";
counter ++
} else{
window.location.replace("<somepage>");
}
}
.text{
visibility: hidden
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="text1" class="text">Hello how</div>
<div id="text2" class="text">do you do</div>
<div id="text3" class="text">today</div>
<button class="btn" onclick="clicker()">Click Me</button>
</body>
Related
In this websites the user can add as much boxes as he wants, and every box contains a green and blue small boxes, the user should be able to click the blue box to remove the green box. the issue is that every time I click the blue box it doesn't remove the green box unless there is only one parent box is made. I have tried a lot of ways but nothing is working.
let count = 0;
function addBox() {
let box = `
<div class="box">
<div class="lbox" id="lbox">
</div>
<div class="rbox" id="rbox">
</div>
<h1>
${count}
</h1>
</div>
`
$(`#boxes`).append(box);
document.getElementById("lbox").addEventListener("click", function() {
rbox.remove();
})
count++;
}
If you have more than one parent box you need to iterate over each one.
You need to do something like;
let boxes = document.querySelectorAll('.box');
boxes.forEach(function(box){
box.querySelector('lbox').addEventListener('click',function(){
box.remove();
});
})
I haven't tested this, but the key part is the forEach function. This means everything you do inside the function is scoped to that box.
id must, at all times, be unique per-document. Learn about this very basic here: https://www.w3schools.com/hTML/html_id.asp. Your code keeps readding the same id values over and over, making your HTML invalid and your code dysfunctional.
Here's a working code example that doesn't rely on ids to get the job done:
let count = 0;
function addBox() {
let box = document.createElement('div');
box.className = 'box';
box.innerHTML = `
<div class="lbox">
</div>
<div class="rbox">
</div>
<h1>
${count}
</h1>`;
document.getElementById('boxes').appendChild(box);
box.querySelector('.lbox').addEventListener('click', function() {
box.querySelector('.rbox').remove();
})
count++;
}
.lbox, .rbox {
display: inline-block;
height: 40px;
width: 40px;
}
.lbox { background-color: blue; }
.rbox { background-color: green; }
<button onclick="addBox()">Add Box</button>
<div id="boxes"></div>
you need to define to delete the other box inside the same parent div.
I would delete the id because the defenition in class is the same.
I would also change the class names to something, wich makes visible what the green and what the blue box is.
You can do following:
let count = 0;
function addBox() {
let box = `
<div class="box_wrapper">
<div class="blue_box">
</div>
<div class="green_box">
</div>
<h1>
${count}
</h1>
</div>
`
$(`#boxes`).append(box);
$( ".blue_box" ).click(function() {
$(this).parent().find(".green_box").remove();
});
count++;
}
I think document.getElementById will always select the first element only with the given id. Therefore only the first lbox element in the dom keeps getting more and more eventlisteners attached to it, while the others won't get any. Make the id's of your elements unique by appending the count. That will make sure that every element gets it's eventlistener:
let count = 0;
function addBox() {
let box = `
<div class="box">
<div class="lbox" id="lbox${count}">
</div>
<div class="rbox" id="rbox${count}">
</div>
<h1>
${count}
</h1>
</div>
`;
$(`#boxes`).append(box);
document.getElementById("lbox" + count).addEventListener("click", function() {
$(".rbox" + count).remove();
})
count++;
}
I need help with adding a second button "Proceed" to appear only after "I Agree" button is clicked by the user. The "Proceed" button should take the user to a specific URL. https://www.google.com for example.
<!DOCTYPE html>
<html>
<body>
<p> Click following button to agree to the terms and conditions.</p>
<p id="demo" style="color:white">User Agreed to terms and conditions.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "I Agree";
}
</script>
<button onclick="myFunction()">I Agree</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "green";
}
</script>
</body>
</html>
Try something like this:
function agree() {
document.getElementById("proceed").style.display = "block";
}
<!DOCTYPE html>
<html>
<body>
<p> Click following button to agree to the terms and conditions.</p>
<button onclick="agree()">I Agree</button>
<a id="proceed" style="display: none;" href="https://www.google.com">Proceed</a>
</body>
</html>
You can make a new button using the document.createElement method, then give it some properties and append it to a parent element in the DOM.
You can navigate to a new page using the location property of the (default) window object. (Note that the line that handles browser navigation is commented out below because Stack Overflow snippets are sandboxed so the code would fail in this environment.)
This demo uses a "buttonContainer" div that is responsible for handling clicks on its child buttons, calling the appropriate function in each case.
const buttonsContainer = document.getElementById("buttons-container");
buttonsContainer.addEventListener("click", handleButtonClicks);
function handleButtonClicks(event){
if(event.target.id == "agree-btn"){ addProceedBtn(event); }
else if(event.target.id == "proceed-btn"){ proceed(event); }
}
function addProceedBtn(event){
const
proceedBtn = document.createElement("button");
proceedBtn.id = "proceed-btn";
proceedBtn.textContent = "Proceed";
buttonsContainer.appendChild(proceedBtn);
}
function proceed(event){
console.log("We got one!");
// location = "https://my-other-page.com"; // Redirects browser
}
<p> Click following button to agree to the terms and conditions.</p>
<div id="buttons-container">
<button id="agree-btn">I Agree</button>
</div>
In this code, there is a hidden button when page is loaded. After you click the "Agree" button, "Proceed" button will be appeared.
<!DOCTYPE html>
<html>
<body>
<p> Click following button to agree to the terms and conditions.</p>
<p id="demo" style="color:white">User Agreed to terms and conditions.</p>
<button onclick="myFunction()">I Agree</button>
<button id="proceed-button" onclick="window.location.href = 'http://www.google.com'" style="display:none">Proceed</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "green";
document.getElementById("proceed-button").style.display = 'inline-block';
}
</script>
</body>
</html>
try like this
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="check">
<p> Click following button to agree to the terms and conditions.</p>
<p id="demo" style="color:white">User Agreed to terms and conditions.</p>
<button id="btn" onclick="myFunction()">Proceed</button>
<script>
document.querySelector('#btn').setAttribute("disabled", "disabled");
document.querySelector('#check').addEventListener('click', function(event) {
console.log(event.srcElement.checked);
if(event.srcElement.checked) {
document.querySelector('#btn').removeAttribute("disabled");
} else {
document.querySelector('#btn').setAttribute("disabled", "disabled");
}
})
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "green";
}
</script>
</body>
</html>
I want to show an image when I click on the button. But right now the button hides the image when I click on it. Is there a way to reverse this? This is the code I have.
var flag = 1;
function coursework() {
if (flag == 1) {
document.getElementsById("coursework").style.display = "none";
flag = 0;
} else {
document.getElementById("coursework").style.display = "block";
flag = 1;
}
}
<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="Wellcome.png" width="300">
</div>
Thank you :)
You can set the image to display: none; initially and then change your if-else condition accordingly so that the image is displayed on first click and hide on second click and so on. Also, it should be getElementById and not getElementsById.
document.getElementById("coursework").style.display="none";
var flag =1;
function coursework() {
if(flag==1)
{
document.getElementById("coursework").style.display="block";
flag=0;
}
else{
document.getElementById("coursework").style.display="none";
flag=1;
}
}
<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?auto=compress&cs=tinysrgb&h=350" width="300">
</div>
I am assume scenario that initially you hide image and when click on button it will show it, may be it will different from what you want and try to give this answer. Refer following code
<html>
<body>
<button onclick="show()">Show Coursework</button>
<div id="coursework" style="display:none">
<img src="welcome.png" width="300">
</div>
<script>
function show(){
document.getElementById("coursework").style.display="block";
}
</script>
</body>
</html>
hope this will help full.
I have a question concerning an event onclick. I found this code during my research. My question is : even before the click the text already appears, is it possible to hide the text until we click on the actual button. And is it possible to have numerous onclick event working seperately that is o say only open the text above it? Thank you
<html>
<head>
<title>Show and hide div with JavaScript</title>
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "block") {
div.style.display = "block";
}
else {
div.style.display = "none";
}
}
</script>
</head>
<body>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>
happy coding :)
function showhide() {
var div = document.getElementById("newpost");
div.classList.toggle('hidden');
}
.hidden{
display : none;
}
<html>
<head>
<title>Show and hide div with JavaScript</title>
</head>
<body>
<!--if you want by default hidden then add class .hidden in new post -->
<div id="newpost" class="hidden">
<p>This div will be show and hide on button click</p>
</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>
make it by default as none in style on display property.
<div id="newpost" style="display:none">
<p>This div will be show and hide on button click</p>
</div>
Yes. In your stylesheet, have the #newpost div display: none and also add a modifier class, .visible with display: block. Lastly in your function you could toggle the .visible class via classList.toggle and you should be good to go:
var div = document.getElementById('newpost');
document.getElementById('button').addEventListener('click', showhide);
function showhide() {
div.classList.toggle('visible');
}
#newpost {
display: none;
}
#newpost.visible {
display: block;
}
<button id="button">Click Me</button>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
In JQuery you can add multiple on click events to a button like so:
$("#button").on("click", function(){
$("#newpost").toggle();
});
$("#button").on("click", function(){
$("#secondpost").toggleClass("bold");
});
#newpost{
display:none;
}
.bold{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Show and hide div with JavaScript</title>
</head>
<body>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
<button id="button">Click Me</button>
<p id="secondpost">toggle bold</p>
</body>
</html>
The first on click toggles the paragraph above.
The second on click toggles a class on the last paragraph that makes it bold.
html
<body>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">2.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details ">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">3.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
</body>
js
$(document).ready(function(){
$(".js--growth-step").click(function(event){
$(this).children(".step-details").slideToggle(500);
return false;
});
$(".js--growth-step .step-details").click(function(event) {
event.stopPropagation();
});
});
I'm a beginner starting to learn coding. I have designed an neuroscience related experiment on a webpage with 4 layers of webpage. my first layer will be constant. Second layer shows different images during each round of questioning. Third and fourth layer are questions displayed at certain time intervals and/or on click of submit. I would like to know how do i display the different images every time. Precisely, Can i do it using a for loop!?
<html>
<head>
<Title> Experiment </title>
<link rel="stylesheet" type="text/css" href="displayfieldset.css">
</head>
<body>
<!-- Layer 1 of cross hair image -->
<div id="crosshair" style="background-color:black; position:absolute; width:100%; height:100%; z-index:1; align:center">
<img src="crosshair.jpg" width="1350px" height="750px" >
</div> <!-- Layer 1 closed -->
<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z- index:2; align:center; margin-left:0.5%; margin-top:0.5%">
<img id="images" src="image1.jpg" style="width:1325px; height:720px; display:none">
</div> <!-- Layer 2 closed -->
<!-- Layer 3 Question 1 -->
<div id="questionone" style="z-index:3; position:absolute; display:none; margin-left: 180px">
<fieldset name="field1_1" id="field1_1">
<form name ="problem1_1" id="problem1_1" >
<b> Identify the problem shown in this image. </b>
<br>
<br>
<input type="text" name="answer1_1" id="answer1_1" maxlength="30" style="width: 400px">
<br>
<br>
<input type="button" value="Submit" onclick="showdiv()" >
</form>
</fieldset>
</div>
<!-- Layer 4 Question 2 -->
<div id="questiontwo" style=" position: absolute; z-index:5; align:center; display:none; margin-left: 180px">
<fieldset name="field1_2" id="field1_2" style="position:relative; align:center">
<form name ="problem1_2" id="problem1_2" >
<b> Propose a solution to the problem. </b>
<br>
<br>
<input type="text" name="solution1_2" id="solution1_2" maxlength="30" style="height: 200px; width: 400px">
<br>
<br>
<br>
<input type="button" value="Submit" onclick="hidediv()" >
</form>
</fieldset>
</div>
<script>
function showdiv()
{
document.getElementById('questiontwo').style.display = "block";
document.getElementById('questionone').style.display = "none";
}
function hidediv()
{
document.getElementById('piclayer').style.display = 'none';
document.getElementById('questionone').style.display = 'none';
document.getElementById('questiontwo').style.display = 'none';
}
<!-- Time out for image -->
setTimeout
( function()
{
document.getElementById('images').style.display = 'block';
}
,6000
);
<!-- Timeout for first question -->
setTimeout
( function()
{
document.getElementById('questionone').style.display = 'block';
}
,12000
);
</script>
</body>
</html>
Based on your coding,
The "crosshair" image, layer-1 is show always at z-index:1.
Layer-2 images will show after 6 seconds of page load at z-index:2.
Layer-3 div will show after 12 seconds of page load at z-index:3.
In the Layer-3, there is a submit button. If user click on the Submit button,
Layer-4 will be display and Layer-3 will be hide.
There is a submit button inside Layer-4 again, if user click on that button, all images will be hidden.
So, what you want to do?
Do you want to show images from Layer-2 by looping? If yes, here is sample codes:
var x = 0;
function myFunction(){
var Layer2Images = document.querySelectorAll("img.images");
if (x == Layer2Images.length)
x=0;
for (i = 0; i < Layer2Images.length; i++) {
Layer2Images[i].style.display = 'none';
}
Layer2Images[x].style.display = 'block';
x++;
}
setInterval(myFunction, 1000)
<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z-index:2; align:center; margin-left:0.5%; margin-top:0.5%">
<img class="images" src="https://pixabay.com/static/uploads/photo/2012/05/29/00/43/car-49278_1280.jpg" style="width:400px;height:300px; display:none;">
<img class="images" src="https://static.pexels.com/photos/24353/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
<img class="images" src="https://static.pexels.com/photos/16155/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
</div> <!-- Layer 2 closed -->
Check out document.querySelector and document.querySelectorAll. With those you can target a single DOM node by CSS query selector or you can target multiple DOM all at once and then loop over them in a for of loop by converting the nodes to an array with Array.from.
Full working example
let i = 0
// Grab all the layers and read them into an array so we can iterate them.
let layers = Array.from(document.querySelectorAll('img.layer'))
const nextLayer = () => {
// increment i and compare incremented value, if greater than 3, reset to first layer.
if(++i > 3)
i = 1
// iterate all layers and set their CSS display property to none.
layers.forEach((x) => { x.style.display = 'none' })
// select the single layer we are currently on and set its css display to block.
document.querySelector(`img.layer_${i}`).style.display = 'block'
}
// show first layer
nextLayer()
// show next layer every 2 seconds
setInterval(nextLayer, 2000)
<img class="layer layer_1" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<img class="layer layer_2" src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg" />
<img class="layer layer_3" src="http://livewallpaper.info/wp-content/uploads/2015/12/Desktop-Cute-Wallpapers-HD-1920x1080-1.jpg" />