Hi I'm trying to make a step by step instruction and I want the effect to be like when the user clicks on the button which will have the word STEP 1 inside the button the text inside a p element will change to the details on step 1. After that the same button will have the words inside the button changed into STEP 2 and when clicked will change the same p elements contents to step 2 instructions is this possible with javascrpt, jQuery or php??
You may do it in various ways. You may use jquery or plain javascript. I would suggest the following logic:
1) You initialize button with first step label and some variable that tracks your steps (e.g. var step = 1 initial)
<button>Step <span>1</span><button>
2) On click you increment variable, get the span in the button and update its content with that variable.
Here is fiddle
You could try using a simple function to do this
<!-- this is the Details Div -->
<div id="stepDetails"> Step Details Here </div>
<!-- here is your button that changes with onClick binding -->
<button id="stepButton" onClick="next_step()"> Step 1 </div>
<script>
/* global arrray with details */
var step_details = ["Intro Details", "Step 1 Details", "Step 2 Details"];
/* global variable to track position in array */
var current_step = 0;
/* function to be called from onClick binding */
function next_step() {
current_step++; /* increase the step variable */
document.getElementById("stepDetails").innerHTML = step_details[current_step];
document.getElementById("stepButton").innerHTML = "Step " + (current_step + 1);
}
</script>
Edit: added some comments to help explain the code better
Yes you can create it with js or jquery(maybe it's better). You can use simply the basis functions like <...onlick="yourfunction()"> to change for the STEPS
'<script type="text/javascript">
function youfunction(){
document.getElementById("p").innnerHTML = 'myDetails';
.....
}</script>
just to increase array index :
<body>
<div id="div">sample text</div>
<button id="button" onClick="next_step()"> Step 1 </div>
<script>
let arr = ["step 1", "step 2", "step 3" , "sample text" ];
let count = 0; // step
function next_step() {
if (count < 5) document.getElementById("div").innerHTML = arr[count];
count++;
if (count == 4) count = 0; // use 3 for stoping function on the last element
}
</script>
</body>
and if you wana make increase and decrease together , you can use somthing like this :
"use strict";
let arr = ["index0", "index1", "index2", "index3", "index4"];
let count = 0;
document.getElementById("div").innerHTML = arr[0];
function getup() {
if (count < arr.length) count++;
if (count === arr.length) count = 0;
document.getElementById("div").innerHTML = arr[count];
}
function getdown() {
if (count >= 0) count--;
if (count === -1) count = arr.length - 1;
document.getElementById("div").innerHTML = arr[count];
}
<div id = "div"></div>
<button onclick = "getup()">up</button>
<button onclick= "getdown()">down</button>
Related
I've added comments at the middle of the code. Please help me If you can, I have to deliver the product today.
if (a === 3) { //this would be how many of the answers further the action
var starting = 2; // for an example: yes or no; two of the answers go to no, one goes to yes.
// we take 2 as a starting point /you can set these individually for each scenario;
if (starting === 2) {
for (i = 0; i < starting; i++) {
answers[i] = 1; //sets the two checking points of the answer to the no, remaining yes;
document.getElementById("btn" + i).style.backgroundColor = "red";
// the problem lies here
// I tried multiple ways but none of them worked so far
//i want to apply the style change to multiple buttons at once.
}
alert(answers);
for (i = 0; i < starting; i++) {
if (answers[i] == 1) {
}
}
}
}
The problem is that the name of the button which is btn and the buttons are named as btn1, btn2,btn3; I want the for loop to change it to all of the buttons, however the string literal at the id doesn't recognize the i;
Example: "btn" + i; = change the style of the btn1
I fixed it guys. The mistake was that the for loop starts at 1;
And I have named the id of the buttons wrong. Novice mistake! :)
for (i = 0; i < 3; i++) {
if (document.getElementById("btn" + i) != undefined)
document.getElementById("btn" + i).style.backgroundColor = "red";
}
<input type="button" value="Submit" id="btn3">
<input type="button" value="Submit" id="btn1">
<input type="button" value="Submit" id="btn2">
The problem is your button id starts from btn1 and your code starts from 0 which is not located in your html so either add a check before setting background color or start your loop from 1
if (document.getElementById("btn" + i) != undefined)
I am adding an addEventListener to a picture on my website.
The goal is that every time the user clicks this picture (album-cover-art) a function will be called (function (event)), which will toggle between 3 functions
document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function (event){
});
these are the 3 functions i want to toggle between:
setCurrentAlbum(albumPicasso);
setCurrentAlbum(albumMarconi);
setCurrentAlbum(albumGreenDay);
how can include these 3 function calls in the eventListener that when the picture is clicked it will toggle between them??
document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function (event){
//toggle between the 3 functions below:
setCurrentAlbum(albumPicasso);
setCurrentAlbum(albumMarconi);
setCurrentAlbum(albumGreenDay);
});
NOTE:
This is a challenge where can i only use JavaScript NOT JQuery
It must toggle between them forever, not a loop which will have an end
you can create an array containg all choise then , using an index , select choise and increment this last every click , if index equals to the arrays length then return to the first index (0) ,
var index= 1;
var albums = [albumPicasso,albumMarconi,albumGreenDay];
document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function(event) {
if(index == albums.length) index = 0;
setCurrentAlbum(albums[index]);
index++;
});
See beelow snippet as an explaining sample :
var albumPicasso = "https://dummyimage.com/300x300/500/f0f",
albumMarconi = "https://dummyimage.com/300x300/550/ff0",
albumGreenDay = "https://dummyimage.com/300x300/555/0ff";
var index= 0;
var albums = [albumPicasso,albumMarconi,albumGreenDay];
document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function(event) {
if(index == albums.length) index = 0;
setCurrentAlbum(albums[index]);
index++;
});
function setCurrentAlbum(album){
document.getElementsByClassName("album-cover-art")[0].style.backgroundImage = "url('"+album+"')";
}
.album-cover-art {
background-image : url('https://dummyimage.com/300x300/500/0ff');
width:300px;
height:300px;
}
<div class="album-cover-art">
</div>
For all downvoters: just because you don't like the pattern it doesn't mean the solution is wrong. Type your own, better answer and let the asker pick the one he prefer. Also, if you're downvoting supply the reason (as a comment) for learning purposes, for me and the asker. thanks.
Here is the snippet you may find usefull:
albumClickCounter = 0;
document.getElementsByClassName("album-cover-art")[0].addEventListener("click", function (event){
if(window.albumClickCounter % 3 === 0) setCurrentAlbum(albumPicasso);
if(window.albumClickCounter % 3 === 1) setCurrentAlbum(albumMarconi);
if(window.albumClickCounter % 3 === 2) setCurrentAlbum(albumGreenDay);
window.albumClickCounter++;
});
var setCurrentAlbum = function(album) { alert(album); }
var albumPicasso = 1;
var albumMarconi = 2;
var albumGreenDay = 3;
.album-cover-art {
width: 200px;
height: 200px;
background: green;
}
<div class="album-cover-art"></div>
For demonstration purposes albums are numbers, but the logic can be whatever you like. Adjust to suit your needs.
use as below
var previouParam="";
document.getElementsByClassName("album-cover-art")
[0].addEventListener("click", function (event){
if(previouParam==""){
setCurrentAlbum("albumPicasso");
}else if(previouParam=="albumPicasso"){
setCurrentAlbum("albumMarconi");
}else{
previouParam="";
setCurrentAlbum("albumGreenDay");
}
});
Having issues getting this to work.
The intent is on click event to have a list with two columns switch to 1 column while hiding same level elements and on next click do the inverse. I specifically can't get the conditional statement for the columns to switch back to two columns on the second click.
<script>
var $col = 2;
$(".pft-directory").click(function () {
$(".pft-directory").toggle("fast");
$(this).toggle("fast");
if ($col > 1) {
$(".php-file-tree").css("columns", "1", "-webkit-columns", "1").set.$col = 2;
} else {
$(".php-file-tree").css("columns", "2", "-webkit-columns", "2").set.$col = 1;
}
});
</script>
Code Update:
<script>
var col = 2
$(".pft-directory").click(function() {
$(".pft-directory").toggle("fast");
$(this).toggle("fast");
if (col > 1) {
$(".php-file-tree").css("columns", "1", "-webkit-columns", "1");
col = 1;
} else {
$(".php-file-tree").css("columns", "2", "-webkit-columns", "2");
col = 2;
}
});
</script>
Instead of chaining .set.$col = 2; after the css, try ending the line after css. Then on the next line say $col = 1 or 2 I would also advise not to use the bling sign for variables not directly pertaining to jQuery collections and such. I also do not believe .set is a valid method available.
I have a small requirement. I have a div with three child divs with text. On load the first text will be visible. After 3 seconds the first one hides and second one is visible. After another 3 seconds the second one hides and third one is visible. This continues.
Currently I do not have any animation on the hide of one span and show of another. So it looks kind of murky. White I want is to show some kind of animation as it happens on the windows 8 tiles. Like the text that hides should slide up and disappear and the text that is to be shown should slide in from bottom. the animation should give the user a smooth experience.
I am not using any animation library. Is this possible through javascript / css ? Below is my code. Any idea would be useful.
HTML :
<div class="dataflipping">
<div class="first">FIRST TEXT</div>
<div class="second">SECOND TEXT</div>
<div class="third">THIRD TEXT</div>
</div>
JavaScript:
var srcElement = document.getElementsByClassName("dataflipping");
var elementChld = srcElement.getElementsByTagName("div");
var elementArr = [];
for (counter === 0; counter < elementChld.length; counter++) {
elementArr.push(elementChld[counter]);
}
var elementCount = elementArray.length;
// Set all except first one to hidden initially
for (counter = 1; counter < elementCount; counter++) {
var ele = elementArray[counter];
ele.style.display = "none";
}
counter = 0;
setInterval(function () {
counter++;
var prevElement = null;
var curElement = null;
if (counter === 1) {
var prevElement = elementArr[elementCount - 1];
}
else {
prevElement = elementArr[counter - 2];
}
curElement = elementArr[counter - 1];
prevElement.style.display = "none";
curElement.style.display = "block";
if (counter === elementCount) {
counter = 0;
}
}, 3000);
Girija
IF I understood well. I think easier way is to use MODULO, I wrote something like this:
elementArr[counter%elementCount]
http://jsfiddle.net/t3N4A/
I think you just need to try make position:absolute; and like i change opacity you should change it left/top position, change frequency of setInterval function to make it smoother and make it disappear where u want to. Hope that helped a little.
I am a bit of a javascript noob. I want to make different content appear on my page changing once a user has clicked 3 links on the page.
So I assume I want a variable which increases on every click of the link and an if statement that makes the content appear only once the variable reaches my desired number. This is what I've got so far:
<script>
var pass = 0;
function clicked() {
pass = pass + 1;
}
</script>
Then on the links:
LINK
Then on the content
<script>
if (pass > 1) {
document.write('First<br>') }
else {document.write('Second<br>') }
</script>
It isn't working and the variable always equals 0. Any ideas?
You 'content script' is only called once (when pass is still zero).
You need to check it every time when the link is clicked:
var pass = 0;
function clicked() {
pass = pass + 1;
if (pass > 1) {
document.write('First<br>');
} else {
document.write('Second<br>');
}
}
Here is an example:
var count = 1,
topics = ['Hello', 'Well...', 'Goodbye'];
function clickHandler() {
if (count >= 3) {
changeText(Math.round((Math.random() * 2)));
count = 1;
} else {
count += 1;
}
}
function changeText(idx) {
document.getElementById('content').innerHTML = topics[idx];
}
When the link is pressed 3 times you'll get random content from the list (topics).
What is changed
In the clickHandler the counter is being reset so each 3 clicks random content will be shown
I use innerHTML instead of document.write - its better practice
count is checked on each click instead of once like you check pass.
Example here.